如何使用键盘在 <canvas> 周围移动形状？

Question

我想重新制作一款名为 Pong 的旧街机游戏（查看超链接，这是必要的！）

一切都很好，直到我到达必须在玩家按下 up/down 箭头键时移动每个玩家的横条的部分。这导致了奇怪的行为：

https://codepen.io/Undefined_Variable/pen/Pavzvd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="Pong.css">
</head>
<body>
    <canvas id="GameCanvas">No support for you, scrub!</canvas>
    <!--Start of the script-->
    <script>
        var GameCanvas = document.body.querySelector('#GameCanvas');
        var ctx = GameCanvas.getContext("2d");
        var WindowWidth = window.innerWidth;
        var WindowHeight = window.innerHeight;

        var playerOne = {
            x1: (0.02 * WindowWidth), 
            y1: (0.35 * WindowHeight),
            x2: 30,
            y2: 70
        }
        var playerTwo = {
            x1: (0.71 * WindowWidth),
            y1: (0.35 * WindowHeight),
            x2: 30,
            y2: 70
        }
        var LineOne = {
            y1: 20
        }
        var LineTwo = {
            y1: 535
        }
        var DashOne = { y1: 50 };
        var DashTwo = { y1: 90 };
        var DashThree = { y1: 130 };
        var DashFour = { y1: 170 };
        var DashFive = { y1: 210 };
        var DashSix = { y1: 250 };
        var DashSeven = { y1: 290 };
        var DashEight = { y1: 330 };
        var DashNine = { y1: 370 };
        var DashTen = { y1: 410 };
        var DashEleven = { y1: 450 };
        var DashTwelve = { y1: 490 };

        GameCanvas.width = 0.75 * WindowWidth;
        GameCanvas.height = 0.75 * WindowHeight;

        window.onload = function initial() {

            window.addEventListener('resize', function (evt) {
                GameCanvas.width = 0.75 * window.innerWidth;
                GameCanvas.height = 0.75 * window.innerHeight;
                playerTwo.x1 = (0.71 * window.innerWidth);
            });

            DrawPlayers();
            DrawTopBottomLines(LineOne, LineTwo);
            DrawDashes(DashOne);
            DrawDashes(DashTwo);
            DrawDashes(DashThree);
            DrawDashes(DashFour);
            DrawDashes(DashFive);
            DrawDashes(DashSix);
            DrawDashes(DashSeven);
            DrawDashes(DashEight);
            DrawDashes(DashNine);
            DrawDashes(DashTen);
            DrawDashes(DashEleven);
            DrawDashes(DashTwelve);
        }

        function DrawPlayers() {
            ctx.save();
            ctx.fillStyle = "white";
            ctx.fillRect(playerOne.x1, playerOne.y1, playerOne.x2, playerOne.y2);
            ctx.fillRect(playerTwo.x1, playerTwo.y1, playerTwo.x2, playerTwo.y2);
            ctx.restore();
            requestAnimationFrame(DrawPlayers);
            DrawTopBottomLines(LineOne);
            DrawTopBottomLines(LineTwo);
        }
        function DrawTopBottomLines(Line) {
            ctx.save();
            ctx.fillStyle = "white";
            ctx.fillRect(20, Line.y1, 1150, 20)
            ctx.restore();
        }
        function DrawDashes(dash) {
            ctx.save();
            ctx.fillStyle = '#696969';
            ctx.fillRect(GameCanvas.width / 2, dash.y1, 15, 30)
            ctx.restore();
        }
        window.addEventListener("keydown", movePlayerOne, false);

        function movePlayerOne(e) {
            switch (e.keyCode) {
                case 38:
                    console.log('Top arrow pressed!');
                    playerOne.y1 += 5;
                    playerOne.y2 += 5;
                    break;
                case 40:
                    console.log('bottom arrow pressed!');
                    playerOne.y1 += 5;
                    playerOne.y2 += 5;
                    break;
                case 87:
                    console.log('Top arrow pressed!');
                    deltaYTwo -= 5;
                    break;
                case 83:
                    console.log('bottom arrow pressed!');
                    deltaYTwo += 5;
                    break;
            }
        }
    </script>
</body>
</html>

CSS:

#GameCanvas {
    border: 1px solid black;
    background-color: #2a2a2a;
    margin-top: 10vh;
    margin-bottom: 10vh;
    margin-right: 12vw;
    margin-left: 12vw;
}

body {
    font-family: 'ArcadeFont';
    font-size: 5em;
    overflow: hidden;
}

@font-face {
    font-family: 'ArcadeFont';
    src: url('fonts/ARCADECLASSIC.TTF');
}

重要提示：运行全屏游戏！

当我尝试按下 up/down 箭头时，条形图开始 "expanding" 而不是改变位置。请告诉我如何修复它。

注意：我只是初学者，尤其是 JavaScript，所以请不要包含任何 jQuery/angularJS/React solutions/etc。我不想在我的代码中使用任何框架。提前致谢。

Answer 1

您忘记在重绘前清除 canvas。您看到的是新对象被绘制在旧对象上。

这将清除整个canvas，因此您需要重新绘制所有内容

ctx.clearRect(0, 0, GameCanvas.width, GameCanvas.height);

但是，您可以清除桨所在的部分，然后通过将四个值替换为如下内容来重新绘制该区域：

ctx.clearRect(paddleXOffset, paddleYOffset, paddleWidth, paddleHeight);

如何使用键盘在 <canvas> 周围移动形状？

How to move a shape around a <canvas> using keyboard?

javascript

animation

html5-canvas

2d-games