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('最高分')) {//判断本地储存是否有最高分，如果有就显示，没有就显示0spans[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');//获取所有的Tdtime = 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;}