Question

我正在尝试重新创建一个非常古老的街机游戏，名为Pong（请查看超链接）

我创建了除球以外的所有内容，但是当我尝试绘制/动画时，会出现一些非常奇怪的行为：

注意：以全屏模式观看游戏！

这是我的代码：https://codepen.io/Undefined_Variable/pen/Pavzvd

HTML：

<!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 x = 0;
        var speedX = 0;
        var speedY = 0;

        var playerOne = {
            x1: (0.02 * WindowWidth),
            y1: (0.45* WindowHeight),
            x2: 30,
            y2: 70
        }
        var playerTwo = {
            x1: (0.96 * WindowWidth),
            y1: (0.45 * WindowHeight),
            x2: 30,
            y2: 70
        }
        var LineOne = {
            y1: 20
        }
        var LineTwo = {
            y1: 650
        }
        var ball = {
            x: 60,
            y: 60,
            radius: 30,
            speedX: 2,
            speedY: 2,
            color: 'green'
        }

        var Ball = {
            x1: 782.5 + speedX,
            y1: 400 + speedY,
            x2: 40,
            y2: 40,
        }

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

        window.onload = function initial() {

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

            DrawPlayers();
            DrawDashesWhileLoop();
            DrawBall();
            BallMovement();
        }

            function DrawDashesWhileLoop() {
                var y = 70;
                while (y < 730) {
                    y += 30;
                        ctx.save();
                        ctx.fillStyle = 'white';
                    ctx.fillRect(GameCanvas.width / 2, y, 5, 15);
                        ctx.restore();
                }
            }

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

        function movePlayer(e) {

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

            if (e.keyCode == 83) {
                console.log('S pressed!');
                playerOne.y1 += 20;
            }
            if (e.keyCode == 87) {
                console.log('W pressed!');
                playerOne.y1 -= 20;
            }
            if (e.keyCode == 38) {
                console.log('Top arrow pressed!');
                playerTwo.y1 -= 20;
            }
            if (e.keyCode == 40) {
                console.log('Bottom arrow pressed!');
                playerTwo.y1 += 20;
            }
            if (e.keyCode > 0) {
                DrawDashesWhileLoop();
                BarCollision(playerOne);
                BarCollision(playerTwo);
            }
        }
        function BarCollision(player) {
            if (player.y1 < 10) {
                console.log("AAAAAAAA");
                player.y1 = 10;
            }
            if (player.y1 > 820) {
                console.log("AAAAAAAA");
                player.y1 = 820;
            }
        }
        function BallMovement() {
            DrawBall();
            speedX = 10;
            speedY = 10;
            requestAnimationFrame(BallMovement);
        }
        function DrawBall() {
            ctx.save();
            ctx.fillStyle = "white";
            ctx.fillRect(Ball.x1, Ball.y1, Ball.x2, Ball.y2)
            ctx.restore();
        }
    </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');
}

请告诉我如何解决（当页面加载时，我希望球以“ 10px / 60帧”的速度开始向右移动）

Answer 1

这可能有助于您走上正确的路： https://codepen.io/anon/pen/BVgKOL/

基本上，您实际上并没有更改球的值。您会注意到在DrawBall（应该是驼峰式btw）中，我添加了clearRect方法，并在Ball的x1值中添加了2，使它向右移动。我没有计算您每60帧10px的特定速度，所以请原谅，但这只是您的一点数学。您可以使用自己的方法来更改Ball的坐标，因为显然您会想根据碰撞等方式以不同的方式进行操作。此外，您必须在球经过时重新绘制中间的虚线，因为clearRect也将删除它。（不过，如果您移动其中一位玩家，这也会触发中线重绘）。希望这会有所帮助！

var GameCanvas = document.body.querySelector('#GameCanvas');
        var ctx = GameCanvas.getContext("2d");
        var WindowWidth = window.innerWidth;
        var WindowHeight = window.innerHeight;

        var x = 0;
        var speedX = 0;
        var speedY = 0;

        var playerOne = {
            x1: (0.02 * WindowWidth),
            y1: (0.45* WindowHeight),
            x2: 30,
            y2: 70
        }
        var playerTwo = {
            x1: (0.96 * WindowWidth),
            y1: (0.45 * WindowHeight),
            x2: 30,
            y2: 70
        }
        var LineOne = {
            y1: 20
        }
        var LineTwo = {
            y1: 650
        }
        var ball = {
            x: 60,
            y: 60,
            radius: 30,
            speedX: 2,
            speedY: 2,
            color: 'green'
        }

        var Ball = {
            x1: 782.5 + speedX,
            y1: 400 + speedY,
            x2: 40,
            y2: 40,
        }

        GameCanvas.width = WindowWidth;
        GameCanvas.height = WindowHeight;

        window.onload = function initial() {

            window.addEventListener('resize', function (evt) {
                GameCanvas.width = window.innerWidth;
                GameCanvas.height = window.innerHeight;
                playerTwo.x1 = (0.96 * window.innerWidth);
                DrawDashesWhileLoop();
            });

            DrawPlayers();
            DrawDashesWhileLoop();
            DrawBall();
            BallMovement();
        }

            function DrawDashesWhileLoop() {
                var y = 70;
                while (y < 730) {
                    y += 30;
                        ctx.save();
                        ctx.fillStyle = 'white';
                    ctx.fillRect(GameCanvas.width / 2, y, 5, 15);
                        ctx.restore();
                }
            }

        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);
        }
        window.addEventListener("keydown", movePlayer, false);

        function movePlayer(e) {

            ctx.clearRect(0, 0, GameCanvas.width, GameCanvas.height);

            if (e.keyCode == 83) {
                console.log('S pressed!');
                playerOne.y1 += 20;
            }
            if (e.keyCode == 87) {
                console.log('W pressed!');
                playerOne.y1 -= 20;
            }
            if (e.keyCode == 38) {
                console.log('Top arrow pressed!');
                playerTwo.y1 -= 20;
            }
            if (e.keyCode == 40) {
                console.log('Bottom arrow pressed!');
                playerTwo.y1 += 20;
            }
            if (e.keyCode > 0) {
                DrawDashesWhileLoop();
                BarCollision(playerOne);
                BarCollision(playerTwo);
            }
        }
        function BarCollision(player) {
            if (player.y1 < 10) {
                console.log("AAAAAAAA");
                player.y1 = 10;
            }
            if (player.y1 > 820) {
                console.log("AAAAAAAA");
                player.y1 = 820;
            }
        }
        function BallMovement() {
          // console.log('ball moving')
            DrawBall();
            speedX = 10;
            speedY = 10;
            requestAnimationFrame(BallMovement);
        }
        function DrawBall() {
          ctx.clearRect(Ball.x1, Ball.y1, Ball.x2, Ball.y2);
          console.log()
          Ball.x1 += 2;
          ctx.save();
          ctx.fillStyle = "white";
          ctx.fillRect(Ball.x1, Ball.y1, Ball.x2, Ball.y2);
          ctx.restore();
        }

#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');
}

<!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>
        
    </script>
</body>
</html>

）

如何在画布中正确设置形状的动画？

1 个答案: