javascript中以一定速度跟随鼠标光标的图像

我正在做一个项目，使我自己的网站。我正在做一个游戏，让鲨鱼尽可能多地抓鱼。这是我的html和css代码：

（请全页运行）

html{
宽度：100%；
身高：100%；
}
身体{
填充：0px；
保证金：自动；
宽度：100%；
身高：80%；
背景：url（“bubbles.jpg”）；
背景位置：绝对位置；
}
#主要{
宽度：100%；
身高：100%；
}
.头衔{
位置：静态；
最高：30%；
宽度：自动；
文本对齐：居中；
背景：透明；
背景色：透明；
背景图像：透明；
}
#钮扣{
边界：无；
填充：4px9px；
颜色：白色；
背景色：#555555；
字体大小：100%；
}
.settings{
文本对齐：左对齐；
字体大小：150%；
}
#音频{
字体大小：16px；
}
#数量{
字体大小：16px；
}
#抓住{
背景色：白色；
填充：2px；
边框：1px纯黑；
宽度：100px；
颜色：白色；
字号：18px；
颜色：黑色；
}
#时间{
背景色：白色；
填充：2px；
边框：1px纯黑；
宽度：100px；
颜色：白色；
字号：18px；
颜色：黑色；
}
#高分{
背景色：白色；
填充：2px；
边框：1px纯黑；
宽度：100px；
字号：18px；
颜色：黑色；
}
输入{
宽度：80%；
背景颜色：浅灰色；
}
导航{
身高：125%；
宽度：160px；
边界：2px；
右边框：2倍纯黑；
背景颜色：灰色；
颜色：白色；
字号:14 ;；
左：0px；
左侧填充：4px；
浮动：左；
}
#鲨鱼时代{
宽度：170px；
高度：125px；
位置：绝对位置；
最高：81%；
左：86%
}
#鱼1{
位置：绝对位置；
最高：12%；
左：15%；
}
#鱼2{
位置：绝对位置；
最高：12%；
左：20%；
}
#鱼3{
位置：绝对位置；
最高：12%；
左：25%；
}
#鱼4{
位置：绝对位置；
最高：18%；
左：20%；
}
#鱼5{
位置：绝对位置；
最高：18%；
左：25%；
}
.鱼{
宽度：80px；
高度：60px；
}
页脚{
位置：绝对位置；
左：0%；
最高：97%；
左侧填充：2px；
颜色：白色；
}

抓住鱼！
抓住鱼！
开始


音频
在…上
关



鱼的数量
10条鱼
15条鱼
20条鱼
25条鱼



渔获量
游戏未开始

时间
60

高分

未完成
C.G.Nijhuis

您可以使图像跟随鼠标指针

div{
宽度：500px；
高度：300px；
边框：1px纯黑；
}
img{
位置：绝对位置；
}

函数moveImg（事件）{
var x=event.clientX；
var y=event.clientY；
var shark=document.getElementById（“shark”）；
shark.style.left=x+'px'；
shark.style.top=y+'px'；
}

您甚至不需要JavaScript！您可以使用CSS更改光标本身

div.class-name {
  cursor: url(images/my-cursor.png), auto;
}

我从来没有想过我会这么说，但是，如果你想，你可以使用Gimp创建一个光标的图像，下面有另一个图像，然后使用CSS将光标更改为该图像

更新：如下：

然后使用以下css：

div.class-name {
  cursor: url(images/cat-mouse.png), auto;
}

---

试图寻找解决方案？请看一看：