青瓷引擎之純JavaScript打造HTML5遊戲第二彈——《跳躍的方塊》Part 1

繼上一次介紹了《神奇的六邊形》的完整遊戲開發流程後（可點擊這裏查看），此次將爲你們介紹另一款魔性遊戲《跳躍的方塊》的完整開發流程。

          （點擊圖片可進入遊戲體驗）

因內容太多，爲方便你們閱讀，將分紅多個部分來說解。

本文爲第一部分，主要包括：

1. 功能分析

2. 建立工程與場景

若要一次性查看全部文檔，也可點擊這裏。

 

一. 功能分析

根據遊戲設定，解析出遊戲的主體功能，須要使用的算法，須要持久化的數據，而後制訂代碼結構。如圖所示：

主要功能點

1. 社交功能，好比：微信登陸與分享，排行榜。
2. 無盡關卡模式。
3. 效果表現，好比死亡時屏幕震動等。

代碼構成

將代碼分爲三大類：數據處理，界面控制，遊戲控制。

• 建立工程和場景
• 遊戲世界
• 數據處理
• 界面控制

 二. 建立工程與場景

考慮到遊戲中的邏輯和界面比較簡單，使用的資源比較少，故而將全部的界面都置於一個場景中，避免場景切換帶來的消耗。 先建立工程JumpingBrick和空的主場景Main，由於遊戲大量的使用白色做爲背景，爲了減小繪製消耗，直接設置遊戲背景色爲白色。設置以下：

 

遊戲入口與遊戲初始化

 

在Scripts目錄下建立入口腳本：JumpingBrick.js。代碼以下：

 1 window.JumpingBrick = qc.JumpingBrick = {
 2     // 初始化各個模塊
 3     // 數據管理及持久化處理
 4     data: null,
 5     // 界面切換管理
 6     uiManager: null,
 7     // 遊戲世界
 8     gameWorld: null,
 9     // 遊戲控制
10     gameControl: null,
11     // 遊戲配置
12     gameConfig: null,
13     // 遊戲結束界面
14     gameOver: null,
15     // 排行榜
16     announcement: null
17 };
18 
19 // 遊戲邏輯初始化
20 qc.initGame = function(game) {
21     // 記錄下遊戲實例方便訪問
22     JumpingBrick.game = game;
23 
24     JumpingBrick.game.time.frameRate = 30;
25 };

View Code

 

 設置此腳本爲入口腳本：

首先設置命名空間，並記錄game實例，並預設各個模塊的管理對象。默認遊戲幀率設爲30。

 

下次將講解 「第三章 遊戲世界」，包括遊戲配置、構建世界邏輯、控制展現遊戲世界，敬請期待！

 

其餘相關連接

開源免費的HTML5遊戲引擎——青瓷引擎(QICI Engine) 1.0正式版發佈了！

JS開發HTML5遊戲《神奇的六邊形》（一）