Question

现在，我正在重新创建一个名为Pong的旧的街机游戏（查看超链接）。

当每个播放器按下W / S或上箭头/下箭头时，我可以移动每个播放器的小节。问题是您不能一次移动两个条。这确实会妨碍游戏玩法，使其无法播放，因为当玩家一按下键时，玩家二将无法移动其指示条。请告诉我如何解决此问题。（又名。如何使两个玩家同时玩游戏）

（重要：在全屏预览游戏）

这是我的代码：

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

HTML / JS：

<!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();
            requestAnimationFrame(DrawDashes);
        }
        window.addEventListener("keydown", movePlayer, false);

        function movePlayer(e) {

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

            if (e.keyCode == 83) {
                console.log('Top arrow pressed!');
                playerOne.y1 += 5;
                DrawDashes(DashOne);
                DrawDashes(DashTwo);
                DrawDashes(DashThree);
                DrawDashes(DashFour);
                DrawDashes(DashFive);
                DrawDashes(DashSix);
                DrawDashes(DashSeven);
                DrawDashes(DashEight);
                DrawDashes(DashNine);
                DrawDashes(DashTen);
                DrawDashes(DashEleven);
                DrawDashes(DashTwelve);
            }
            if (e.keyCode == 87) {
                console.log('bottom arrow pressed!');
                playerOne.y1 -= 5;
                DrawDashes(DashOne);
                DrawDashes(DashTwo);
                DrawDashes(DashThree);
                DrawDashes(DashFour);
                DrawDashes(DashFive);
                DrawDashes(DashSix);
                DrawDashes(DashSeven);
                DrawDashes(DashEight);
                DrawDashes(DashNine);
                DrawDashes(DashTen);
                DrawDashes(DashEleven);
                DrawDashes(DashTwelve);
            }
            if (e.keyCode == 38) {
                console.log('W pressed!');
                playerTwo.y1 -= 5;
                DrawDashes(DashOne);
                DrawDashes(DashTwo);
                DrawDashes(DashThree);
                DrawDashes(DashFour);
                DrawDashes(DashFive);
                DrawDashes(DashSix);
                DrawDashes(DashSeven);
                DrawDashes(DashEight);
                DrawDashes(DashNine);
                DrawDashes(DashTen);
                DrawDashes(DashEleven);
                DrawDashes(DashTwelve);
            }
            if (e.keyCode == 40) {
                console.log('S pressed!');
                playerTwo.y1 += 5;
                DrawDashes(DashOne);
                DrawDashes(DashTwo);
                DrawDashes(DashThree);
                DrawDashes(DashFour);
                DrawDashes(DashFive);
                DrawDashes(DashSix);
                DrawDashes(DashSeven);
                DrawDashes(DashEight);
                DrawDashes(DashNine);
                DrawDashes(DashTen);
                DrawDashes(DashEleven);
                DrawDashes(DashTwelve);
            }
        }
    </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');
}

Answer 1

您本质上需要使用keydown事件在内部记录按下的键，然后在释放键时使用keyup事件。

我不会重复这个答案，所以我将其链接：JavaScript multiple keys pressed at once

如何使用键盘在HTML5画布中同时移动多个形状？

1 个答案: