我的程序就像一个 react 游戏。当按“向上箭头”时,背景颜色变为红色。您需要在 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>
最佳答案
问题在于,在function main()
中,您设置了nyomot = 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>
关于javascript - keylistener 一开始不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34104415/