Question

我正在尝试使用JavaScript中的HTML5 canvas脚本，并且遇到2D碰撞检测问题。我基本上是根据我放在屏幕上的盒子的坐标来检查“玩家”的坐标，但是发生了奇怪的结果。我知道为什么会这样，但我不知道如何解决这个问题。

我的一些代码：

function Arc()
{
    // Coordinates.
    this.x = 540 / 2;
    this.y = 0;

    // Radius
    this.r = 50;

    // Gravity / velicoty.
    this.g = 3;
    this.vy = 15;

    // Bounce.
    this.b = -0;

    this.speed = 20;
    this.max_speed = 20;

    this.friction = 0.03444;
}

Arc.prototype.collision = function()
{
    for(var i = 0; i < game.sprites.length; i++)
    {
        if
        (
            // If the right side of the player is greater than the left side of the object.
            this.x + this.r > game.sprites[i].x &&

            // If the bottom of the player is greater than (meaning lower than) the top of the object.
            this.y + this.r > game.sprites[i].y &&

            // If the left side of the player is greater than the right side of the object.
            this.x - this.r < game.sprites[i].x + game.sprites[i].w &&

            // if the top of the player is greater than (meaning lower than) the bottom of the object.
            this.y - this.r < game.sprites[i].y + game.sprites[i].h
        )
        {
            this.y = game.sprites[i].y - this.r;
            this.vy *= this.b;

        }
    }
}

异常是当我将玩家精灵移动到框的左侧或右侧时，它会在Y轴上向上跳跃，因为上面的逻辑检查始终为真。显然这是意料之外的，因为如果发生了跳转，精灵应该只与盒子的顶部相互作用。

注意：我不正在寻找一种只在盒子两侧添加碰撞的解决方案（这非常简单）。相反，我正在寻找允许在盒子的所有侧面（包括顶部）以与当前工作方式相同的方式发生碰撞的解决方案，但没有异常情况，精灵突然在触摸它时跳到盒子的顶部。 / p>

为了演示的目的，我在JSFiddle上复制了我的整个项目（键a，d和空格键）：http://jsfiddle.net/h5Fun/

Answer 1

这是否是你想要的，它解决了这个问题：

this.x = game.sprites[i].x + 150;
this.vx *= this.b;

问题是您在碰撞时设置了错误的组件。如果您希望圆圈在到达矩形时停止，而不是在它上面，请使用x，而不是y。

150是矩形的大小。这意味着它将停在精灵的右侧。由于修改了速度（this.vx），弹跳已经存在。

JavaScript 2D碰撞异常

1 个答案: