基于JS的扫雷游戏设计与实现(3)

菜单

（1）智能代码补全，不仅包含HTML提示，还包含自定义函数和各主流库

（2）代码折叠，会使代码看起来更整洁。

（3）代码格式化，而且规则可自定义。

（4）联想查询功能，方便开发者查询到所需函数或变量。

（5）代码自动检查和修复，可以快速定位到需要修复的地方。

（6）支持代码调试，界面简洁明了，对使用者非常方便。

当然，WebStrom也有其弊端，比如占内存过大，操作方式难以习惯等。但总的来说还是非常棒的一款开发工具。

3.游戏需求分析

3.1功能需求分析

该游戏需提供三种不同的难度，初级难度网格数为9*9，默认雷数为10个，中级难度网格数为16*16，默认雷数为40个，高级难度网格数为30*16，默认雷数为99个，玩家可根据自己喜好自定义雷数。同时需显示剩余雷数，游戏玩法为找出地图上的所有雷就会有弹窗提示游戏成功通过，如玩家点到地雷即弹出弹窗提示游戏失败，操作方法为玩家点击鼠标左键该网格显示周围剩余雷数，当玩家确定某个网格是雷的时候，可点击鼠标右键进行标记，当玩家不确定某网格是不是雷时，可点击右键两次将该网格标记为问号的样式。

3.1.1游戏设计目标

根据功能需求分析的阐述，该游戏编码过程中需达到以下目标。

（1）游戏难度的设置和游戏是否重新开始的按钮点击事件。

（2）游戏背景网格地图的制作。

（3）实现雷在背景网格中的随机分布。

（4）实现好游戏的逻辑判断，实现鼠标的点击事件。

（5）实现游戏胜利和失败的条件判断，并进行提示和开始新游戏。

3.2游戏总体分析

根据扫雷游戏的总体结构特征，可以将该游戏分为页面布局、逻辑判断、难度设置、计时管理、按钮事件，其中各个部分及其具体功能模块如图1所示。

游戏功能分析图

按游戏的显示划分，可将该扫雷游戏分为文字部分，文本框，按钮和主游戏区，其中文字部分分为主标题“JS扫雷游戏”和提示性文字“支持右键标记，支持选择游戏级别”，文本框输入包含雷数设置和剩余雷数显示，按钮包含设置等级难度的单选按钮和重新开始按钮，主游戏区就是游戏网格的划分，雷的随机分布，鼠标的点击事件等。

4.扫雷游戏实现

游戏开发过程中最重要的就是逻辑分析这一块，包括雷的随机分布，扫雷时间的计算，雷区的分布及网格周围雷数的计算，这就要求游戏开发者拥有好的逻辑思维能力来协调实现游戏中的各个功能模块，毕竟对于开发者来说对总体有清晰的思路才会让你的开发过程事半功倍，所以游戏中详细设计这一块就显得尤为重要，就像只有规划师设计出详细的楼房建筑规格让建筑工人按规格实施一样，才能出现好的设计样式。本章节将详细介绍扫雷游戏过程中的设计与实现。

4.1随机布雷与扫雷计时

4.1.1 雷的随机分布

为使游戏更有趣，雷的随机分布肯定是必不可少的环节，这里使用了Math.random()方法,返回一个0～1之间的数，然后横竖坐标分别乘网格数，使用for循环即可实现一定数量的雷的随机分布。到游戏里写一个function函数即可实现时时调用在不同的网格地图中实现随机分布雷。

4.1.2 扫雷时间的计算

统计玩家通关时间也是游戏趣的一种，在index.html中添加代码“计时<span id="timeCount">0</span>秒  “通过ID选择器开始计时和结束计时，然后通过document.getElementById("timeCount")方法获取时间添加到显示窗口，当然，在开始游戏的时候开始计时，游戏成功或失败都要结束计时，当进行游戏难度的选择时相当于重置游戏，要通过innerHTML方法将时间归零。