javascript - 尝试在 JS 和 Canvas 中进行非常简单的碰撞

Question

我有这个游戏，我计划将其制作成某种射击游戏(考虑到我目前的水平，还请说明这是否太难)，并且我正处于让事情发生碰撞的时刻，比如具有点矩形的玩家(应该很快就会制作球体)。

我看过不同的例子，比如 Collision Detection with javascript on the html canvas element without using jquery和 http://jlongster.com/Making-Sprite-based-Games-with-Canvas但似乎我对代码的理解不够好。这是我所拥有的:

if( (rX + (rX + 20)) >= x && rX <= (x + 20) && (rY + (rY + 20)) >= y && rY <= (y + 20)){
    poeng++; 
    genererRandom();
}

没用，所以尝试了这个:

if (x >= rX || (rX+19) < (x+49) ||
    y >= rY || (rY+19) < (y+49)) {
    poeng++;
    genererRandom();
}

• x 是我正在使用的 Sprite 的 x 位置(大小为 60x60)
• y 是 x 的 y
• rX 是一个随机生成的数字和点矩形的 x 位置(再次，我认为我应该尽快将其变成球体)
• rY 是 rX 的 y

另外，如果你想看更多代码，尽管它大部分不是我的，但我得到了一个未完成的游戏，我可以用它来制作一些东西。

Answer 1

给定一个宽度=w和高度=h的二维轴对齐矩形，其原点为x和y 位于左上角，检查位置 rx 和 ry 的点 r 是否位于矩形内将是:

if (rx >= x && rx <= x+w && ry >= y && ry <= ry+h)
{
    // we're inside the rectangle!
}

简单来说，这意味着:

• 检查点的 x 是否位于矩形的 x 和 x+w 之间
• 检查点的 y 是否位于矩形的 y 和 y+h 之间

在数学中你可以这样写(但在 JS 中不起作用):

x <= rX <= x+w     ∧     y <= rY <= y+h

上面的陈述意味着坐标系的原点位于左上角，并且值向右下角增加。