我使用 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){}
最佳答案
保留一个单独的游戏状态对象,其中包含所有对象的 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
)`
(从我的头顶开始)。
如果计算出的鼠标点击位置符合该条件,则可以认为是点击。
关于javascript - 检查我的目标光标是否与我的游戏 "enemy"组件重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56563352/