作为一名程序猿,平时的爱好也不多,说起游戏,我不太喜欢大型的网游,因为太耗时间,偶尔玩玩经典的单机小游戏,比如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. 关于android 自己实现 back键 home键

    今天在被问到一个问题的时候突然想要看看这些东西了.因为一直以来,我返回上个界面,和大家普遍的方法都是一样的. 1. finish()本页面. 2. intent 跳转到上个页面. 一 ,在 按下手机上 ...

  2. list的三种遍历方法

    1.最简单的for循环遍历 for(int i = 0; i < list.size(); i++){        list.get(i);        } 2.最方便的foreach循环遍 ...

  3. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  4. Ehcache简单说明及使用

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache是一种广泛使用的开源Java分布式缓存.主要面向通用缓存 ...

  5. wind安装selenium

    1.按win+r进入运行模式,然后输入cmd进入命令行 2.输入pip按回车 查看命令帮助 3.然后输入pip install selenium 按回车,然后等待 下载,下载好了会自动安装完成 3.然 ...

  6. Mybatis 打开连接池和关闭连接池性能对比

    1  创建数据库表 -- phpMyAdmin SQL Dump -- version 4.2.11 -- http://www.phpmyadmin.net -- -- Host: localhos ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支 系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元( ...

  8. [RxJS] Filtering operator: filter

    This lesson introduces filter: an operator that allows us to let only certain events pass, while ign ...

  9. 安全通信 QSslSocket

    The QSslSocket class provides an SSL encrypted socket for both clients and servers. More... Header: ...

  10. Java的演变过程

    1. 1996.01.23 JDK1.0 代号Oak:212个类.8个包: 2. 1997.02.19 JDK1.1 504个类.23个包: Java Bean.远程方法调用(RMI).JAR文件格式 ...