Javascript鍵盤輸入未註冊

Question

我想用左右上下箭頭鍵向左上下移動播放器的電路板。我使用了一個事件監聽器，但它根本沒有被註冊。我已經能夠通過用mousemove檢查替換事件監聽器並將paddle1y設置爲e.clientY來使其工作。

// on game startup 
window.onload = function() { 
    canvasObj = document.getElementById("gc"), 
    canvasArea = canvasObj.getContext("2d"); 
    setInterval(update,1000/30); 
    canvasObj.addEventListener('keydown', function(event) { 
    if(event.keyCode == 37) { 
     alert('Left was pressed'); 
    } 
    else if(event.keyCode == 39) { 
     alert('Right was pressed'); 
    } 
}); 
} 
// defining variables 
var paddle1y = 200, // paddle 1 y coordinate 
    paddle2y = 200, // paddle 2 y coordinate 
    paddleWidth = 5, // paddle's width 
    paddleHeight = 100, // paddle's height 
    ballX = 300, // ball's x pos 
    ballY = 200, // ball's y pos 
    ballDimension = 8, // size of the ball in pixels 
    xVelocity = 6, // ball's x velocity 
    yVelocity = 3, // ball's y velocity 
    score1 = 0, // player 1's score 
    score2 = 0, // player 2's score 
    aiPaddle = 3, // speed at which the ai paddle moves, can be used to adjust difficulty 
    canvasObj = document.getElementById('gc'), // access the canvas object which the script tag is written in 
    canvasArea = canvasObj.getContext("2d"); // 2d canvas 

// reset game 
function reset() { 
    ballX = canvasObj.width/2; // set the ball to the middle of the x range 
    ballY = canvasObj.height/2; // set the ball to the middle of the y range 
    xVelocity = -xVelocity; // reverse the x velocity, so the ball moves towards the person who just won a point 
    yVelocity = 3; 
} 

// update performed each frame 
function update() { 
    // ball movement 
    ballX += xVelocity; // move the ball based on the x velocity variable 
    ballY += yVelocity; // move the ball based on the y velocity variable 

    // collision checks 
    // top 
    if(ballY < 0 && yVelocity < 0) { 
     yVelocity = -yVelocity; 
    } 

    // bottom 
    if(ballY > canvasObj.height && yVelocity > 0) { 
     yVelocity = -yVelocity; 
    } 

    // left side 
    if(ballX < 0) { 
     if(ballY > paddle1y && ballY < paddle1y + paddleHeight) { 
      xVelocity = -xVelocity 
      deltaY = ballY - (paddle1y + paddleHeight/2); 
      yVelocity = deltaY * 0.3; 
     } else { // if no collision add score to other side and reset 
      score2++; 
      reset(); 
     } 
    } 

    // right side 
    if(ballX > canvasObj.width) { 
     if(ballY > paddle2y && ballY < paddle2y + paddleHeight) { 
      xVelocity = -xVelocity 
      deltaY = ballY - (paddle2y + paddleHeight/2); 
      yVelocity = deltaY * 0.3; 
     } else { // if no collision add score to other side and reset 
      score1++; 
      reset(); 
     } 
    } 

    // AI movement 
    if(paddle2y + paddleHeight/2 < ballY) { 
     paddle2y += aiPaddle; 
     } else { 
      paddle2y -= aiPaddle; 
    } 

    // draw everything 
    canvasArea.fillStyle = "black"; // clears the canvas by setting it to black 
    canvasArea.fillRect(0, 0,canvasObj.width,canvasObj.height); // sets the canvas area 
    canvasArea.fillStyle = "white"; // set the paddle, ball and score to be white 
    canvasArea.fillRect(0, paddle1y, paddleWidth, paddleHeight); // draw paddle 1 
    canvasArea.fillRect(canvasObj.width - paddleWidth, paddle2y, paddleWidth, paddleHeight); // draw paddle 2 
    canvasArea.fillRect(ballX - ballDimension/2, ballY - ballDimension/2, ballDimension, ballDimension); // draw the bal 
    canvasArea.fillText(score1, 100, 25); // draw player 1's score 
    canvasArea.fillText(score2, canvasObj.width - 100, 25);// draw player 2's score 
} 

Answer 1

捕獲整個窗口的按鍵。試試這個：

window.addEventListener('keydown', function(event) {....