作为一名程序猿,平时的爱好也不多,说起游戏,我不太喜欢大型的网游,因为太耗时间,偶尔玩玩经典的单机小游戏,比如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. bzoj 3156 防御准备(斜率DP)

    3156: 防御准备 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 837  Solved: 395[Submit][Status][Discuss] ...

  2. 关于字符编码精简介绍 ANSI GB2312 UTF8 UNICODE

  3. kafka consumer频繁reblance

    转载请注明地址http://www.cnblogs.com/dongxiao-yang/p/5417956.html 结论与下文相同,kafka不同topic的consumer如果用的groupid名 ...

  4. 最大流加强 dinic+当前弧优化

    qyy开始练习网络流啦 , 啊 ,蒟蒻只会套版 ,很裸的题 , 我连题都不想发了 ,可以参考我的代码(虽然我也是看的别人的 #include <iostream> #include < ...

  5. c#调用钩子

    1 概述 在c++中有钩子程序,但是在C#还没有对其进行封装,所以需要自己根据实际情况调用钩子.钩子在我的理解下是,通过初始化钩子与系统中消息映射建立某种关系,当点击鼠标或者键盘,就会通过钩子中的回调 ...

  6. 使用r2d3的注意事项

    避免使用tspan 样式上display:none无效, visibility:hidden无效,只能使用fill:none或rgba(0,0,0,0) 容器不能起到绘图的层级作用,覆盖顺序由先后顺序 ...

  7. MySQL——修改root密码的4种方法(以windows为例)

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...

  8. java web项目中的web.xml标签之context-param

    WEB项目初始化过程: 在启动Web项目时,容器(比如Tomcat)会读web.xml配置文件中的两个节点<listener>和<contex-param>. 接着容器会创建一 ...

  9. 9.22 noip模拟试题

    水灾(sliker.cpp/c/pas) 1000MS  64MB 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY ...

  10. HTML5 文件域+FileReader 读取文件(二)

    一.读取文本文件内容,指定字符编码 <div class="container"> <!--文本文件验证--> <input type="f ...