JavaScript 中阶 打地鼠游戏（基础版）

思路

1、先搭建整体布局样式
2、由于打地鼠游戏需要用到格子类型，所以会设计到表格table的使用
3、为了便于后面操作，需要把游戏中会用到的图片进行类名的命名，后面js部分就可以挂类来更改不同的表达效果
4、先获取游戏中会需要到的元素
5、渲染最高分数，通过本地储存的方法localStorage.getItem()，先获取本地数据，进行判断，如右数据，那最高分的元素就直接渲染这个数据，如果没有，分数则为0
6、设置鼠标在游戏中的变化效果，onmouseover移入，onmousedown按下和onmouseup松开，分别是三种不同的状态，具体根据需求来更改就可以了
7、封装渲染表格的函数，可自定义表格的行和列，利用双重for循环，外面循环成成行，里面循环生成列，注意一点，当每一行的列生成完成后，也就是里层循环完成后，需要拼接上当前行的结束标记，最后通过innerHTML渲染进之前我们html设定好的表格里
8、在封装函数需要记住的几点：每次渲染相当于游戏重新开始，那就需要在设定为当前分数归0开始，然后游戏结束提示也要清空
9、游戏开始，一般来讲都需要有一个按钮，当点击按钮后，游戏开始，所以在点击后需要调用前面封装的渲染函数。
10、通过计时器实现老鼠和炸弹几率在表格上跳动
11、需要获取到所有格子的一个数组类型，然后通过随机数得到某一个数字，范围就是0-格子的长度，通过遍历所有的格子，把类名全部清空，然后将得到随机格子添加之前Css设定的相应图片就可以了
12、下一步实现炸弹的出现几率，可以自定义设置一个范围内的随机数，用一个变量去与随机数中的某一个进行相等比较，如果相等了，在通过随机数得到某一个数字，范围就是0-格子的长度，通过遍历所有的格子，把类名全部清空，然后将得到随机格子添加之前Css设定的相应图片就可以了，和老鼠跳动同理
12、下一步就是打地鼠了，进行表格的点击事件，通过判断点击的格子的类型是否相同进行加分和游戏结束的判断，如果点击的是出现的老鼠，那就直接把击打后的老鼠样式直接更改类名实现，然后申明一个变量作为分数，每次++，并实时渲染到当前得分数
13、如果击打的炸弹，同理直接更改相应的类型实现效果，并渲染提示游戏结束
14、最后获取本地中的最高分，进行判断，如果获取到了值，就用当前分数和获取的分数进行比较，然后把分值大的在渲染到页面上，并储存进本地
15、如果没有获取到本地的数据，就直接把当前分值作为最高分渲染并储存，然后结束定时器
16、注意点：为了防止在游戏过程我们点击一次按钮就执行一次计时器，这样会导致熟读越来越快，所以在每次点击按钮是，都需要清除到上一次的计时器，然后重新开始
17、为了防止游戏结束后，如页面上还有老鼠，点击依然加分的情况，需要同一个变量来判断，起始值为true，在游戏结束时变为false，在每次点击时都需要进行判断，如果为true才能开始继续点击，并执行相应变化，否则无变化。

HTML部分

<div id="box">
        <!-- 开始按钮 -->
        <div><input type="button" value="开始游戏" id="btn"></div>
        <!-- 分数 -->
        <div class="fraction">
            <p>分数:</p><span>0</span>
            <p class="higt">历史最高分:</p><span>0</span>
        </div>
        <!-- 游戏 -->
        <table>
            <tbody></tbody>
        </table>
        <!-- 结束 -->
        <h1></h1>
    </div>

CSS部分

  body {
            background-color: rgba(178, 243, 140, 0.555);
        }

        #box {
            margin: 50px auto;
            width: 450px;
            height: 550px;
            text-align: center;
        }

        /* 表格样式 */
        table {
            border: 1px solid;
            border-collapse: collapse;
            margin-left: 20px;
        }

        /* 单元格样式 */
        td {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }

        /* 分数样式 */
        .fraction {
            width: 400px;
            height: 50px;
            display: flex;
            margin-left: 40px;
        }

        /* 最高分样式 */
        .higt {
            margin-left: 200px;
        }

        /* 分数样式 */
        span {
            margin-top: 16px;
            margin-left: 16px;
        }

        /* 开始按钮样式 */
        #btn {
            width: 200px;
            height: 50px;
            background-color: rgb(101, 247, 198);
            border-radius: 10px;
            border: 0;
        }

        /* 老鼠图片 */
        .mouse {
            background: url("./img/05.png");
            background-size: 100%;
        }

        /* 死老鼠图片 */
        .die {
            background: url("./img/07.png");
            background-size: 100%;
        }

        /* 炸弹图片 */
        .bomb {
            background: url("./img/02.png");
            background-size: 100%;
        }

        /* 爆炸图片 */
        .blast {
            background: url("./img/01.png");
            background-size: 100%;
        }

JS部分

  const tbody = document.querySelector('tbody');//获取表格
        const spans = document.querySelectorAll('span');//获取span，统计分数
        const h1 = document.querySelector('h1');//游戏结束提示
        let time;//计时器
        let scort = 0;//得分
        let falg = true;//让游戏结束不可以点击
        //渲染分数
        if (localStorage.getItem('最高分')) {//判断本地储存是否有最高分，如果有就显示，没有就显示0
            spans[1].innerText = localStorage.getItem('最高分');
        } else {
            spans[1].innerText = 0;
        }
        //鼠标移入
        tbody.onmouseover = function () {
            this.style.cursor = 'url(./img/04.png),auto'
        }
        //鼠标按下 
        tbody.onmousedown = function () {
            this.style.cursor = 'url(./img/03.png),auto'
        }
        //鼠标松开
        tbody.onmouseup = function () {
            this.style.cursor = 'url(./img/04.png),auto'
        }
        //渲染表格
        function render() {
            // 组成棋盘
            let str = '';
            for (let i = 0; i < 4; i++) {
                str += '<tr>';
                for (let j = 0; j < 4; j++) {
                    str += '<td></td>';
                }
                str += '</tr>';
            }
            tbody.innerHTML = str;
            // 所有内容归零
            scort = 0;
            spans[0].innerText = 0;
            h1.innerText = ``;
        }
        /* 点击开始按钮 */
        btn.addEventListener('click', function () {
            clearInterval(time);//点击一次就清除上一次的计时器
            render();//渲染表格  点击一次渲染一次，并清空上一次的内容
            let tds = document.querySelectorAll('td');//获取所有的Td
            time = setInterval(() => {
                let mi = random(tds.length - 1); // 随机一个下标给 td 出现老鼠,范围是td的个数
                let bi = random(1, 6);//在随机获取一个下标 出现炸弹
                for (let item of tds) {//清除每一次图片出现之前的上一次的图片
                    item.className = '';
                }
                tds[mi].className = 'mouse';//给随机的一个出现老鼠
                if (bi == 5) { // 当随机下标为5就生成炸弹
                    let boi = random(tds.length - 1); // 随机一个下标给 td 出现炸弹
                    tds[boi].className = 'bomb';
                }
            }, 1000);
        })
        /* 点击打地鼠 */
        tbody.addEventListener('click', function (event) {
            if (falg) {//当状态为true才能点击
                if (event.target.className == 'mouse') { // 老鼠
                    event.target.className = 'die';
                    scort++;
                    spans[0].innerText = scort;
                }
                if (event.target.className == 'bomb') { // 炸弹
                    event.target.className = 'blast';// 显示为爆炸样式
                    h1.innerText = `游戏结束!`;
                    let str = localStorage.getItem('最高分');//获取最高分
                    falg = false;//点击炸弹后把状态改为false，防止再次点击老鼠加分
                    if (str) {//判断是否有最高分
                        if (scort > str) {//最高分和当前分比较
                            spans[1].innerText = scort;
                            localStorage.setItem('最高分', scort);
                        }
                    } else {
                        spans[1].innerText = scort;
                        localStorage.setItem('最高分', scort);
                    }
                    clearInterval(time);
                }
            }
        })
        // 随机数
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random() * (max - min + 1)) + min;
            return number;
        }