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

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

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

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

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

1. 功能分析

2. 创建工程与场景

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

一. 功能分析

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

主要功能点

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

代码构成

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

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

 二. 创建工程与场景

考虑到游戏中的逻辑和界面比较简单，使用的资源比较少，故而将所有的界面都置于一个场景中，避免场景切换带来的消耗。 先创建工程JumpingBrick和空的主场景Main，因为游戏大量的使用白色作为背景，为了减少绘制消耗，直接设置游戏背景色为白色。设置如下：

游戏入口与游戏初始化

在Scripts目录下创建入口脚本：JumpingBrick.js。代码如下：

window.JumpingBrick = qc.JumpingBrick = {
    // 初始化各个模块
    // 数据管理及持久化处理
    data: null,
    // 界面切换管理
    uiManager: null,
    // 游戏世界
    gameWorld: null,
    // 游戏控制
    gameControl: null,
    // 游戏配置
    gameConfig: null,
    // 游戏结束界面
    gameOver: null,
    // 排行榜
    announcement: null
};

// 游戏逻辑初始化
qc.initGame = function(game) {
    // 记录下游戏实例方便访问
    JumpingBrick.game = game;

    JumpingBrick.game.time.frameRate = 30;
};

 设置此脚本为入口脚本：

首先设置命名空间，并记录game实例，并预设各个模块的管理对象。默认游戏帧率设为30。

下次将讲解 “第三章 游戏世界”，包括游戏配置、构建世界逻辑、控制展示游戏世界，敬请期待！

其他相关链接

开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了！

JS开发HTML5游戏《神奇的六边形》（一）