作为一名程序猿,平时的爱好也不多,说起游戏,我不太喜欢大型的网游,因为太耗时间,偶尔玩玩经典的单机小游戏,比如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. nginx简单双机热备:backup参数的使用

    nginx简单双机热备:backup参数的使用 nginx简单双机热备:backup参数的使用

  2. C# 调试

    1.监视窗口

  3. win7不能在同一窗口打开文件夹,解决办法

    1.由于IE浏览器的主页被劫持,总是忽然弹出搜狗的主页,有的时候,忽然弹出IE浏览器(主页是搜狗),然后又自行关闭,我X,我的电脑竟然不受我控制,这可得了,这里我又要骂宁美国度了,made,组装机装了 ...

  4. Dubbo xml配置 和注解配置 写法

    <?xml version="1.0" encoding="UTF-8"?><!-- - Copyright 1999-2011 Alibab ...

  5. Matrix的set,pre,post调用顺序

    Matrix调用一系列set,pre,post方法时,可视为将这些方法插入到一个队列.当然,按照队列中从头至尾的顺序调用执行.其中pre表示在队头插入一个方法,post表示在队尾插入一个方法.而set ...

  6. 兼容性记录-class属性

    getAttribute获得class属性时,IE6,IE7的传參是className,IE7+和现代游览器都是class 全部游览器DOMElement均有的className属性,其在IE各版本号 ...

  7. SDL 实现透明悬浮窗

    最近一直想用SDL实现弹幕功能,但是一直没法实现悬浮窗和透明背景功能. 在一个老外的博客上发现了思路:EthioProgrammer: Applying transparency using win3 ...

  8. windows 环境下mysql 如何修改root密码

    windows 环境下mysql 如何修改root密码 以windows为例: 无法开启服务,将mysql更目录下的data文件夹清空,然后调用 mysqld --initialize 开启mysql ...

  9. asp.net mvc 实现记忆返回的功能

    大体思路是在当前跳转链接追加一个参数memoryguid,以guid为key把查询query保存在cookie里,跳转的时候带走这个guid,回来的时候还带着,这样我们就能根据这个guid从cooki ...

  10. React组件的生命周期各环节运作流程

    'use strict'; React.createClass({ //1.创建阶段 getDefaultProps:function(){ //在创建类的时候被调用 console.log('get ...