游戏不起作用，但我的代码看起来不错

Question

I've been following an online tutorial for making a Breakout Game using JS, but it doesn't work.我一直在关注使用 JS 制作突围游戏的在线教程，但它不起作用。 Even something as simple as an alert popup doesn't work.即使像警告弹出窗口这样简单的东西也不起作用。 All of this started happening after I created the keyboard controls, and all of the errors are in that section as well.所有这些都是在我创建键盘控件后开始发生的，所有错误也都在该部分。 But it looks fine, i've compared the sample code with mine and everything's identical.但看起来不错，我已经将示例代码与我的进行了比较，一切都相同。 What am I doing wrong?我究竟做错了什么？

<!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

You have numerous typos in your code.你的代码中有很多错别字。 This version should work better (at least it does not generate any errors):这个版本应该工作得更好（至少它不会产生任何错误）：

 <!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 个解决方案

解决方案1
0 已采纳 2020-10-23 01:58:09

游戏不起作用，但我的代码看起来不错

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-23 01:58:09

解决方案1
0 已采纳 2020-10-23 01:58:09