web版扫雷小游戏（一）

　　作为一名程序猿，平时的爱好也不多，说起游戏，我不太喜欢大型的网游，因为太耗时间，偶尔玩玩经典的单机小游戏，比如windows下自带的游戏扫雷（秀一下，高级下最高纪录110s）。

　　现阶段正在致力于web前端，工作之余，突然想用javascript来实现一下这个小游戏，说做就做，才发现玩起来简单，做起来还是遇到蛮多困难的，这里想和大家分享一下游戏的实现过程，之前做过一年多的C++开发，对OO编程有一些理解和热爱，故实现过程借用OO的编程思想，顺便对一段时间以来偏爱的javascript模块化编程进行一个小结与反思：

开发思路：

游戏在趣味点主要在于通过雷(bomb)点周围的数字推算出雷点的位置并标记下来，直到找出所有的雷点为止，在这一过程中计算玩家用时(以秒为单位)，用时越少，分数越高。通过对windows下的扫雷游戏进行分析，游戏设计主要完成以下一系列条件：

1.　雷点要控制在一个容器内，这里称之为棋盘，棋盘的长和宽可控。

2.　雷点的位置随机，且个数可控。

3.　雷点及其周围的数字要一致，即数字N附近（以该点为中心周围8个方向上的节点）的雷点有N个。

4.　棋盘上空节点（周围没有雷点的节点）的点击事件需要响应并触发展开其周围8个方向上的空节点（此过程需要递归）。

5.　雷点推算出来后可以通过鼠标右键标记，非雷点（空节点除外）推算出来后通过点击事件显示（通过鼠标左键）其对应的数字，整个过程需要计时。

6.　非雷点确认（假设其对应的数字是N），在其周围标记了N个雷点后，鼠标左右键一起按，程序能自动显示其周围的非雷点，如果其周围8个方向上有空节点，则需要递归展开。

7.　触发（点击）雷点即结束游戏，计时器计时超过最大时长（999秒）仍为完成全部雷点的标记，游戏也会结束。

基本上需要注意的就这些，接下来就是设计开发了。

分析设计：

从OO的编程角度分析，我们需要找到这个游戏过程中存在的实体对象：

1.　很显然需要一个棋盘，给所有的雷点和非雷点提供一个容器，并且这个容器可以进行定制，故需要定义这样一个容器类，标记为BombObjectList，由于棋盘可定制，所以棋盘类对象需要提供长宽、雷点　　 个数等属性。

2.　整个游戏都是围绕着雷点进行，我们需要对雷点这个实体及其在游戏中的功能属性抽象出一个类，标记为BombObject，由于雷点位置随机，所以雷点类对象需要记录雷点在棋盘中的位置以及其周围8个方位节点的位置。

3.　底层的数据结构基本差不多了，由于我们是通过web来实现，需要一个表现层并且包含所有的界面操作，这个表现层用图片来解决，故需要定义一个图片对象类，标记为BombImgObject，图片对象类是整个有些的表现层，需要提供玩家所有的操作接口。

4.　上述三个实体类之前的关系，棋盘类（BombObjectList）包含一个雷点类（BombObject）对象列表，每个雷点对象有一个与其一一对应的图片类（BombImgObject）对象。

5.　游戏在进行过程中，需要一个总的外部控制实体对游戏的状态进行监听和控制，这里我们抽象出一个游戏控制类，标记为PlayBombGame，此类的作用是对游戏内部的实现细节进行封装，对游戏过程产生的数据进行统计和分析，对游戏的状态进行监听和反馈。

　　游戏中三个主要对象类的关系图如下（粗略）：

 

 

　　游戏初步效果图（正在完善中）：

　　

~~~实现过程接下篇，能力有限，望各位技术大牛多多指正，同时也希望对想了解的人有些帮助~~~~~

转载于:https://www.cnblogs.com/freshfish/p/3381289.html