javascript - keylistener 一开始不起作用

Question

我的程序就像一个 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>

Answer 1

问题在于，在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>