Question

我使用JavaScript画布创建了一个小游戏。这是一个2D射击游戏，控制器是鼠标，敌人在画布中随机生成。

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

onclick，如果瞄准目标与敌人重叠敌人在随机位置产生。

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

我现在正在使用的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位置。每次在画布上绘制时，都使用这些坐标。您可能已经在这样做了。因此，可以说enemy.x和enemy.y当前在范围内可用。

下一步是获取光标的x / y位置。您可以通过检查MouseEvent回调提供的mousedown实例来获得此功能。

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

MouseEvent实例包含clientX和clientY属性。这些将根据客户区域而不是画布反映te光标的坐标，因此我们需要先进行转换。请查看以下答案：

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

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

可接受作为有效输入的边界称为“边界框”，通常是正方形或矩形，其大小与用来表示敌人的图像的大小相同。如果敌人是放置在其x / y坐标中心的50x50像素图像。边框将从x-25px，y-25px开始，并延伸到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）`

（从我的头顶开始）。

如果计算得出的单击时鼠标位置与该条件相匹配，则可以认为是命中。

检查我的目标光标是否与我的游戏“敌人”组件重叠

1 个答案: