一、前言

你就玩吧，一玩一个不吱声
素材在文章里，不想要带水印的话可以评论留言找我拿原图。
远古作品，不足之处，欢迎交流
需要引入jquery库，可以自行搜索一下
二、素材

三、代码注释详解

xml 复制代码
<!DOCTYPE html>
<html lang="en">

![bg.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b59f40e7ddd8485eac420e4061ebbc27~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=498&h=321&s=58821&e=jpg&b=9be451)
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.css"> -->
    <script src="../JS/jquery.js"></script>
    <!-- <script src="../bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> -->
    <style>
        * {
            margin: 0;
            padding: 0;
            cursor: pointer;
        }

        .box {
            width: 500px;
            height: 800px;
            position: relative;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
        }

        ul {
            width: 500px;
            height: 500px;
            background: url(../imgs/bg.jpg);
            background-size: 100% 100%;
            position: relative;
        }

        li {
            width: 60px;
            height: 60px;
            list-style: none;
            position: absolute;
            background: url(../imgs/hamster.png);
            background-size: 100% 100%;
            display: none;
        }

        li:nth-child(1) {
            top: 193px;
            left: 129px;
        }

        li:nth-child(2) {
            top: 193px;
            left: 306px;
        }

        li:nth-child(3) {
            top: 285px;
            left: 40px;
        }

        li:nth-child(4) {
            top: 285px;
            left: 219px;
        }

        li:nth-child(5) {
            top: 285px;
            left: 404px;
        }

        li:nth-child(6) {
            top: 389px;
            left: 129px;
        }

        li:nth-child(7) {
            top: 389px;
            left: 306px;
        }

        .startBth {
            display: block;
            width: 200px;
            height: 50px;
            background-color: pink;
            border-radius: 20px;
            border: 0;
            background: url(../imgs/bg.jpg);
            letter-spacing: 5px;
            color: teal;
            font-weight: 900;
            margin: 30px auto;
            padding: 10px 0;
            outline: none;
        }

        .active {
            display: block;
        }

        .integral {
            padding: 10px 0;
            font-size: 30px;
            letter-spacing: 5px;
            color: chartreuse;
        }

        .clearance {
            width: 300px;
            height: 300px;
            margin: 20px auto;
            position: absolute;
            left: 50%;
            top: 150px;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.29);
            font-size: 40px;
            color: aqua;
            text-align: center;

        }

        .clearance .exit {
            margin-top: 100px;
            width: 75px;
            height: 40px;
            border-radius: 20px;
            border: 0;
            color: crimson;
        }
        .clearance .continue{
            margin: 100px 0 0 20px;
            width: 75px;
            height: 40px;
            border-radius: 20px;
            border: 0;
            color: #0078d4;
        }
        .clearance {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="integral">当前积分: <span>0</span></div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button class="startBth">开始打地鼠</button>
        <div class="clearance">
            <p>恭喜! 你通关了!</p>
            <button class="exit">退出</button>
            <button class="continue">再来一次</button>
        </div>
    </div>
</body>
<script>
    var timer
    // 随机数字
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // 随机添加并移除同级高亮类名
    function fn() {
        timer = setInterval(function () {
            // 随机0到li的长度
            var randomNum = getRandom(0, $('li').length - 1)
            // 某个li添加类名，同级全部移除类名
            $('li').eq(randomNum).addClass('active').siblings().removeClass("active")
        }, 500)
    }
    // 开始游戏
    $('.startBth').click(function () {
        if (timer) {
            timer = null
            fn()
        }
        fn()
    })
    var txt
    // 点击地鼠
    $('li').click(function () {
        // 如果当前有高亮类名
        if ($(this).prop('class') == 'active') {
            // 给积分赋值
            txt = $('.integral span').text()
            // 累加赋值
            var b = Number(txt) + 100
            $('.integral span').text(b)
            // 如果等于900，显示操作框
            if (txt == 900) {
                $(".clearance").show()
            }
        }
    })
    // 再来一次
    $(".continue").click(function () {
        // 积分重置
        $('.integral span').text(0)
        // 清除定时器
        clearInterval(timer)
        // 隐藏操作模块
        $(".clearance").hide()
        // 移除所有高亮
        $('li').removeClass("active")

    })
    // 嗯，这里先这样
    $(".exit").click(function () {
        alert("谢谢,再见")
    })
</script>

</html>
jQuery小游戏——打地鼠

一、前言

二、素材

三、代码注释详解
