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的代碼。因此，只需一個事件處理代碼，併爲每個事件做你需要做的事情。我認爲如果你使用了很好的抽象，你會最終得到更易於遵循的代碼（我知道你說你開始編程，所以這就是爲什麼我建議你應該採取一種更容易推理的方法現在）。