javascript - 检查我的目标光标是否与我的游戏 "enemy"组件重叠

Question

我使用 JavaScript Canvas 创建了一个小游戏。这是一款 2D 射击游戏， Controller 是鼠标，敌人在 Canvas 内随机生成。

我正在尝试让 JavaScript 检测我的光标是否覆盖了我的“敌人”组件例如。逻辑语句是

点击时，如果瞄准光标与敌人重叠敌人会在随机位置生成。

我唯一的问题是如何检查我的目标光标是否与敌人重叠

我现在使用的 If 语句是我从网站上学到的，但它似乎不起作用。

document.addEventListener("mousedown", function(){
    var gunshot = new Audio('gunshot.mp3');
    gunshot.play();
    if(aimcursor.x >= enemy.x && enemy.y  >= aimcursor.y&&
     enemy.y <= aimcursor.y && enemy.y <= aimcursor.y){}

Answer 1

保留一个单独的游戏状态对象，其中包含所有对象的 x/y 位置。每次在 Canvas 上绘图时，都会使用这些坐标。您可能已经在这样做了。所以可以说enemy.x和enemy.y目前在范围内可用。

接下来要做的是获取光标的 x/y 位置。您可以通过检查 MouseEvent 来获取此信息mousedown提供的实例回调。

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

MouseEvent实例包含 clientX和clientY特性。这些将反射(reflect)基于客户区域而不是 Canvas 的光标坐标，因此我们需要首先对其进行转换。请看这个答案:

How do I get the coordinates of a mouse click on a canvas element?

一旦你真正获得了坐标。您需要检查鼠标的 x/y 坐标是否在敌人坐标周围的某个边界内。这是因为现代屏幕具有高分辨率，并且很可能没有人能够精确地单击屏幕上正确的 1 像素区域。

可接受作为有效输入的边界称为“边界框”，通常是正方形或矩形，其大小与用于表示敌人的图像相同。如果敌人是放置在其 x/y 坐标中心的 50x50 像素图像。边界框将从 x - 25px、y - 25px 开始，并将拉伸(stretch)到 x + 25px、y + 25px。

您需要考虑边界框并验证用户是否在该区域内单击。这可能看起来有点像。

if(mouse.x >= enemy.x - 25 && mouse.x <= enemy.x + 25 && mouse.y >= enemy.y - 25 && mouse.y <= enemy.y + 25 )`

(从我的头顶开始)。

如果计算出的鼠标点击位置符合该条件，则可以认为是点击。