Javascript游戏中圆形和矩形之间的碰撞检测？

Question

我正在创建一个 javascript 游戏，我需要在球和矩形之间发生碰撞以触发游戏重置。现在我只是有一个警报用于测试目的。我无法让碰撞检测正常工作。

这是我到目前为止所得到的，但它不起作用

            function startGame() {
            keeper = new obstacle(40, 20, "#666", 130, 180);
            theBall = new component("#000", 80, 10);
            myGameArea.start();
        }

        var myGameArea = {
            canvas : document.createElement("canvas"),
            start : function() {
                this.canvas.width = 300;
                this.canvas.height = 250;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.interval = setInterval(updateGameArea, 20);
                window.addEventListener('keydown', function(e) {
                    myGameArea.key = e.keyCode;
                })
                window.addEventListener('keyup', function(e) {
                    myGameArea.key = false;
                })
            },
            clear : function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }
        }

        function component(color, x, y, type) {

            this.type = type;
            this.speed = 1.5;
            this.angle = 0;
            this.x = x;
            this.y = y;
            this.update = function() {
                ctx = myGameArea.context;
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.angle);
                ctx.beginPath();
                ctx.arc(this.x, this.y, 10, 0, 2 * Math.PI);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.restore();
            }
            this.newPos = function() {
                this.x -= this.speed * Math.sin(this.angle);
                this.y += this.speed * Math.cos(this.angle);
            }
        }

        function obstacle(width, height, color, x, y) {
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;
            this.x = x;
            this.y = y;
            this.update = function() {
                ctx = myGameArea.context;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            this.newPos = function() {
                this.x += this.speedX;
                this.y += this.speedY;
            }
        this.collideWith = function(theBall){
        var collide = true;
        var myTop =this.y;
        var theBallBottom = theBall.y + (theBall.radius)
        if (myTop < theBallBottom)
        {
        collide = false;
        }
        return collide;
        }
        }

        function updateGameArea() {
        if (keeper.crashWith(theBall)) {
                alert("Collision");
            } else {
                myGameArea.clear();
                theBall.newPos();
                theBall.update();
        keeper.speedX = 0;
        keeper.speedY = 0;
            if (myGameArea.key && myGameArea.key == 37) {keeper.speedX = -1; }
            if (myGameArea.key && myGameArea.key == 39) {keeper.speedX = 1; }
        keeper.newPos();
        keeper.update();
        }
        }

游戏可以在这里找到http://alexhollingsworth.co.uk/game.php

Answer 1

您将方法命名为 collideWith，但在更新方法中将其称为 crashWith。另外，这只会检测 y 轴上的碰撞，但我认为这是有意的。

Answer 2

我做了一个 if 语句，可以检测 JavaScript 中的冲突，这里是：

if circle x < rect x + circle width && circle x + rect width > rect x && circle y < rect y + circle height && rect height + circle y > rect y {

这是通过将球放入“假想盒子”中来实现的，然后检测“假想盒子”的任何边缘是否与矩形的任何边缘接触。我希望这会有所帮助。