Javascript keypress addEventListener

Question

我很抱歉，因为我是一个新手，所以我的编程效率低下，这是一个巨大的难题。

我试图在HTML5画布上使用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

那么很难说没有一个运行的例子来调试。但首先，如果你运行你的代码两次，你将有两个听众为每个球员。如果你运行三次，你将有三次，依此类推。这是因为您正在为​​事件添加事件侦听器，但是您将删除keypress，这意味着您永远不会删除​​处理程序。

我的建议是，你不应该在不同的地方处理这两个输入，它看起来似乎很容易，但它会在你的代码中产生'同步'问题，因为你不得不处理玩家1的状态处理玩家2的代码。因此，只需一个事件处理代码，并为每个事件做你需要做的事情。我认为如果你使用了很好的抽象，你会最终得到更易于遵循的代码（我知道你说你开始编程，所以这就是为什么我建议你应该采取一种更容易推理的方法现在）。