Question

我试图让桨左右移动，它根本不会。我已经仔细检查了我的所有代码。没有错误，似乎仍无法解决问题。我确定它是愚蠢的，但任何指导都会受到赞赏:)我正在关注MDN的指南，但无济于事。在此先感谢您的帮助！

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="break.css">
    <title>Brick Breaker | RGL</title>
</head>
<body>
        <canvas id="brickCanvas" width="500" height="500"></canvas>
    <script src="break.js"></script>
</body>
</html>

CSS

#brickCanvas{
    background: orange;
}

JS

//initializing canvas
    var canvas = document.getElementById('brickCanvas');
    var ctx = canvas.getContext('2d');
//beginning ball position
    var x = canvas.width/2;
    var y = canvas.height-30;

//Paddle characteristics
    const PADDLE_HEIGHT = 10;
    const PADDLE_WIDTH = 75;
    var paddleX = (canvas.width-PADDLE_WIDTH)/2;

// Ball characteristics
    var ballRadius = 10;
// dx = ball speed on x-axis, dy = ball speed on y-axis.
    var xSpeed = 2;
    var ySpeed = -2;

// Booleans checking to see if an arrow is clicked
    var rightArrowPressed = false;
    var leftArrowPressed = false;


// Setting up ball color/size
    function drawBall(){
        ctx.beginPath();
        ctx.arc(x,y, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = "#eee";
        ctx.fill();
        ctx.closePath();
    }

//Drawing paddle
    function drawPaddle(){
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height-PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.closePath();
    }

/*
 Allows the ball to move by updating every 10ms, and clears the previously drawn
 ball at the beginning of the function.
 */
    function draw(){
        ctx.clearRect(0,0,canvas.width, canvas.height);
        drawBall();
        drawPaddle()
    /*
     Both if's check for bounce off of ceiling, floor, or wall.
     I am subtracting half the radius(5) from each because it gives the ball a
     nicer touch off of the sides by barely touching instead of going
     into the side.
     */

        if(y + ySpeed > canvas.height-5 || y + ySpeed < 5 ){
            ySpeed = -ySpeed;
        }

        if(x + xSpeed > canvas.height-5|| x + xSpeed < 5){
            xSpeed = -xSpeed;
        }

        //Checking for keyup/keydown to move paddle
        if(rightArrowPressed && paddleX < canvas.width-PADDLE_WIDTH){
            paddleX = paddleX + 5;
        }
        else if(leftArrowPressed && paddleX > 0){
            paddleX = paddleX - 5;
        }

        x = x + xSpeed;
        y = y + ySpeed;
}
document.addEventListener("keydown", keyDownCheck, false);
document.addEventListener("keyup", keyUpCheck, false);

//Checking for keycodes, and setting booleans based on keyup/keydown

function keyDownCheck(e){
    if(e.keycode === 39){
        rightArrowPressed = true;
    }
    else if(e.keycode === 37){
        leftArrowPressed = true;
    }
}

function keyUpCheck(e){
    if(e.keyCode === 39){
        rightArrowPressed = false;
    }
    else if(e.keyCode === 37) {
        leftArrowPressed = false;
    }
}

setInterval(draw,10);

无法在keydown上左右移动桨

0 个答案: