检测圆圈内的图像 - HTML5 Canvas Game

Question

我正在使用画布元素开发 HTML5 游戏。

我正在画一个像这样的圆圈（用户可以移动这个圆圈）：

ctx.arc(chomperX,chomperY,chomperRadius,0,Math.PI*2);

我在画布上放置炸弹图像，如下所示：

ctx.drawImage(bombImg,bombX,bombY,15,15);

目标是让用户将“chomper”圆圈移动到炸弹图像上并吃掉它。我的问题是，我怎样才能检测到炸弹在圆圈内？我试图通过计算从圆圈到炸弹图像的距离来做到这一点，但我得到的结果好坏参半。这就是我获得距离的方法。

bx = bombX - chomperX;
by = bombY - chomperY;
bombDistance = Math.floor(Math.sqrt(bx * bx + by * by))
if (bombDistance < bombRadius + chomperRadius) { console.log("THE BOMB IS IN THE CIRCLE!"); }

Answer 1

假设bombRadius小于chomperRadius，

bx = bombX - chomperX;
by = bombY - chomperY;
bombDistance = Math.sqrt(bx * bx + by * by);
if (bombDistance < chomperRadius - bombRadius) { console.log("THE BOMB IS IN THE CIRCLE!"); }