onlyforbopi
9/22/2018 - 7:41 AM

JS.EventsHandling.Game.v1

JS.EventsHandling.Game.v1

body,html{
    background-color: rgba(4, 38, 71, 0.986);
    font-family: monospace;
    color: aliceblue;
    margin: 0;
    height: 95vh;
    width: 100vw;
}
#playScreen{
    height: 50vh;
    width: 65vw;
    /*color: rgb(105, 18, 18);*/
   
}
.displayArea{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
}
#PlInput{
    padding-top: 5%;
    font-size: 2rem;
    }
#toType{
    margin-top: 5%;
    font-size: 3rem;
    min-width: 10em;
    letter-spacing: .4rem;
}
h1{
    text-align: center;
    font-size: 3rem;
    padding-bottom: 1%;
    letter-spacing: .4rem;
   
}
input{
    background-color: azure;
    font-size: 1em;    
    border: 1px solid black;
    font-family: monospace;    
}
.box{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.box > div, button{
    
    text-align: center;
    height: 4%;
    width: 8%;
    min-width: 100px;
    min-height: 50px;
    font-size: 1rem;
    margin: 2%;
    color: white;
   }
#start{
    background-color: rgb(19, 146, 76);
    border: 1px solid black;
}
#stop{
    background-color: rgba(192, 72, 72, 0.979);
    border: 1px solid black;
}
button:hover{
    color: rgb(57, 47, 94);
}
.text{
    font-size: 4rem;
    margin: 1%;
    color: greenyellow;
}
#time{
    font-size: 5rem;
    margin: 0;
    color: gold;
}
function init() {console.log("page loaded and DOM is ready");}

var wordList = ['baby','account','across','act','action','activity','actually','add','address',
'administration','admit','adult','affect','after','again','against','age','agency',
'agent','ago','agree','agreement','ahead','air','all','allow','almost',
'alone','along','already','also','although','always','American','among',
'amount','analysis','and','animal','another','answer','any','anyone','anything',
'appear','apply','approach','area','argue','arm','around','arrive','art','article',
'artist','as','ask', 'assume', 'at', 'attack', 'attention', 'attorney',"random",
"peacock",
"attention",
"phone",
"mobile",
"tablet",
"marriage",
"child",
"shirt",
"glasses",
"clock",
"bottle",
"famous",
"bag",
"black",
"tiger",
"watch",
"army",
"best",
"catch",
"cover",
"fan",
"handle",
"suitcase",
"baggage",
"printer",
"scanner",
"machine",
"computer",
"hanger",
"light",
"napkin",
"brush",
"comb",
"switch",
"door",
"rod",
"cooler",
"attic",
"Capetown",
"moisture",
"laptop",
"charger",
"pillow",
"socket",
"adapter",
"pen",
"time",
"bulb",
"photo",
"globe",
"woofer",
"telephone",
"telescope",
"award",
"cupboard",
"cushion",
"ladder",
"sofa",
"human",
"feet",
"Gameboy",
"grill",
"file",
"wind-chime",
"heart",
"curtain",
"Suhas",
"blanket",
"USA",
"bedsheet",
"Naija",
"granite",
"marble",
"double",
"vessel",
"dishes",
"laundry",
"bonus",
"bathtub",
"shower",
"toilet",
"cursor",
"television",
"monitor",
"dining",
"kitchen",
"living",
"oven",
"microwave",
"stove",
"floor",
"building",
"array",
"cloud",
"rain",
"monsoon",
"weather",
"sunrise",
"sunset",
"woohoo",
"moonlight",
"hello",
"magazine",
"bullet",
"blood",
"knob",
"plastic",
"yellow",
"yolo",
"crazy",
"queen",
"trunk",
"clothes",
"blob",
"swoosh",
"batter",
"cake",
"birthday",
"www.comfixx.com",
"spaghetti",
"noodle",
"spongebob",
"word",
"promise",
"short",
"a",
"comfixx",
"button",
"input",
"swindle",
"money",
"xzqvw",
"Try this?",
"encapsulation",
"inheritance",
"normalization",
"polymorphism",
"refactoring",
"variables",
"constants",
"objects",
"scope",
"pseudocode",
"conditionals",
"expressions",
"loops",
"callback",
"functions",
"pattern",
"button",
"javascript",
"cascading",
"styles",
"workflow",
"scrum",
"agile",
"default",
"event",
"process",
"error",
"debug",
"sprint",
"backlog",
"database",
"gygabytes",
"feedback",
"responsive",
"layout",
"connection",
"controller",
"view",
"model",
"service",
"queries",
"transaction",
"class",
"components",
"rollback",
"parameters",
"arguments",
"abstraction",
"commit",
"script"];

var rand
var score
var time
var wordToType
var bgCol
var clockSpeed
var clock
function startGame()
    {
        initialise();
        scoreUpdate();
        newWord();
        counter();
    }

function initialise()
    {
        clearInterval(clock);
        wordToType = document.querySelector('#toType');
        wordToType.innerHTML = 'Get Ready!';
        score = 0;
        scoreUpdate();
        time = 5;
        document.querySelector('#time').innerHTML = time;
        clockSpeed = 1000;
        levels();
        bgCol = document.querySelector('#playScreen');
        bgCol.style.backgroundColor = 'rgba(4, 38, 71, 0.986)';
        document.getElementById('input').value='';//Resets the input field
        document.getElementById('input').focus();
    }

function loose()
    {
        document.getElementById('input').value='';
        clearInterval(clock);
        wordToType = document.querySelector('#toType');//Adds word to playscreen
        wordToType.innerHTML = 'Game Over<br>Score = ' + score;
        bgCol = document.querySelector('#playScreen');
        bgCol.style.backgroundColor = 'rgb(105, 18, 18)';

    }

function scoreUpdate()
    {
        var update = document.querySelector('#newScore');
        update.innerHTML = score;
        levels();
    }

function counter()
    {
        time = 5;
        function tick(){document.querySelector('#time').innerHTML = time; time--;
        if(time < 0){
            loose();
        }}   
        tick(); //calling tick here takes the first second off the countdown instead of waiting a second with set interval        
        clock = setInterval(tick, clockSpeed);  
        console.log(clockSpeed);
        
    }

function checkWord(field)
    {
        if(field.value === rand){
            score += 1;
            newWord();
            document.getElementById('input').value='';//Resets the input field after success 
            scoreUpdate();
            clearInterval(clock);
            counter();
        }          
    }

function newWord()
    {
        rand = wordList[Math.floor(Math.random() * wordList.length)];//Picks a randon element from array
        wordToType = document.querySelector('#toType');//Adds word to playscreen
        wordToType.innerHTML = rand; 
    }

function levels()
    {
        switch(score){
            case 0: clockSpeed = 900, document.getElementById('level').innerHTML = '0'
            break;
            case 3: clockSpeed = 700, document.getElementById('level').innerHTML = '1'
            break;
            case 6: clockSpeed = 600, document.getElementById('level').innerHTML = '2'
            break;
            case 9: clockSpeed = 500, document.getElementById('level').innerHTML = '3'
            break;
            case 12: clockSpeed = 400, document.getElementById('level').innerHTML = '4'
            break;
        }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/word _game.css">
    <title>Speed Type</title>
    
</head>
    
    
    <body onload="init(), initialise();">

      <h1>Speed Type</h1>
      <section class="displayArea">
          <div id="playScreen">
            <p id="time" class="text"></p>
            <div class="box">
                <div>Score<p id="newScore" class="text"></p> </div>                
                <span id="toType">Get Ready!</span>    
                <div>Level<p id="level" class="text"></p> </div>            
            </div>    
            <div id="PlInput"> 
                <input id="input" type="text" 
                name="nom" 
                maxlength="32" 
                required
                oninput = "checkWord(this)">
            </div>
          </div>
      </section>
      <section class="displayArea">
        
        <button id="start" onclick="startGame();">Start</button>
        <button id="stop" onclick="initialise();">Reset</button>
        
      </section>
      
     
    </body>
    <script src="js/word_game1.js"></script>

</html>