keylistener не работает на первом

Question

Моя программа похожа на реакционную игру. При нажатии «стрелка вверх» фон меняет цвет на красный. И вам нужно нажать кнопку в течение 2 секунд. И если вы не нажмете, вы проиграете еще и игра начнется. Но в первые 2 секунды вы все равно проигрываете, но игра идет хорошо. Так в чем проблема с кодом в первые 2 секунды?

Мой код:

var ido = 2000; 
 
var nyomott = 0; 
 
var nemelso = 0; 
 
// >> main() 
 
function main() { 
 
    nyomott = 0; 
 
    var r = Math.floor(Math.random() * 4); 
 
    var szin; 
 

 
    switch (r) { 
 
    case 0: 
 
     szin = "red"; 
 
     break; 
 
    case 1: 
 
     szin = "green"; 
 
     break; 
 
    case 2: 
 
     szin = "yellow"; 
 
     break; 
 
    case 3: 
 
     szin = "blue"; 
 
     break; 
 
    } 
 

 
    var print = "<h1>" + "Pess the key: " + "</br>" + szin + "</h1>" + "</br>"; 
 
    document.getElementById("results").innerHTML = print; 
 

 
    startTimer(); 
 
} 
 

 
var ciklus = setInterval(startTimer, ido); 
 

 
// >> startTimer() : This function starts the timer 
 
function startTimer() { 
 
    timerId = setTimeout(function() { 
 
    if (nyomott == 0) { 
 
     document.getElementById("results").innerHTML = "<h1>Lose</h1>"; 
 
     clearInterval(ciklus); 
 
    } else { 
 
     main(); 
 
    } 
 
    }, ido); 
 

 
} 
 

 
document.addEventListener("keydown", function(inEvent) { 
 

 
    if (inEvent.keyCode == 38) { 
 
    document.body.style.backgroundColor = "red"; 
 
    nyomott = 1; 
 
    console.log(nyomott); 
 
    } else if (inEvent.keyCode == 404) document.body.style.backgroundColor = "green"; 
 
    else if (inEvent.keyCode == 405) document.body.style.backgroundColor = "yellow"; 
 
    else if (inEvent.keyCode == 406) document.body.style.backgroundColor = "blue"; 
 
});

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #202020; 
 
} 
 
div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    font-size: 60px; 
 
    color: #ffffff; 
 
} 
 
h1 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
}

<div onload="main()" id="results"> 
 
    <h1></h1> 
 
</div>

Answer 1

Проблема заключается в том, что в function main(), вы установили nyomott = 0;, которая удовлетворяет условию function startTimer(), который печатает 'потерять'.

Сделано несколько изменений

//pushed your variables up to be above the event listener function to be able to set nyomotto = 1 
 

 
var ido = 2000; 
 
var nyomott = 0; 
 
var nemelso = 0; 
 
document.addEventListener("keydown", function(inEvent) { 
 

 
    if (inEvent.keyCode == 38) { 
 
    document.body.style.backgroundColor = "red"; 
 
    nyomott = 1; 
 
    console.log(nyomott); 
 
    } else if (inEvent.keyCode == 404) 
 
    document.body.style.backgroundColor = "green"; 
 
    else if (inEvent.keyCode == 405) 
 
    document.body.style.backgroundColor = "yellow"; 
 
    else if (inEvent.keyCode == 406) 
 
    document.body.style.backgroundColor = "blue"; 
 
}); 
 

 
function main() { 
 
    var r = Math.floor(Math.random() * 4); 
 
    var szin; 
 

 
    switch (r) { 
 
    case 0: 
 
     szin = "red"; 
 
     break; 
 
    case 1: 
 
     szin = "green"; 
 
     break; 
 
    case 2: 
 
     szin = "yellow"; 
 
     break; 
 
    case 3: 
 
     szin = "blue"; 
 
     break; 
 
    } 
 

 
    var print = "<h1>" + "Pess the key: " + "</br>" + szin + "</h1>" + "</br>"; 
 
    document.getElementById("results").innerHTML = print; 
 

 
    startTimer(); 
 
} 
 
var ciklus = setInterval(startTimer, ido); 
 

 
// This function starts the timer 
 
function startTimer() { 
 
    timerId = setTimeout(function() { 
 
    if (nyomott == 0) { 
 
     document.getElementById("results").innerHTML = "<h1>Lose</h1>"; 
 
     clearInterval(ciklus); 
 
    } else { 
 
     main(); 
 
    } 
 
    }, ido); 
 

 
}

body { 
 
     width: 100%; 
 
     height: 100%; 
 
     background-color: #202020; 
 
    } 
 

 
    div { 
 
     position: absolute; 
 
     height: 100%; 
 
     width: 100%; 
 
     display: table; 
 
     font-size: 60px; 
 
     color: #ffffff; 
 
    } 
 

 
    h1 { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
     text-align: center; 
 
     color: #FFFFFF; 
 
    }

<div onload="main()" id="results"> 
 
    <h1></h1> 
 
</div>