![c5b0069c927f376526077d5301087090.png](https://i-blog.csdnimg.cn/blog_migrate/5a45c8af708328530dae49556144e0eb.jpeg)
游戏规则
- 扫雷板是10 x 10平方格。我们可以制作其他尺寸,如经典的Windows版本,但出于演示目的,我们将坚持游戏的较小的“初学者”版本。
- 该板具有预定数量的随机放置的地雷。玩家无法看到他们。
- 雷可以以两种状态之一存在:打开或关闭。单击一个单元格将打开它。如果一个矿山潜伏在那里,游戏就以失败告终。如果小区中没有地雷,但其一个或多个相邻小区中有地雷,则打开的小区显示相邻的地雷数。当没有任何小区的邻居被挖掘时,这些小区中的每一个都被自动打开。
- 右键单击一个单元格会用标记标记它。国旗表明玩家知道那里潜伏着一个雷。
- 单击打开的单元格时按住Ctrl按钮有一些稍微复杂的规则。如果单元周围的标志数与其邻居的矿数相匹配,并且每个标记的单元实际上包含矿,那么所有关闭的,未标记的相邻单元将自动打开。但是,即使其中一个标志被放置在错误的单元格上,游戏也会失败。
- 如果玩家打开没有地雷的所有单元格,则玩家赢得游戏。
数据结构
![fd81ddbcb934f931fcc9c55d526ca85d.png](https://i-blog.csdnimg.cn/blog_migrate/df8a674668db93a82992ce29044c7d5c.jpeg)
- id:包含行和列的字符串。这个唯一标识符可以在需要时更快地找到单元格。如果你密切注意,你会注意到我有一些与id有关的快捷方式。由于电路板尺寸小,我可以摆脱这些快捷方式,但这些技术无法扩展到更大的电路板。看看你是否能发现它们。如果你这样做,请在评论中指出它们!
- row:表示单元格内单元格水平位置的整数。
- column:一个整数,表示电路板内单元的垂直位置。
- opened:这是一个布尔属性,指示单元格是否已打开。
- flagged:另一个布尔属性,指示是否已在该单元格上放置一个标志。
- mined:另一个布尔属性,指示单元格是否已被挖掘。
- neighborMineCount:一个整数,指示包含矿的相邻单元的数量。
面板
![b5ae5098276584d4a7fc41f3704520e8.png](https://i-blog.csdnimg.cn/blog_migrate/22f2cbfa383dbf7263d41eefa4fd77aa.jpeg)
算法
设置地雷分配
随机地雷地雷
![f6b54ecfdefb658d59709ee9d9358314.png](https://i-blog.csdnimg.cn/blog_migrate/9388063443330510b5d9734192daad44.jpeg)
在玩扫雷游戏之前我们必须做的第一件事就是将地雷分配给细胞。为此,我创建了一个函数,将板和所需的矿计数作为参数。
对于我们放置的每个矿井,我们必须生成随机的行和列。此外,相同的行和列组合永远不会出现多次。否则我们最终会得到的数量少于我们想要的地雷数量。如果出现重复,我们必须重复随机数生成。
当生成每个随机单元坐标时,我们将我们的板中相应单元的mined属性设置为true。
我创建了一个辅助函数,以帮助完成在我们所需范围内生成随机数的任务。见下文
![26c123f6dd347c2df4b2125a315dbb84.png](https://i-blog.csdnimg.cn/blog_migrate/f894e070f8425209fcd0bb2871495f93.jpeg)
计算邻居矿井数量
![443016ca1c4c8d35c835f9f99c06c7bd.png](https://i-blog.csdnimg.cn/blog_migrate/443d238cd55b98119ff2f17f54515fb2.jpeg)
打开一个单元格
![20e020aad030dd22bc10bab36322643a.png](https://i-blog.csdnimg.cn/blog_migrate/266602245fee67972feb3201fe419a9d.jpeg)
标记一个单元格
![c0e8170bfe50fe207d8c450c6066cd47.png](https://i-blog.csdnimg.cn/blog_migrate/8fc7dc5d1df4026241fa4b60d7941a6c.jpeg)
打开相邻单元格
![8fbe039744fc2103e79ffeaec1db2f0b.png](https://i-blog.csdnimg.cn/blog_migrate/db80d9ec7f74ecc2eb2f3a38ea775cab.jpeg)
我们已经介绍了打开单元格并用标记标记它们的动作,所以让我们谈谈玩家可以采取的最后一个动作:打开已经打开的单元格的相邻单元格。该handleCtrlClick函数包含逻辑此。此播放器可以通过按住ctrl并左键单击包含相邻地雷的打开的单元格来执行此操作。
检查这些条件后我们要做的第一件事就是建立一个相邻标记单元格的列表。如果标记的单元格的数量与周围的地雷的实际数量匹配,那么我们可以继续。否则,我们什么也不做,退出该功能。
如果我们能够继续下去,我们接下来要做的就是检查任何标记的单元格是否包含矿井。如果这是真的,我们知道玩家错误地预测了矿井位置,并且点击所有未标记的相邻小区将以损失结束。我们需要设置本地丢失变量并调用丢失函数。我们在文章前面讨论了 损失函数。
如果玩家没有丢失,那么我们将需要打开未标记的相邻小区。我们只需要遍历它们并在每个上调用handleClick函数。但是,我们必须首先将ctrlIsPressed变量设置为false,以防止错误地落入handleCtrlClick函数。
开始一场新游戏
![eda441d94f8f42467bb67a8ee76c3418.png](https://i-blog.csdnimg.cn/blog_migrate/e90b02aa9c3a1620d465d587543ce726.jpeg)
在线体验JS版扫雷
由于头条审核网址比较严,防止他们误会是推广,所以大家可以自行搜索体验
也可以关注我后给我发送 `JS版扫雷`,会自动把在线体验地址发送给你(做了关键字自动回复)
您知道哪些好的JS实现小游戏,欢迎评论分享,共同探讨学习
如果觉得文章能够对您有所帮助,可以关注我,你的支持会鼓励我不断分享更多更好的优质文章。