如何在javascript中增加鼠标指针区域？

我用鼠标指针制作了“虫子杀手”游戏，我用光标上的瓶子图像喷洒虫子， 但问题是，当瓶子上的虫子用onclick杀死时，喷雾并不能杀死虫子。 有人能告诉我怎么解决这个问题吗？ 如何在javascript中增加鼠标指针区域

这是喷洒动画的代码：

 <script type="text/javascript">

// for Spray Animation

function clickEffect(e){

    var d=document.createElement("div");
    d.className="clickEffect";
    d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
    document.body.appendChild(d);
    d.addEventListener('animationend',function(){d.parentElement.removeChild(a);}.bind(this));}

    document.addEventListener('click',clickEffect);

</script>

//用于喷洒动画
功能点击效果（e）{
var d=document.createElement（“div”）；
d、 className=“clickEffect”；
d、 style.top=e.clientY+“px”；d.style.left=e.clientX+“px”；
文件.正文.附件（d）；
d、 addEventListener（'animationend'，function（）{d.parentElement.removeChild（a）；}.bind（this））；}
document.addEventListener（“单击”，单击效果）；

您不能“增加”鼠标指针。 您需要做的是实现基本的碰撞检测。 我们不能告诉你怎么做，因为有很多关于这方面的书，但是如果我想要一个超级简单的碰撞检测，下面是我要经历的步骤

1） 注册单击事件并存储鼠标位置

2） 扩展鼠标坐标以覆盖更大的曲面（例如leftLimit=mouseposition x-10）

---

3） 循环浏览你所有的bug或者任何你需要点击的东西。计算它们在屏幕上占据的空间和位置。如果bug的限制在鼠标点击的范围内，请销毁它

你能告诉我怎么做吗？因为这需要时间，而且我没有更多的时间来使用它，你能在这件事上帮助我吗，我将非常感谢你抱歉，写一个完整的教程，涵盖你的情况将需要大约一个小时，这真的不是stackoverflow的目的。有很多教程可以帮助你掌握一些东西。我注册了点击事件并存储了鼠标位置，现在告诉我如何扩展鼠标坐标？给我一些代码来设置这个。请不要真的“扩展鼠标”。假设在坐标x:50，y:30处单击。你要做的是存储50-10、50+10、30-10和30+10。现在，您必须通过检查每个项目的坐标和宽度/高度来检查它们是否发生碰撞。您可以计算它们是否与要检查的区域重叠，如果是这种情况，可以删除它们。我存储了鼠标坐标：function printMousePos（event）{var Mouseposition=“X:”+（event.clientX-10）+“-Y:”+（event.clientY+10）；document.getElementById（'pos'）.innerHTML=Mouseposition；}document.addEventListener（“单击”，printMousePos）；