Question

我想使用向上和向下箭头键左右上下移动播放器的电路板。我使用了一个事件监听器但它根本就没有注册。我已经能够通过鼠标移动检查替换事件监听器并将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) {....

Javascript键盘输入未注册

1 个答案: