青瓷引擎之纯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游戏《神奇的六边形》（一）