作为一名程序猿,平时的爱好也不多,说起游戏,我不太喜欢大型的网游,因为太耗时间,偶尔玩玩经典的单机小游戏,比如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. Difference Between Primes

    Problem Description All you know Goldbach conjecture.That is to say, Every even integer greater than ...

  2. 通过例子学python(2.2)

    2.2 通用序列操作 #2.2 通用序列操作 #所有序列类型都可以进行的操作:索引indexing,分片sliceing,加adding,乘multiplying,成员资格, #计算序列长度,找出最大 ...

  3. Java中如何使用Redis做缓存

    基本功能测试 1.程序基本结构 2.主要类 1)功能类 package com.redis; import java.util.ArrayList; import java.util.Iterator ...

  4. 基于Tomcat7、Java、WebSocket的服务器推送聊天室

    http://blog.csdn.net/leecho571/article/details/9707497 http://blog.fens.me/java-websocket-intro/ jav ...

  5. android生成验证码bitmap

    不多说了,直接上代码,项目中用到的,未做优化,还有很多参数未设置. [java] view plaincopy 1.import java.util.Random; 2. 3.import andro ...

  6. exit与return区别

    1. exit用于结束正在运行的整个程序,它将参数返回给OS,把控制权交给操作系统:而return 是退出当前函数,返回函数值,把控制权交给调用函数.2. exit是系统调用级别,它表示一个进程的结束 ...

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

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

  8. SA密钥长度、明文长度和密文长度

    本文介绍RSA加解密中必须考虑到的密钥长度.明文长度和密文长度问题,对第一次接触RSA的开发人员来说,RSA算是比较复杂的算法,RSA的复杂度是因为数学家把效率和安全也考虑进去的缘故. 本文先只谈密钥 ...

  9. Objective-C:KVO

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...

  10. 单元测试--------Assert

      名称 说明 AreEqual(Object, Object) 验证指定的两个对象是否相等. 如果两个对象不相等,则断言失败. AreEqual(Double, Double, Double) 验证 ...