炸彈人遊戲開發系列（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）：初步設計