Question

我一直在关注使用JS制作Breakout Game的在线教程，但是它不起作用。即使像警报弹出这样的简单操作也不起作用。所有这些都是在我创建键盘控件之后开始发生的，所有错误也都在该部分中。但这看起来还不错，我已经将示例代码与我的代码进行了比较，并且一切都相同。我在做什么错了？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Gamedev</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            background:rgba(104, 10, 93, 0.61);
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <canvas id="myCanvas" width="480" height="320"></canvas>
</body>

<script>
    // JS goes here
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var ballRadius = 10;
    var x = canvas.width/2;
    var y = canvas.height-30;
    var dx = 2;
    var dy = -2;
    var paddleHeight = 10;
    var paddleWidth = 75;
    var paddleX = (canvas.width-paddleWidth)/2;
    var rightPressed = false;
    var leftPressed = false;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUphandler, false);

    alert('test')

    function keyDownHandler(e) {
        if(e.key == "Right" || e.key == "ArrowRight") {
            rightPressed = true;
        }
        elseif(e.key == "Left" || e.key == "ArrowLeft") {
            leftPressed = true;
        }
    }

    function keyUpHandler(e) {
        if(e.key -- "Right" || e.key == "ArrowRight") {
            rightPressed = false;
        }
        elseif(e.key-- "Left" || e.key == "ArrowLeft") {
            leftPressed = false;
        }
    }

    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "#EE82EE";
        ctx.fill();
        ctx.closePath();
    }
    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleheight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#9400D3";
        ctx.fill();
        ctx.closePath();
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();

        if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
            dy = -dy;
        }

        if(rightPressed) {
            paddleX += 7;
            if (paddleX + paddleWidth > canvas.width){
                paddleX = canvas.width - paddleWidth;
            }
        }
        else if(leftPressed) {
            paddleX -= 7;
            if (paddleX < 0){
                paddleX = 0;
            }
            x += dx;
            y += dy;
        }
    }
        setInterval(draw, 10);
</script>

</body>

</html>

Answer 1

您的代码中有很多错别字。此版本应能更好地工作（至少不会产生任何错误）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Gamedev</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            background:rgba(104, 10, 93, 0.61);
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <canvas id="myCanvas" width="480" height="320"></canvas>

</body>

<script>
    // JS goes here
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var ballRadius = 10;
    var x = canvas.width/2;
    var y = canvas.height-30;
    var dx = 2;
    var dy = -2;
    var paddleHeight = 10;
    var paddleWidth = 75;
    var paddleX = (canvas.width-paddleWidth)/2;
    var rightPressed = false;
    var leftPressed = false;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

    alert('test')

    function keyDownHandler(e) {
        if(e.key == "Right" || e.key == "ArrowRight") {
            rightPressed = true;
        }
        else if(e.key == "Left" || e.key == "ArrowLeft") {
            leftPressed = true;
        }
    }

    function keyUpHandler(e) {
        if (e.key == "Right" || e.key == "ArrowRight") {
            rightPressed = false;
        }
        else if(e.key == "Left" || e.key == "ArrowLeft") {
            leftPressed = false;
        }
    }

    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "#EE82EE";
        ctx.fill();
        ctx.closePath();
    }
    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#9400D3";
        ctx.fill();
        ctx.closePath();
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();

        if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
            dy = -dy;
        }

        if (rightPressed) {
            paddleX += 7;
            if (paddleX + paddleWidth > canvas.width){
                paddleX = canvas.width - paddleWidth;
            }
        }
        else if(leftPressed) {
            paddleX -= 7;
            if (paddleX < 0){
                paddleX = 0;
            }
            x += dx;
            y += dy;
        }
    }
        setInterval(draw, 10);
</script>

</html>

游戏无法正常工作，但我的代码看起来不错

1 个答案: