jQuery实现吃鱼游戏

效果图：
完整代码
<!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获取