效果图：
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>吃鱼游戏</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
100%;
height: 100%;
overflow: hidden;
}
body {
background: url(img/bg.jpg) no-repeat;
}
#mine {
50px;
cursor: pointer;
position: absolute;
z-index: 999;
}
#mine img {
100%;
}
.yu {
66px;
height: 61px;
position: absolute;
}
.f {
position: fixed;
40%;
height: 20px;
border-radius: 20px;
z-index: 9999;
}
#deng {
top: 10px;
left: 80px;
background: #dddd;
}
#deng ::after {
display: block;
content: '等级';
position: absolute;
left: -40px;
top: -2px;
}
#time {
top: 10px;
right: 80px;
background: #dddd;
}
#time ::after {
display: block;
content: '生命';
position: absolute;
left: -40px;
top: -2px;
}
.hong {
height: 20px;
background-color: greenyellow;
0%;
border-radius: 20px;
}
.hon {
height: 20px;
background-color: red;
100%;
border-radius: 20px;
}
</style>
<body>
<div id='mine'>
<img src="img/fish.png">
</div>
<div id="deng" class="f">
<div class="hong"></div>
</div>
<div id="time" class="f">
<div class="hon"></div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
let $mine = $('#mine')
let last = 0 //存取上一次坐标
let arr = [0, $(window).width()]//鱼出生位置
let num = 0//吃掉的鱼数量
let nn = 100//生命力
let o = 40//鱼的数量
let s = 300//速度
let a = null
let b = null
let c = null
$(document).on('mousemove', (e) => {
if (e.clientX > last) { //判断鼠标移动方向
$mine.css('transform', 'rotateY(180deg)')
} else {
$mine.css('transform', 'rotateY(0deg)')
}
last = e.clientX //更新坐标
$mine.css({
left: e.clientX - $mine.width() / 2,
top: e.clientY - $mine.height() / 2
})
})
a = setInterval(() => { //创建其它鱼
if ($('.yu').length < o) {
let ini = arr[Math.floor(Math.random() * 2)]//随机出现位置
let speed = Math.ceil(Math.random() * 10) //随机速度
let div = $('<div>').html('<img src="img/fish1.png">')
.addClass('yu').appendTo('body').attr({
ini,
speed
})
div.css({
left: div.attr('ini') == 0 ? -div.width() : $(window).width(),
top: Math.floor(Math.random() * $(window).height() - div.height()),
transform: div.attr('ini') == 0 ? 'rotateY(180deg)' : ''
})
}
}, s);
b = setInterval(() => { //其它鱼移动
$('.yu').each(function () {
if ($(this).attr('ini') <= 0) {
$(this).css('left', $(this).offset().left + parseInt($(this).attr('speed')))
} else {
$(this).css('left', $(this).offset().left - $(this).attr('speed'))
}
if ($(this).offset().left > $(window).width() || $(this).offset().left < -$(this).width()) {
$(this).remove()
}
if ($mine.offset().left + $mine.width() > $(this).offset().left && $mine.offset().left < $(this).offset().left + $(this).width() && $mine.offset().top + $mine.height() > $(this).offset().top && $mine.offset().top < $(this).offset().top + $(this).height()) {//mine吃掉鱼并删除它
$(this).remove()
if(num>=100){
$mine.css('width',$mine.width()+20)
num=0
o+20
nn=100
s-=50
}
num++
nn++
$('.hong').css({
num + '%'
})
$('.hon').css({
nn + '%'
})
if(nn>100){
nn=100
}
}
})
}, 1000 / 60);
c= setInterval(() => {
if(nn==0){
$('body').html('游戏结束!!')
clearInterval(a)
clearInterval(b)
clearInterval(c)
}
nn--
$('.hon').css({
nn + '%'
})
}, s)
</script>
</html>
要复制上面代码到浏览器运行的私聊我，我把鱼和背景图分享给你们，也可以Network获取