keylistener没有'一开始不起作用

keylistener doesn't work at the first

本文关键字：一开始 不起作用 没有 keylistener      更新时间：2023-09-26

我的程序就像一个反应游戏。当按下"向上箭头"时，背景颜色变为红色。你需要在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()中，您设置了满足打印"丢失"的function startTimer()中的条件的nyomott = 0;。

进行了一些调整

//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>

相关文章：