使用JavaScript和HTML5画布进行碰撞检测

Question

我在2D游戏中遇到碰撞检测问题。对象的顶部和左侧碰撞很好，但在对象的底部和右侧没有按预期工作。我该如何解决？

的使用Javascript：

this.isPlayerCollideWith = function(object) {

    if (this.posX < objekt.posX + object.width && this.posX + this.width  > object.posX &&
        this.posY < object.posY + object.height && this.posY + this.height > object.posY) {

        //up
        if(this.posY < objekt.posY + object.height){
            this.posY -= this.speed;
        }
        //down
        if(this.posY + this.height > object.posY){
            this.posY += this.speed;
        }

        //left
        if(this.posX < object.posX + object.width){
            this.posX -= this.speed;
        }

        //right
        if(this.posX + this.width > object.posX){
            this.posX += this.speed;
        }

    }
};

我的所有代码都在HTML5画布上运行。

Answer 1

您有错字：objekt应为object。

您的碰撞逻辑也可能（也可能不会）关闭。这是工作代码：

if(!(
    this.x             > object.x+object.width  ||
    this.x+this.width  < object.x           ||
    this.y             > object.y+object.height ||
    this.y+this.height < object.y
)){ ... }