JavaScript 二维碰撞异常

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;

        }
    }
}

异常情况是，当我将玩家 Sprite 移动到框的左侧或右侧时，它会在 Y 轴上向上跳跃，因为上面的逻辑检查始终为真。显然这是出乎意料的，因为如果发生跳跃， Sprite 只应与框的顶部交互。

注意:我不是在寻找一种只在盒子的侧面增加碰撞的解决方案(这很简单)。相反，我正在寻找一种解决方案，它允许以与当前工作方式相同的方式在盒子的所有侧面(包括顶部)发生碰撞，但没有 Sprite 在触摸它时突然跳到盒子顶部的异常情况。

出于演示目的，我在 JSFiddle 上复制了我的整个项目(键 a、d 和空格键):http://jsfiddle.net/h5Fun/

Answer 1

无论这是否是您想要的，它都解决了问题:

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

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

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