在键盘输入中更新变量一次

Question

我需要键盘事件的帮助。因此，我想发生的是，当您按W和2个键时，我想将其添加到水中，而不是在木头上添加一个（在不带2个w键时，它将添加到木头上。但是我只会希望木材和水更新一次，而不是握住钥匙时添加一个。这是一些代码

var wood = 0;
var water = 0;
var woodOut = document.getElementById('wood');
var waterOut = document.getElementById('water');
window.addEventListener("keydown", key);
function key() {
  var x = event.which || event.keyCode;
  if(x == 87){
    wood = wood + 1;
    woodOut.innerHTML = wood;
  }
  if(x == 87 && x == 50){
     water = water + 1;
     waterOut.innerHTML = water;
  }
}

<p id="wood">0</p>
<p id="water">0</p>

Answer 1

您需要跟踪按下的先前键（w+1将为wood添加，w+2， water）：

var wood = 0;
var water = 0;
var woodOut = document.getElementById('wood');
var waterOut = document.getElementById('water');
var previous_key;
window.addEventListener("keydown", key);
function key() {
  var x = event.which || event.keyCode;
  if(x== 49 && previous_key == 87){
    wood = wood + 1;
    woodOut.innerHTML = wood;
  }
  if (x == 50 && previous_key == 87){
     water = water + 1;
     waterOut.innerHTML = water;
  }
  previous_key = x;
}

<p id="wood">0</p>
<p id="water">0</p>

Answer 2

实际上，如果我了解您想要的东西，这很容易。您只需创建一个具有两个属性的映射对象，这些属性是您的密钥代码，然后将它们放在错误中。当W和2都按下时，您可以提交所需的内容。

请查看以下代码，然后尝试首先按W，然后尝试W 2：

   var wood = 0;
var water = 0;
var woodOut = document.getElementById('wood');
var waterOut = document.getElementById('water');
var map = {87: false, 50: false,};
window.addEventListener("keydown", keyDown);
window.addEventListener("keyup", keyUp);
function keyDown(e) {
if (e.keyCode in map) {
    map[e.keyCode] = true;
    if (map[87]) {
        wood = wood + 1;
        woodOut.innerHTML = wood;
    } 
    if(map[50] && map[87]){
      water = water + 1;
      waterOut.innerHTML = water;
  }
}
 
}
function keyUp(e) {
  if (e.keyCode in map) {
    map[e.keyCode] = false;
  }
}

<p id="wood">0</p>
<p id="water">0</p>

Answer 3

如果您要在按住密钥时仅更新一次。尝试这个

window.addEventListener("keyup", key);