Javascript按键式addEventListener

由于我是一个新手，所以我为我的低效率编码带来的巨大的视觉障碍提前道歉

我试图在HTML5画布上使用Javascript制作一个真正基本的游戏，但似乎找不到一个简单的方法来“检查”多个用户输入

我已经成功地将addEventListener用于单人游戏。然而，当试图让它成为多人游戏时，一切都会分崩离析。我不确定两次使用“keydown”addEventListener是否有效

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

我现在有下面的代码片段，代码是完全为p2Game复制的，带有函数

ga.addEventListener（'keydown'，check2，false）

:

函数p1Game（）{
ga.addEventListener（'keydown'，check1，false）；
blankp1screen（）；
p1时间=0；
开关（随机[p1Level]）{
案例1://如果答案为“向上”，我们将显示“向下”
p1drawTriangleDown（）；
p1correctkeyID=87；//回答向上（W）键
打破
案例2://如果答案为“向下”，我们将显示“向上”
p1p（）；
p1correctkeyID=83；//回答向下键
打破
案例3://如果答案是左，我们将显示右
p1DrawTrianglerRight（）；
p1correctkeyID=65；//回答左（A）键
打破
案例4://如果答案正确，我们将显示LEFT
p1drawTriangleLeft（）；
p1correctkeyID=68；//回答右（D）键
打破
}
功能检查1（e）{
p1tt+=p1t时间；
如果（e.keyCode==87 | | e.keyCode==83 | | e.keyCode==65 | | e.keyCode==68）{//检查用户是否输入了我们想要的密钥
p1Answer=e.keyCode；//存储要检查的密钥
如果（p1correctkeyID==p1Answer）{//如果答案是正确答案。。。
如果（p1Level

对于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);
}

函数p2Game（）{
ga.addEventListener（'keydown'，check2，false）；
p2时间=0；
空白屏幕（）；
开关（随机[p2Level]）{
案例1://如果答案为“向上”，我们将显示“向下”
p2drawTriangleDown（）；
p2correctkeyID=38；//回答向上（W）键
打破
案例2://如果答案为“向下”，我们将显示“向上”
p2p（）；
p2correctkeyID=40；//回答向下键
打破
案例3://如果答案是左，我们将显示右
P2DrawTrianglerRight（）；
p2correctkeyID=37；//回答左（A）键
打破
案例4://如果答案正确，我们将显示LEFT
p2drawTriangleLeft（）；
p2correctkeyID=39；//回答右（D）键
打破
}
功能检查2（e）{
p1tt+=p2次；
如果（e.keyCode==38 | | e.keyCode==40 | | e.keyCode==37 | | e.keyCode==39）{//检查用户是否输入了我们想要的密钥
p2Answer=e.keyCode；//存储要检查的密钥
如果（p2correctkeyID==p1Answer）{//如果答案是正确答案。。。
如果（p2Level

如果没有运行的示例进行调试，很难判断是否正确。但首先，如果您运行两次代码，那么每个播放器将有两个侦听器。如果你运行三次，你将有三次，以此类推。这是因为您正在为

keydown

事件添加一个事件侦听器，但随后您正在删除

keypress

，这基本上意味着您永远不会删除

keydown

处理程序

---

我的建议是，您不应该在单独的位置处理这两个输入，一开始这可能看起来很容易，但它会在代码中产生“同步”问题，因为您必须在播放器2的处理代码中处理播放器1的状态。所以，只需要一个事件处理代码，并为每种情况执行任何需要执行的操作。我认为如果你使用好的抽象，你最终会得到更容易理解的代码（我知道你说你从编程开始，所以这就是为什么我建议你现在应该遵循一种更容易推理的方法）。

请解释问题所在。“一切都会分崩离析”似乎不是一个恰当的问题。代码看起来或多或少是正确的，但由于无法运行，因此不可能知道您当前的问题是什么。抱歉！回答/经过2次迭代后，游戏跳转到p1Lose（），p2Game（）似乎没有接受任何输入。重新启动游戏（再次调用p1Game（）和p2Game（）函数）后，游戏认为player1的每个输入都是错误的。我也用p2Game（）的代码更新了我的帖子。你几乎要从头重写这段代码。由于反复调用

p2Game

，因此也会多次调用

addEventListener

，将重复的事件处理程序链接到单击事件。这意味着当你点击时，同一个函数会被执行很多次，结果只会变得更糟。你需要坐下来重新考虑一下。哦！我完全没有看到那个打字错误！

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);
}