球与画布边缘的碰撞检测答案

【问题标题】：Collision detection of a ball with the canvas edges球与画布边缘的碰撞检测
【发布时间】：2019-09-10 19:04:00
【问题描述】：

我正在学习 Mozilla 游戏开发教程，并使用 HTML5 Canvas 和 JS 制作了一个简单的 Breakout 游戏。

但是，我想放大画布，因为它有点小，所以我尝试了 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 x 3px 和 10px 半径时，球将到达 589 ......并且只有在 592 时才会反弹。虽然它应该在 590 处反弹。

我尝试了很多东西，但似乎没有任何东西可以解决这个问题。

目标是球在 590 位置弹跳（以及 canvas.width - ball.radius），无论速度或起始位置如何。

问题可能出在我的游戏循环中。我正在使用这样的简单游戏循环：

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>

【问题讨论】：

标签： javascript html5-canvas collision-detection

【解决方案1】：

首先我认为你不应该这样做

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

由于 requestAnimationFrame(update);已经在它自己的函数中了。

试着改成这个

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

【讨论】：