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

近期出现一款魔性的消除类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，并关联各属性：

部分属性先留空

 

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

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

转载于:https://my.oschina.net/u/2510595/blog/531618