Как правильно анимировать фигуры на холсте? - PullRequest
Новая
       5

Как правильно анимировать фигуры на холсте?

0 голосов
/ 06 июля 2018

Я пытаюсь воссоздать очень-очень старую аркадную игру под названием Понг (проверьте гиперссылку, пожалуйста)

Я создал все, кроме шара, но когда я пытаюсь нарисовать / оживить его, возникает какое-то странное поведение:

ПРИМЕЧАНИЕ: ПРОСМОТРИТЕ ИГРУ В РЕЖИМЕ ПОЛНОГО ЭКРАНА!
Вот мой код: 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 кадров" при загрузке страницы)

1 Ответ

0 голосов
/ 06 июля 2018

Это может помочь вам выбрать правильный путь: https://codepen.io/anon/pen/BVgKOL/

По сути, вы фактически не меняете значения шара. Вы заметите, что в DrawBall (который должен быть верблюжьим), я добавил метод clearRect, а также 2 к значению x1 шара, заставляя его двигаться вправо. Я не рассчитывал для вашей конкретной скорости 10 пикселей на 60 кадров, поэтому, пожалуйста, извините, но это всего лишь математика с вашей стороны. Вы могли бы изменять координаты шара в его собственных методах, поскольку вы, очевидно, захотите сделать это по-разному в зависимости от столкновений и т. Д. Кроме того, вам придется перерисовывать среднюю пунктирную линию, когда мяч проходит, так как 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>

)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...