JS实现扫雷

一个近期学习JavaScript的小项目~

• 项目github地址
• 扫雷试玩

效果图

大体思路

扫雷基本

• 地雷：用随机数随机生成
• 数字：在地雷生成之后，数在当前格子周围的地雷数生成
• 雷数和地图大小：
  • 初级：10个雷，9*9
  • 中级：40个雷，16*16
  • 高级：99个雷，16*30

文件组织

• images文件夹存放图片
  • 本项目使用的图片来源：阿里巴巴矢量图库
• index.html做展示出来的页面
• index.css做页面的样式
• index.js做页面的逻辑代码

用于展示地图的标签

• 使用<table></table>展示地图
• table中的行/列（行<tr></tr>列<td></td>）使用JS动态生成、改变

基本逻辑

• 单击左键
  在未打开的区域点开数字：如果是数字0，则需递归到炸弹或数字的边界处打开
• 单击右键
  • 在未打开的区域插旗
  • 在插旗的区域放问号
  • 在问号的区域恢复未打开状态
• 左右键同时按下
  • 高亮当前所指方格周围的8个格子中，还未打开的区域
• 左右键同时抬起
  • 高亮恢复
  • 若当前所指为打开的数字，且周围的雷数已被满足，递归打开数字部分，基本逻辑同单击左键打开的逻辑

总结

• 本项目的实现逻辑很简单（仅涉及递归），但能明白JS涉及的一些鼠标操作、文件的组织。
• 当把网页部署到服务器上使用nginx代理时，发现操作瞬间顺滑了许多，比github page上更流畅…