青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 1

继上一次介绍了《神奇的六边形》的完整游戏开发流程后（可点击这里查看），这次将为大家介绍另外一款魔性游戏《跳跃的方块》的完整开发流程。

（点击图片可进入游戏体验）

因内容太多，为方便大家阅读，将分成多个部分来讲解。

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

1. 功能分析

2. 创建工程与场景

若要一次性查看所有文档，也可点击这里。

一. 功能分析

根据游戏设定，解析出游戏的主体功能，需要使用的算法，需要持久化的数据，然后制订代码结构。如图所示：

主要功能点

社交功能，比如：微信登录与分享，排行榜。
无尽关卡模式。
效果表现，比如死亡时屏幕震动等。

代码构成

将代码分为三大类：数据处理，界面控制，游戏控制。

创建工程和场景
游戏世界
数据处理
界面控制

二. 创建工程与场景

考虑到游戏中的逻辑和界面比较简单，使用的资源比较少，故而将所有的界面都置于一个场景中，避免场景切换带来的消耗。先创建工程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 };