近期出现一款魔性的消除类HTML5游戏《神奇的六边形》，今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏。

(点击这里可进入游戏体验)

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

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

14. 界面的管理

15. 消除行

十四. 界面管理

1. 在Scripts/ui新建UIManager.js：

/**

* 负责管理所有的游戏界面

*/

var UIManager = qc.defineBehaviour('qc.tetris.UIManager', qc.Behaviour, function() {

var self = this;

self.game.ui = self;

self.runInEditor = true;

}, {

bestScoreNode: qc.Serializer.NODE,

currentScoreNode: qc.Serializer.NODE,

boardNode: qc.Serializer.NODE,

poolNode: qc.Serializer.NODE,

killLineEffectNode: qc.Serializer.NODE,

uiRoot: qc.Serializer.NODE,

gameOverPrefab: qc.Serializer.PREFAB

});

/**

* 初始化管理

*/

UIManager.prototype.awake = function() {

var self = this;

/**

* bestScore: BestScore组件

*/

if (self.bestScoreNode)

self.bestScore = self.bestScoreNode.getScript('qc.tetris.BestScore');

/**

* currentScore: CurrentScore组件

*/

if (self.currentScoreNode)

self.currentScore = self.currentScoreNode.getScript('qc.tetris.CurrentScore');

/**

* board: 棋盘绘制组件

*/

if (self.boardNode)

self.board = self.boardNode.getScript('qc.tetris.BoardUI');

/**

* pool: 3个形状的方块

*/

if (self.poolNode)

self.pool = self.poolNode.getScript('qc.tetris.Pool');

/**

* killLineEffect: 方块消除的动画组件

*/

if (self.killLineEffectNode)

self.killLineEffect = self.killLineEffectNode.getScript('qc.tetris.KillLineEffect');

};

/**

* 游戏重新开始的界面处理

*/

UIManager.prototype.restart = function() {

var self = this;

// 重新生成3个新的形状

self.pool.redraw();

// 棋盘重绘制

self.board.redraw();

// 重绘当前分数

self.currentScore.setScore();

};

/**

* 死亡的处理

*/

UIManager.prototype.onDie = function() {

// 显示失败页面

this.game.add.clone(this.gameOverPrefab, this.uiRoot);

};

UIManager引用了几个界面逻辑，其中KillLineEffect脚本下章节再实现

同时，加入了死亡处理接口、重新开始游戏接口，具体的逻辑在后续章节中逐一实现

2. 将脚本挂载到UIRoot，并关联各属性：

部分属性先留空