试图在JS和Canvas中进行非常简单的碰撞

Question

我有这个游戏，我计划将其变成某种射击游戏（请注意，如果考虑到我目前所处的等级，那么这太难了）我会这样做。 m在使事物发生碰撞时，就像带有点矩形的玩家一样（应尽快制作球体）。

我看过不同的例子 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是精灵I使用的x位置（大60x60）
• y是x
的y
• rX是一个随机生成的数字和点矩形的x位置（再次认为我应该很快进入orbs）
• rY是rX的y

另外，只要问一下你是否想看到更多的代码，虽然它主要不是我的代码，但是我得到了一个未完成的游戏，我可以用它来制作。

Answer 1

给定宽度为w且高度为h的2d轴对齐矩形，其原点为x且y位于左上角，检查是否位置r和rx位于矩形中的点ry将是：

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

上述陈述暗示坐标系的左上角有原点，右下角的值增加。