Javascript 按键 addEventListener

Question

由于我是新手，所以我的低效编码给大家带来了巨大的麻烦，对此我提前表示歉意。

我正在尝试在 HTML5 Canvas 上使用 Javascript 制作一个非常基本的游戏，但我似乎找不到一种简单的方法来“检查”多个用户输入。

我已经成功地将 addEventListener 用于单人游戏。然而，当试图使其成为多人游戏时，一切都崩溃了。我不确定使用 'keydown' addEventListener 两次是否有效。

基本上，游戏会使用 WASD 键检查第一个玩家的答案，并使用箭头键检查第二个玩家的答案。

我目前有以下代码片段，该代码与 p2Game 的函数完全相同ga.addEventListener('keydown', check2, false):

function p1Game() {

ga.addEventListener('keydown', check1, false);
blankp1screen();
p1Time = 0;

switch(random[p1Level]) {
  case 1: // if the answer is UP, we will display DOWN
  p1drawTriangleDown();
  p1correctkeyID = 87; // answer for UP (W) key
  break;
case 2: // if the answer is DOWN, we will display UP
  p1drawTriangleUp();
  p1correctkeyID = 83; // answer for DOWN (S) key
  break;
case 3: // if the answer is LEFT,  we will display RIGHT
  p1drawTriangleRight();
  p1correctkeyID = 65; // answer for the LEFT (A) key
  break;
case 4: // if the answer is RIGHT, we will display LEFT
  p1drawTriangleLeft();
  p1correctkeyID = 68; // answer for the RIGHT (D) key
  break;
}

function check1(e) {
p1tt += p1Time;
if (e.keyCode == 87 || e.keyCode == 83 || e.keyCode == 65 || e.keyCode == 68) { // Checks if user enters the keys we want
  p1Answer = e.keyCode; // Stores the key to check
  if (p1correctkeyID == p1Answer) { // If the answer is the correct answer...
    if (p1Level < maxlevel) { // ...if we're not on level 10, we'll continue!
        blankp1screen();
        p1correctkeyID = null;
        p1Answer == null;
        p1Levelup();
        if ((p1Level - p2Level) == checkforafk) {
          p2Slow();
        } else {
          p1Game();
        }
  } else if (p1Level == maxlevel) { // if we're on the max level, we'll let the player win!
      p1Win();
  }
} else if (p1correctkeyID !== p1Answer) {
  p1Lose(); }
    }
}
ga.removeEventListener('keypress', check1, false);
}

对于 p2Game:

function p2Game() {
    ga.addEventListener('keydown', check2, false);
    p2Time = 0;
    blankp2screen();

    switch(random[p2Level]) {
        case 1: // if the answer is UP, we will display DOWN
          p2drawTriangleDown();
          p2correctkeyID = 38; // answer for UP (W) key
          break;
        case 2: // if the answer is DOWN, we will display UP
          p2drawTriangleUp();
          p2correctkeyID = 40; // answer for DOWN (S) key
          break;
        case 3: // if the answer is LEFT,  we will display RIGHT
          p2drawTriangleRight();
          p2correctkeyID = 37; // answer for the LEFT (A) key
          break;
        case 4: // if the answer is RIGHT, we will display LEFT
          p2drawTriangleLeft();
          p2correctkeyID = 39; // answer for the RIGHT (D) key
          break;
    }

function check2(e) {
    p1tt += p2Time;
    if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 37 || e.keyCode == 39) { // Checks if user enters the keys we want
    p2Answer = e.keyCode; // Stores the key to check
    if (p2correctkeyID == p1Answer) { // If the answer is the correct answer...
    if (p2Level < maxlevel) { // ...if we're not on level 10, we'll continue!
        blankp2screen();
        p2correctkeyID = null;
        p2Answer == null;
        p2Levelup();
        if ((p2Level - p1Level) == checkforafk) {
          p2Slow();
        } else {
          p2Game();
        }
  } else if (p2Level == maxlevel) { // if we're on level 10, we'll let the player win!
      p2Win(); // Max Level! Congratulations!
  }
} else if (p2correctkeyID !== p2Answer) {
  p2Lose();
}
}
}
ga.removeEventListener('keypress', check2, false);
}

Answer 1

如果没有运行示例进行调试，很难说清楚。但首先，如果您运行代码两次，每个玩家都会有两个监听器。如果运行三次，就会得到三次，依此类推。这是因为您要为 keydown 事件添加事件监听器，但随后要删除 keypress，这基本上意味着您永远不会删除 keydown处理程序。

我的建议是，你不应该在不同的地方处理两个输入，一开始看起来很容易，但它会在你的代码中产生“同步”问题，因为你必须在处理中处理玩家 1 的状态玩家 2 的代码。因此，只需一个事件处理代码，然后针对每种情况执行您需要执行的操作。我认为如果您使用良好的抽象，您最终会得到更容易理解的代码(我知道您说您正在从编程开始，所以这就是为什么我建议您应该遵循一种更容易推理的方法现在)。