Обнаружение столкновения шара с краями холста - PullRequest
Новая
       18

Обнаружение столкновения шара с краями холста

1 голос
/ 21 апреля 2019

Я следовал учебному пособию по разработке игр для Mozilla и создавал простую игру Breakout для HTML5 Canvas и JS.

Однако я хотел увеличить холст, потому что он был немного мал, поэтому я попробовал холст 800x600. Затем я заметил, что мяч был слишком медленным для этого нового размера холста.

Первоначально в учебнике Mozilla скорость мяча была 2. Я попытался использовать 3 вместо этого. И, таким образом, возникает проблема ...

Поскольку я использую requestAnimationFrame, который обновляется примерно в 60 раз в секунду, мы можем сказать, что мой шар будет двигаться со скоростью 3 x 60 = 180 пикселей в секунду.

Чтобы обнаружить столкновение с правым краем холста, я использую условие: 

if (ball.x + ball.radius >= canvas.width) {
ball.speed = -ball.speed;
// I reverse the speed, which goes from 3 to -3, so the ball bounces.
}

ПРОБЛЕМА ЕСТЬ: Если я положу шарик в исходное положение x = 2 и мой холст будет шириной 600 пикселей По мере того как шар перемещается на 3px на 3px и радиусом 10px, мяч достигнет 589 ... и только на 592 отскочит. Пока он должен отскочить на 590.

Я много чего пробовал, но, похоже, ничего не решило эту проблему.

Целью является отскок мяча в позиции 590 (хорошо: canvas.width - ball.radius) независимо от скорости или стартовой позиции.

Возможно, проблема в моей игровой петле. Я использую простой gameloop вроде этого: 

function update {
    requestAnimationFrame(update)
    Drawball();
    Moveball()
    Collision();
}
requestAnimationFrame(update);

Это неправильно делать столкновения как это ??

Спасибо за помощь, я застрял с этой проблемой с 2 ​​недель! Я предоставлю свой код 

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            position: relative;
            background-color: black;
            background-image: radial-gradient(rgba(0, 150, 0, 0.3), black 120%);
            height: 100vh;
        }

        canvas {
            background: #000;
            display: block;
            position: absolute;
            top: 20px;
            right: 20px;
            border: solid #00FA61 1px;
        }

        #debug {
            position: absolute;
            padding: 10px;
            top: 20px;
            left: 20px;
            border: solid #00FA61 1px;
            color: #00FA61;
            font-family: 'Courier', monospace;
            font-size: 18px;
            text-align: center;
        }

        #debug span {
            font-size: 2em;
            font-weight: bold;
        }

    </style>
</head>

<body>
    <div id="debug">
        <h3>Debug mode</h3>
        <p id="posX"></p>
        <p id="posY"></p>
        <p id="collision"></p>
    </div>
    <canvas id="myCanvas" width="800" height="600"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var hauteur_canvas = canvas.height;
        var largeur_canvas = canvas.width;
        var infoPosX = document.getElementById("posX");
        var infoPosY = document.getElementById("posY");
        var infoCollide = document.getElementById("collision");

        /* BALL POS X/Y  */
        var x = canvas.width / 2;
        var y = canvas.height - 40;
        /* BALL SPEED */
        var direction_x = 8;
        var direction_y = -direction_x;
        /* RAYON DE LA BOULE */
        var rayon_balle = 10;

        var timer = 0;
        var id_frame;
        var currentSeconde = 0,
            frameCount = 0,
            frameLastSecond = 0;
        var colorBall = "#00FA61";
        /* HAUTEUR ET LARGEUR DU PADDLE */
        var paddleHeight = 10;
        var paddleWidth = 75;
        /* POSITION X ET Y DU COIN GAUCHE HAUT */
        var paddleX = (largeur_canvas - paddleWidth) / 2;
        var paddleY = hauteur_canvas - paddleHeight;

        /* DISTANCES ENTRE BOULES ET PADDLE */
        var dist_center_X;
        var dist_center_Y;

        /* DETECTION DES INPUTS */
        var rightPressed = false;
        var leftPressed = false;

        /* GESTION DES BRIQUES */
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brick = {
            hauteur: 50,
            largeur: 132,
            padding: 20,
            offsettop: 30,
            offsetleft: 30
        };

        var bricks = [];

        for (var c = 0; c < brickColumnCount; c++) {
            bricks[c] = [];
            for (var r = 0; r < brickRowCount; r++) {
                bricks[c][r] = {
                    x: 0,
                    y: 0
                };
            }
        }

        /* ------------------- */

        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, rayon_balle, 0, Math.PI * 2);
            ctx.fillStyle = colorBall;
            ctx.fill();
            ctx.closePath();
        }

        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
            ctx.fillStyle = "#00FA61";
            ctx.fill();
            ctx.closePath();
        }

        function drawBricks() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var brickX = (c * (brick.largeur + brick.padding)) + brick.offsetleft;
                    var brickY = (r * (brick.hauteur + brick.padding)) + brick.offsettop;
                    bricks[c][r].x = brickX;
                    bricks[c][r].y = brickY;
                    ctx.beginPath();
                    ctx.rect(brickX, brickY, brick.largeur, brick.hauteur);
                    ctx.fillStyle = "#1aa829";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }

        function distance_boule_paddle() {
            /* CALCUL DES DISTANCES ENTRE BOULES ET PADDLE */
            dist_center_X = Math.abs(x - paddleX - paddleWidth / 2);
            dist_center_Y = Math.abs(y - paddleY - paddleHeight / 2);   
        }

        function fps_count() {
            var sec = Math.floor(Date.now() / 1000);
            if (sec != currentSeconde) {
                currentSeconde = sec;
                frameLastSecond = frameCount;
                frameCount = 1;
            } else {
                frameCount++;
            }
            ctx.fillText("FPS : " + frameLastSecond, 10, 20);
        }

        function clear() {ctx.clearRect(0, 0, largeur_canvas, hauteur_canvas);}

        function collide_paddle() {
            if (dist_center_X > (paddleWidth / 2 + rayon_balle)) {
                return false;}
            if (dist_center_Y > (paddleHeight / 2 + rayon_balle)) {
                return false;}
            if (dist_center_X <= (paddleWidth / 2)) {
                return true;}
            if (dist_center_Y <= (paddleHeight / 2)) {
                return true;}

            var dx = dist_center_X - paddleWidth / 2;
            var dy = dist_center_Y - paddleHeight / 2;
            return (dx * dx + dy * dy <= (rayon_balle * rayon_balle));
        }

        function collision() {
            /* COLLIDE AVEC LE HAUT DU CANVAS */
            if (y - rayon_balle <= 0) {
                direction_y = -direction_y;
                collideInfo();
            } else {
                if (y + rayon_balle >= hauteur_canvas - paddleHeight) {
                    if (collide_paddle()) {
                        direction_y = -direction_y;
                    } else {
                        if (y - rayon_balle > hauteur_canvas) {
                            // so if the ball is 100% off screen of the down edge its gameover
                            collideInfo();
                            alert("GAME OVER");
                            document.location.reload();
                        }
                    }
                }
            }

            /* COLLIDE WITH LEFT AND RIGHT EDGES */
            if (x + rayon_balle >= largeur_canvas) {
                direction_x = -direction_x;
                collideInfo();
            } else {
                if (x - rayon_balle <= 0) {
                    direction_x = -direction_x;
                    collideInfo();
                }
            }
        }

        function move_ball() {
            x += direction_x;
            y += direction_y;
        }

        function move_paddle() {
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }
        }
        /* EVENTS LISTENERS */
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

        function keyDownHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = true;
            } else if (e.keyCode == 37) {
                leftPressed = true;
            }
        }

        function keyUpHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = false;
            } else if (e.keyCode == 37) {
                leftPressed = false;
            }
        }

        function collideInfo() {
            infoCollide.innerHTML = "<br>La collision s'est produite <br> à la position X <span>: " + x + "</span>" + "<br> la position Y : <span>" + y + "</span>";
        }

        function gameInfo() {
            infoPosX.innerHTML = "La position X de la balle : " + x;
            infoPosY.innerHTML = "La position Y de la balle : " + y;
        }

        function draw() {
            id_frame = requestAnimationFrame(draw);
            clear();
            fps_count();

            drawBall();
            drawPaddle();
            drawBricks();

            move_ball();
            move_paddle();

            distance_boule_paddle();
            collision();
            gameInfo();

            timer++;

            if (timer === 2500) {
                console.log("STOP !");
                cancelAnimationFrame(id_frame);
            }
        }
        requestAnimationFrame(draw);

    </script>

</body>

</html>
...