炸弹人游戏开发系列（1）：准备工做 炸弹人游戏开发系列（6）：实现碰撞检测，设置移动步长 炸弹人游戏开发系列（2）：初步设计

前言

你们好！本系列博文记录了炸弹人游戏迭代开发的过程。在开发的过程当中，代码会不断重构，领域模型会不断演变，高层划分也会不断变化。

博文重点在于记录面向对象思想运用、重构、迭代开发的过程，对于游戏的实现细节和原理不会深刻讨论。

若是您对RPG游戏的基本概念不熟悉，我推荐您能够先看看HTML5研究小组第二期技术讲座《手把手制做HTML5游戏》，它讲解了Html5超级玛丽游戏开发的过程，提出了一些基本概念（如精灵、主循环等）。另外您能够学习它的代码HTML5超级玛丽小游戏源代码，您能够看到它是如何一步一步实现游戏的。

但愿能与你们一块儿分享游戏开发的过程和乐趣，为你们运用oo思想和实践迭代开发提供力所能及的帮助。

关键词

面向对象、测试驱动开发、重构、迭代、领域模型、炸弹人游戏

系列博文目录

• 炸弹人游戏开发系列（1）：准备工做
• 炸弹人游戏开发系列（2）：初步设计
• 炸弹人游戏开发系列（3）：显示地图
• 炸弹人游戏开发系列（4）：炸弹人显示与移动
• 炸弹人游戏开发系列（5）：控制炸弹人移动，引入状态模式
• 炸弹人游戏开发系列（6）：实现碰撞检测，设置移动步长
• 炸弹人游戏开发系列（7）：加入敌人，使用A*算法寻路
• 炸弹人游戏开发系列（8）：放炸弹
• 炸弹人游戏开发系列（9）：总结

最终成果

下面是完成整个游戏开发后的成果，你们能够先预览一下。

代码下载

游戏截图（已测试经过的浏览器：chrome、ff）

演示地址

 

概念层次结构

画布层级

游戏中包含了包含了多个画布，其中地图画布、炸弹画布、火焰画布分别对应地图层、炸弹层、火焰层，玩家画布和敌人画布对应人物层。下面是各个层的层叠顺序，地图层显示在最下面，人物层显示在最上面：

 

 

具体概念请见第2篇博文的“分层渲染”。

最终的领域模型

查看大图

最终的高层划分

　　层、包

　　对应的领域模型

• 辅助操做层
  • 控件包
    PreLoadImg
  • 配置包
    Config
• 用户交互层
  • 入口包
    Main
• 业务逻辑层
  • 辅助逻辑
    • 工厂包
      BitmapFactory、LayerFactory、SpriteFactory
    • 事件管理包
      KeyState、KeyEventManager
    • 抽象包
      Layer、Sprite、Hash、Collection
    • 全局包
      GameState
  • 游戏主逻辑
    • 主逻辑包
      Game
  • 层管理
    • 层管理包
      LayerManager
  • 实现
    • 人物实现包
      PlayerLayer、MoveSprite、PlayerSprite、EnemySprite、CharacterLayer、PlayerLayer、EnemyLayer、Context、PlayerState、WalkState、StandState、WalkState_X、WalkState_Y、StandLeftState、StandRightState、StandUpState、StandDownState、WalkLeftState、WalkRightState、WalkUpState、WalkDownState
    • 炸弹实现包
      BombSprite、FireSprite、BombLayer、FireLayer
    • 地图实现包
      MapLayer、MapElementSprite
    • 算法包
      FindPath
    • 动画包
      Animation、GetSpriteData、SpriteData、GetFrames、FrameData
    • 观察者模式包
      Subject
• 数据操做层
  • 地图数据操做包
    MapDataOperate、TerrainDataOperate
  • 路径数据操做包
    GetPath
  • 图片数据操做包
    Bitmap
• 数据层
  • 地图包
    MapData、TerrainData
  • 图片路径包
    ImgPathData

前期准备

如今，就让咱们一块儿踏上游戏开发的旅程。首先来看看在炸弹人游戏开发中须要的知识和参考的资源。

须要的知识

必备知识

• Html+css
  掌握html经常使用的标签，掌握经常使用的css属性，掌握div布局、定位等知识。可以使用html和css来设计和显示页面。
• Javascript
  熟悉Javascript基本语法、原型、闭包、做用域链等知识。
• Html5 Canvas
  了解画布原理，掌握经常使用的API，掌握Canvas优化。

进阶知识

• 面向对象思想
  熟悉oo思想，可以运用oo来分析、设计、编程。
• 设计模式
  了解23种设计模式。
• 领域驱动
  了解模型驱动开发（DDD）的思想。
• 敏捷开发
  了解敏捷开发流程。
• 测试驱动开发
  熟悉测试驱动开发流程。

相关资源

游戏开发

• 使用Javascript和Canvas开发游戏
• 彻底分享，共同进步——我开发的第一款HTML5游戏《驴子跳》
• html5游戏开发-零基础开发RPG游戏
• Cson的博客
• HTML5研究小组第二期技术讲座《手把手制做HTML5游戏》
• Andriod游戏开发

Canvas

• Canvas API（pdf文件）
• HTML5 canvas 基础入门教程

初步需求分析

下面来进行初步的需求分析。首先进行高层的需求分析；而后根据分析结果，输出用例、功能需求、非功能需求和约束条件。

肯定高层需求

业务目标

1. 学习RPG游戏领域的概念和技术。
2. 学习运用面向对象思想来设计。
3. 实践测试驱动开发。
4. 学习模型驱动设计。
5. 实践设计模式。　

范围

• 人工智能

如敌人使用A*算法寻路。

• 页面绘制

如显示地图、人物，实现人物移动动画。

• 事件绑定

玩家经过操做键盘来控制炸弹人的行为，所以游戏须要监听判断键盘事件。

• 炸弹

炸弹人可以放置炸弹，炸弹可以爆炸并炸死敌人和炸弹人。

Feature　　

1. 具备良好可扩展性，方便进行二次开发。
2. 学习RPG领域的概念（如精灵、层、帧的概念），提炼出相应的领域模型。
3. 可以显示动画。
4. 敌人可以追踪炸弹人。
5. 炸弹人可以放炸弹，来炸毁砖墙或炸死敌人。
6. 游戏规模应该控制为小规模，保持足够的简单性。由于开发该游戏主要是用来学习而不是用于商用。

上下文

系统、玩家

 

游戏角色

• 炸弹人

炸弹人能够放炸弹。该角色由玩家控制。

• 敌人

敌人会追踪炸弹人。该角色由系统控制。

高层需求分析的输出结果

用例

功能需求

• 预加载

玩家进入游戏后，预先加载游戏使用的图片到内存中。

• 显示地图

地图大小为20 * 20。

地图由墙和空地组成。

墙能够被炸开。

炸弹人、敌人不能穿过墙、炸弹。

炸弹人、敌人不能走出地图边界。

• 显示人物

在地图上显示炸弹人和敌人。

• 人物移动

炸弹人和敌人能够在地图上移动，并以动画显示。

• 敌人追踪炸弹人

使用A*算法寻找从敌人所在位置到炸弹人所在位置的路径，并按照路径移动。

若是遇到炸弹人，则游戏结束；若是走到终点时没有遇到炸弹人，则再次寻找路径，而后按照路径移动。

• 炸弹

炸弹人移动时也能放炸弹

不能在一个方格叠加多个炸弹

炸弹能够爆炸，显示火焰

玩家、敌人不能穿过炸弹

炸弹能够炸掉墙

炸弹能够炸死玩家、敌人

可放置多个炸弹（3个），炸弹爆炸时会引爆在火力范围内的炸弹

• 控制炸弹人

玩家能够经过W、A、S、D键控制炸弹人的移动方向，一共有上下左右四个方向。

玩家可使用空格键控制炸弹人放置炸弹

非功能需求

　　质量

　　　　开发期质量

• 良好的易理解性

经过记录日志、SVN提交日志、测试文档以及注释和相关的总结文档，开发人员能够理解游戏的架构设计（参照总结文档、代码）及实现（参照日志、测试文档、代码）。

• 良好的可扩展性

如须要增长一个敌人时，只须要增长相应代码便可；须要增长一类敌人，只须要增长一个敌人子类及相应的客户端代码便可。不用修改已有的代码，符合开闭原则。

• 良好的可重用性

即在游戏中提炼出具备通用性的模块，供之后复用。

• 良好的可测试性

采用TDD开发，保证低耦合高内聚，加强可测试性。

　　　　运行期质量

无，由于开发炸弹人游戏仅为了我的学习，所以对性能等运行期质量没有要求。

约束

• 开发人员没有RPG游戏领域经验

采用迭代开发的方法，逐步细化。

本文参考资料

《软件架构设计》

欢迎浏览下一篇博文：炸弹人游戏开发系列（2）：初步设计