<!DOCTYPE html>
<html>

    <head>
        <meta charset=”utf-8″>
        <title>打地鼠界面</title>
        <style type=”text/css”>
            .textAglin {
                text-align: center;
            }

            .maindiv {
                width: 510px;
                height: 520px;
                border: 1px solid black;
                margin: 0px auto;
                overflow: hidden;
            }

            .maindiv td {
                line-height: 3em;
                width: 97px;
                height: 97px;
                border: 1px solid white;
                margin: 0px auto;
                float: left;
                background: url(“00.jpg”);
            }

            .mediumdiv {
                width: 248px;
                height: 130px;
                border: 1px solid black;
                margin: 10px auto;
                text-align: center;
                padding: 10px;
                font-family: “楷体”;
                font-size: 15px;
                line-height: 1.4em;
                background-color: lightgray;
            }

            .mediumdiv input {
                font-family: “楷体”;
                font-size: 15px;
            }

            img {
                width: 97px;
                height: 97px;
            }

            .level {
                height: 25px;
            }
        </style>

    </head>

    <body onload=”myInit()” class=”textAglin”>
        <div id=”main” class=”maindiv”>
            <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class=”mediumdiv”>
            <span>击中30或漏击30或满是地鼠 结束</span>
            <br />
            <span> 计分：<span id=”showSource”></span>分 </span>
            <br />
            <span>漏击：<span id=’miss’></span>只</span>
            <br />
            <span> 计时：<span id=”showTime”></span>秒 </span>
            <br />
            <span>难度：N<span id=’setLevel’></span></span>
            <br />
            <input id=”myStartBtn” type=”button” id=”start” value=”开始” onclick=”startGame()” />
            <input type=”button” id=”level” value=”切换难度” onclick=”myLevel()” />

            <input type=”button” id=”over” value=”结束” onclick=”myOver()” />
        </div>

    </body>
    <script>
        let mylevel = document.getElementById(‘level’)
        let myStartBtn = document.getElementById(‘myStartBtn’)
        let showTime = document.getElementById(‘showTime’)
        let showSource = document.getElementById(‘showSource’)
        let mouses = document.getElementsByTagName(‘td’);
        let misss = document.getElementById(‘miss’);
        let levels = document.getElementById(‘setLevel’);
        let showMousId; //出现老鼠的定时器
        let times; //倒计时定时器
        let difficulty; //出现时间
        let disappear; //消失时间
        let source; //得分
        let miss; //漏击
        let mole; //随机数
        let time; //倒计时
        let level = 1; //难度等级
        levels.innerHTML = level;

        //初始化游戏
        function myInit() { //准备工作 准备好图片对象 并且先统一隐藏起来 如果需要冒地鼠 找到对应的图片 控制显示就可以
            difficulty = 1200;
            disappear = 800;
            time = 0;
            showTime.innerHTML = time;
            miss = 0;
            misss.innerHTML = miss;
            source = 0
            showSource.innerHTML = source
            mylevel.disabled = false
            myStartBtn.disabled = false
        }

        //点击开始按钮 触发定时冒地鼠
        function startGame() {
            myShowMouse()
            mouseHit()
            let time = 60;
            times = setInterval(function() {
                //禁用开始游戏和切换难度按钮
                mylevel.disabled = true
                myStartBtn.disabled = true
                time–;
                showTime.innerHTML = time;
                //剩余时间小于0游戏结束，并初始化游戏
                if (time <= 0) {
                    clearInterval(times)
                    clearInterval(showMousId)
                    myInit()
                    alert(‘游戏结束！’)
                }
            }, 1000)
        }

        //单次触发地鼠显示  显示之后需要自动隐藏(通过setTimeout)
        function myShowMouse() {
            showMousId = setInterval(function() {
                //老鼠随机出现的位置，范围在0-多少个老鼠位
                mole = Number.parseInt(Math.random() * mouses.length)
                mouses[mole].innerHTML = ‘<img src=”01.jpg”/>’
                //定时器控制老鼠消失的时间和操作
                setTimeout(function() {
                    mouses[mole].innerHTML = ”
                }, disappear)
            }, difficulty);
        }

        //打地鼠
        function mouseHit() {
            for (let i = 0; i < mouses.length; i++) {
                //鼠标单击时触发事件
                mouses[i].onclick = function() {
                    // 当前对象的子节点的长度不为0时，触发老鼠被击中的操作，得分增加，否则得分减少，漏击增加
                    if (this.children.length != 0) {
                        setTimeout(function() {
                            mouses[i].innerHTML = ‘<img src=”02.jpg”>’
                            setTimeout(function() {
                                mouses[i].innerHTML = ”
                            }, 300)
                        }, 300)
                        source++
                    } else {
                        source–
                        miss++
                    }
                    //判断得分，漏击情况
                    if (miss > 30) {
                        clearInterval(times)
                        clearInterval(showMousId)
                        myInit();
                        alert(‘游戏结束！漏击大于30！！’)
                    } else if (source > 30) {
                        clearInterval(times)
                        clearInterval(showMousId)
                        myInit()
                        alert(‘恭喜通关！当前得分大于为：’ + source)
                    } else if (source < -30) {
                        clearInterval(times)
                        clearInterval(showMousId)
                        myInit();
                        alert(‘游戏结束！当前分数小于30分：’)
                    }
                    showSource.innerHTML = source
                    misss.innerHTML = miss
                }
            }
        }
        //切换难度 当前难度为1时单击切换为难度2，再次单击切换为难度1
        function myLevel() {
            if (level == 1) {
                level = 2;
                levels.innerHTML = level;
                difficulty = 500;
                disappear = 400;
            } else if (level == 2) {
                level = 1;
                levels.innerHTML = level;
                myInit();
            }
        }
        //点击结束按钮 ，游戏结束
        function myOver() {
            clearInterval(times)
            clearInterval(showMousId)
            myInit()
            alert(‘游戏结束！’)
        }
    </script>
</html>

原文地址：http://www.cnblogs.com/qin99/p/16795793.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性