作为一名程序猿,平时的爱好也不多,说起游戏,我不太喜欢大型的网游,因为太耗时间,偶尔玩玩经典的单机小游戏,比如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,此类的作用是对游戏内部的实现细节进行封装,对游戏过程产生的数据进行统计和分析,对游戏的状态进行监听和反馈。

  游戏中三个主要对象类的关系图如下(粗略):

  游戏初步效果图(正在完善中):

  

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

web版扫雷小游戏(一)的更多相关文章

  1. web版扫雷小游戏(四)

    ~~~接上篇,游戏的主体框架完成了,接下来我们对游戏中存在的两个主要实体进行分析,一个是雷点类BombObject(节点对象),一个是节点对象对应的图片对象BombImgObject,根据第一篇的介绍 ...

  2. web版扫雷小游戏(三)

    ~~~接上篇,上篇介绍了游戏实现过程中第一个比较繁琐的地方,现在展现在玩家面前的是一个有血有肉的棋盘,从某种意义上说玩家已经可以开始游戏了,但是不够人性化,玩家只能一个一个节点的点开,然后判断,然后标 ...

  3. web版扫雷小游戏(二)

    接上篇~~第一次写这种技术博客,发现把自己做的东西介绍出来还是一件脑力活,不是那么轻松啊,好吧,想到哪写到哪,流水记录之,待完成之后再根据大家的意见进行修改吧. 游戏实现 根据对扫雷游戏的体验和分析, ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. 用Kotlin破解Android版微信小游戏-跳一跳

    前言 微信又更新了,从更新日志上来看,似乎只是一次不痛不痒的小更新.不过,很快就有人发现,原来微信这次搞了个大动作——在小程序里加入了小游戏.今天也是朋友圈被刷爆的缘故. 看到网上 有人弄了一个破解版 ...

  6. Angular4 扫雷小游戏

    扫雷小游戏,可以升级过关,难度随关卡增加.但是有很明显的bug,以后有时间会继续优化! HTML: <div class="mainContent"> <div ...

  7. 扫雷小游戏PyQt5开发【附源代码】

    也没啥可介绍哒,扫雷大家都玩过. 雷的分布算法也很简单,就是在雷地图(map:二维数组)中,随机放雷,然后这个雷的8个方位(上下左右.四个对角)的数字(非雷的标记.加一后不为雷的标记)都加一. 如何判 ...

  8. C++扫雷小游戏(基于CMD命令行)

    这个小游戏是笔者在大一C语言课程设计的时候写的,基于命令行,为了显得漂亮一些,特别加上了彩色特效~~~ 注意:Win10系统须将命令行调为旧版命令行,否则有可能会显示乱码! 代码示例: #includ ...

  9. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

随机推荐

  1. MIPI D-PHY 总结

    Operating Modes: Control, High-Speed, and Escape 1.The Lane is only in High-Speed mode during Data b ...

  2. Codeforces Round #100(140~~)

    140 A. New Year Table 题目大意:有一个大圆桌子,半径是R, 然后有n个半径是r的盘子,现在需要把这些盘子摆放在桌子上,并且只能摆放在桌子边缘,但是不能超出桌子的范围....问能放 ...

  3. jsp的include两种使用方法区别

    指令include是将被包含页面中的代码复制粘贴到主页面中,最后编译形成主页面的类文件(一个). 指令include中file属性的值必须是项目中已存在的文件,否则主页面报异常. 指令include如 ...

  4. python_list和tuple互转

    Python中,tuple和list均为内置类型, 以list作为参数将tuple类初始化,将返回tuple类型 tuple([1,2,3,4]) list->tuple 以tuple做为参数, ...

  5. head first-----decorate design pattern

    浅谈设计模式之------装饰者模式     首先给出装饰者模式的定义吧:              动态的将责任附加到对象上,若是要扩展功能,装饰者提供了比继承更加具有弹性的替代方案.     其中 ...

  6. 【Linux常用工具】1.1 diff命令的三种格式

    diff是用来比较两个文本文件的差异的工具,它有三种格式,下面用实例介绍一下: 准备三个测试文件1.txt 2.txt 3.txt bixiaopeng@bixiaopengtekiMacBook-P ...

  7. 免费WiFi,仅仅为好久没联系的你们

    昨日,认识五年的朋友搬来与我一起住了,说不上来,没有激动,仅仅是突然感觉生活又多了一点生机.兴致上来,晚上立马联系了已经近四个月没有联系的好友,才知道他们的生活也因这几个月发生了翻天覆地的变化.究竟什 ...

  8. Qt 学习之路:QML 组件

    前面我们简单介绍了几种 QML 的基本元素.QML 可以由这些基本元素组合成一个复杂的元素,方便以后我们的重用.这种组合元素就被称为组件.组件就是一种可重用的元素.QML 提供了很多方法来创建组件.不 ...

  9. 我开启httpd服务的时候 显示Could not reliably determine the server`s fully qualified domain name,

    vi /etc/httpd/conf/httpd.conf加入一句 ServerName localhost:80

  10. [转] git修改author

    Changing author info To change the name and/or email address recorded in existing commits, you must ...