자바 스크립트 키 누르기 addEventListener

Question

거창한 눈매에 대해 사과드립니다. 이는 초보자로서 비효율적 인 코딩입니다.

저는 HTML5 캔버스에서 Javascript를 사용하여 정말 기본적인 게임을 만들려고하고 있으며 여러 사용자 입력을 "확인"하는 간단한 방법을 찾지 못하는 것 같습니다.

나는 싱글 플레이 게임에 addEventListener를 성공적으로 사용했습니다. 그러나 멀티 플레이어로 만들려고 할 때 모든 것이 무너집니다. 'keydown'addEventListener를 두 번 사용하면 잘 모르겠습니다.

기본적으로 게임은 화살표 키를 사용하여 두 번째 플레이어의 답변뿐만 아니라 WASD 키를 사용하여 첫 번째 플레이어의 답변을 확인합니다.

나는 현재 다음 코드 조각을 가지고 코드는 기능 ga.addEventListener('keydown', check2, false) 와 p2Game에 대해 정확히 중복 : p2Game를 들어

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

:

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에 대한 코드를 처리하십시오. 따라서 하나의 이벤트 처리 코드 만 있으면 모든 경우에 필요한 모든 작업을 수행하십시오. 나는 당신이 좋은 추상화를 사용한다면 더 쉽게 따라 할 수있는 코드를 가질 것이라고 생각한다. (프로그래밍으로 시작한다고 말했고, 그래서 나는 당신이 생각하기 쉬운 방법을 따라야한다고 제안했다. 지금).