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、注意点：为了防止在游戏过程我们点击一次按钮就执行一次计时器，这样会导致熟读越来越快