jQuery小游戏——打地鼠

一、前言

  • 你就玩吧,一玩一个不吱声
  • 素材在文章里,不想要带水印的话可以评论留言找我拿原图。
  • 远古作品,不足之处,欢迎交流
  • 需要引入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>
相关推荐
开开心心就好31 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享32 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js