JS - jQuery/키가 누름/POLL 함수인지 감지하는 방법

Question

Javascript로 Ping Pong 게임을 만들고 있는데, 화면에서 튀는 공이 있고 래퍼의 아래쪽 테두리를 만지지 못하게 할 수 있습니다. 상자. 여기

는 화살표 키 ...하지만 무엇 RAQUET를 누를 때 왼쪽에서 오른쪽으로 RAQUET 이동을 가정하는 코드 (튀는 공은 문제는, 나는 이미 프로그래밍 한하지 않음) 원래의 위치에서 왼쪽 또는 오른쪽으로 많은 픽셀처럼 보이게하는 것입니다. 내 말은, 그것이 유창하게 움직이지 않는다는 것입니다, 그것은 단지 왼쪽이나 오른쪽으로 30 또는 100 픽셀처럼 보입니다.

function gameLoop() { 

    //**********DETECTS IF LEFT OR RIGHT KEYS ARE PRESSED************ 

    $(document).keydown(function(e) { 
     if(e.keyCode == 37) { //LEFT 
      userBoxPosX -= userBoxSpeedX; 
     } 
     if(e.keyCode == 39) { //RIGHT 
      userBoxPosX += userBoxSpeedX; 
     } 
    }); 

    //THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET 
    userBox.css('left', userBoxPosX + "px"); 

    setTimeout(gameLoop, 50); //THIS FUNCTION CALLS ITSELF EVERY 50 milliseconds (20FPS) 

} 

어떻게하면 유창하게 움직일 수 있습니까? 화살표 키를 눌렀을 때?

더 많은 정보가 필요하거나 프로젝트 업로드가 필요할 경우 알려 주시면 알 수 있습니다.

Answer 1

50 밀리 초마다 다른 핸들러를 바인드하므로 몇 초 후에 keydown 이벤트에 바인드 된 수백 개의 핸들러가 있습니다. 따라서 키를 누르면 처리기가 수백 번 연속 실행됩니다.

게임 루프 외부에서 처리기를 한 번 설정해야합니다. 루프 내에서 setTimeout을 사용하여 반복 사이에 브라우저로 제어를 되돌려 야합니다. 타임 아웃을 기다리는 동안 키를 누르면 처리기가 트리거됩니다.

다음

var userBoxPosX = 0, userBoxLastPosX = null; 

function gameLoop() { 

    if (userBoxPosX !== userBoxLastPosX) { // Has racquet been moved? 
     //THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET 
     userBox.css('left', userBoxPosX + "px"); 
     userBoxLastPosX = userBoxPosX; 
    } 

} 

setInterval(gameLoop, 50); // Call main loop function every 50 ms (20 FPS) 

$(document).keydown(function(e) { 
    if(e.keyCode == 37) { //LEFT 
     userBoxPosX -= userBoxSpeedX; 
    } 
    if(e.keyCode == 39) { //RIGHT 
     userBoxPosX += userBoxSpeedX; 
    } 
}); 

내가 생각하는 방법은 20 FPS의 자동 반복을 구현할 수있어 :

var userBoxDelta = 0; 

function gameLoop() { 

    if (userBoxDelta != 0) { // is raquet moving? 
     //THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET 
     userBoxPosX += userBoxDelta; 
     userBox.css('left', userBoxPosX + "px"); 
    } 

} 

setInterval(gameLoop, 50); // Call main loop function every 50 ms (20 FPS) 

$(document).keydown(function(e) { 
    if(e.keyCode == 37) { //LEFT 
     userBoxDelta = -userBoxSpeedX; 
    } 
    if(e.keyCode == 39) { //RIGHT 
     userBoxDelta = userBoxSpeedX; 
    } 
}); 

$(document).keyup(function() { 
    userBoxDelta = 0; 
} 

Answer 2

이 간단한 해결책은 다음과 같이 될 것이다

나는이 기본 구조해야한다고 생각 :

$(document).keydown(function(e) { 
     if(e.keyCode == 37) { //LEFT 
      userBoxPosX -= userBoxSpeedX; 
      updatePosition(); 
      } 
     if(e.keyCode == 39) { //RIGHT 
      userBoxPosX += userBoxSpeedX; 
      updatePosition(); 
      } 
     }); 

function updatePosition() { 
    userBox.css('left', userBoxPosX + "px"); 
};