JS開發HTML5游戲《神奇的六邊形》（三）

近期出現一款魔性的消除類HTML5游戲《神奇的六邊形》，今天我們一起來看看如何通過開源免費的青瓷引擎（www.zuoyouxi.com）來實現這款游戲。

（點擊圖片可進入游戲體驗）

因內容太多，為方便大家閱讀，所以分成四部分來講解。

本文為第三部分，主要包括：

11.顯示出3個形狀

12.形狀的拖放處理

13.形狀放入棋盤的實現

14.界面管理

15.消除行

若要一次性查看所有文檔，也可點擊這里。

 

十一. 顯示出3個形狀

1. 在Scripts/ui創建文件：Pool.js，繪制3個形狀。

 var s = qc.Serializer;

 /**
  * 3個形狀的繪制
  */
 var Pool = qc.defineBehaviour('qc.tetris.Pool', qc.Behaviour, function() {
     var self = this;

     /**
      * 形狀的預置
      */ 
     self.blocksPrefab = null;

     /**
      * 記錄下面3個形狀的實例
      */
     self.shapes = [];
 }, {
     blocksPrefab: s.PREFAB
 });

 /**
  * 初始化處理
  */
 Pool.prototype.awake = function() {
     var self = this;
     self.redraw();
 };

 /**
  * 繪制3個形狀
  */
 Pool.prototype.redraw = function() {
     var self = this;

     // 先干掉舊的形狀數據
     for (var i = 0; i < self.shapes.length; i++) {
         self.shapes[i].destroy();
     }
     self.shapes = [];

     // 創建3個新的形狀
     for (i = 0; i < 3; i++) {
         self.add(i);
     }
     self.resize();
 };

 /**
  * 調整位置
  */
 Pool.prototype.resize = function() {
     var self = this, o = self.gameObject;

     // 計算X方向的偏移
     var offset = o.width * (0.5 - 0.165);
     for (var i = 0; i < 3; i++) {
         var child = self.shapes[i];
         if (!child) return;
         child.anchoredX = offset * (i - 1);
         child.anchoredY = 0;
     }
 };

 /**
  * 添加一個形狀
  */
 Pool.prototype.add = function(index) {
     var self = this;

     var o = self.game.add.clone(self.blocksPrefab, self.gameObject);
     var c = o.getScript('qc.tetris.BlocksUI');
     c.data = qc.Tetris.Shapes.pool[index];
     self.shapes[index] = o;
 };

 /**
  * 刪除一個形狀
  */
 Pool.prototype.remove = function(index) {
     var o = this.shapes[index];
     o.destroyImmediately();
     this.shapes.splice(index, 1);
 };

整個代碼邏輯比較簡單，根據3個形狀的數據進行繪制。請參考注釋進行理解。

 

2. 將此腳本掛載到UIRoot/pool節點，關聯blocksPrefab屬性：

3. 運行測試下效果，3個形狀正確顯示了：

 

十二. 形狀的拖放處理

形狀在被按下時，需要變大，如果是手機上需要向上做一定的位置偏移。拖拽時形狀應該跟着鼠標或手指進行移動。

修改腳本Scripts/ui/BlocksUI.js，添加如下代碼：

1. 修改reset函數，增加放大區塊的邏輯：

BlocksUI.prototype.reset = function(fixToBoard) {
     var self = this, o = self.gameObject;
     for (var pos in self._blocks) {
         var p = qc.Tetris.readPos(pos);
         var pt = qc.Tetris.board.toWorld(p, fixToBoard ? qc.Tetris.BLOCK_H : qc.Tetris.POOL_DISTANCE_NORMAL);
         var block = self._blocks[pos];
         block.anchoredX = pt.x;
         block.anchoredY = pt.y;

         var scale = fixToBoard ? 1.13 : 1;
         block.find('shadow').scaleX = scale;
         block.find('shadow').scaleY = scale;
         block.find('block').scaleX = scale;
         block.find('block').scaleY = scale;
     }
 };

2. 添加按下的邏輯處理，放大區塊：

/**
  * 鼠標按下：放大區塊
  */
 BlocksUI.prototype.onDown = function(e) {
     var self = this, o = self.gameObject;
     self.drop = false;
     self.reset(true);

     // 在手機下，需要往上做點偏移
     o.y -= self.offsetY;
 };

• drop標記當前區塊是否被放到棋盤了，剛開始按下清理下環境
• 按下時需要向上做偏移offsetY

3. 添加鼠標松開或觸摸結束的處理，還原區塊的位置和大小：

/**
  * 鼠標松開：重置區塊大小
  */
 BlocksUI.prototype.onUp = function() {
     var self = this;
     self.reset();
 };

 

4. 添加開始拖拽的處理：

/**
  * 拖拽開始
  */
 BlocksUI.prototype.onDragStart = function(e) {
     var self = this;
     self.drop = false;
     self.drag = true;
     self.lastPos = '';
     self.game.input.nativeMode = true;
     self.reset(true);

     self.game.log.trace('Start drag:{0}', self.index);

     // 復制出可放入標記
     var ob = self.flagBlocks = self.game.add.clone(self.gameObject, qc.Tetris.boardUI.gameObject);
     ob.children.forEach(function(block) {
         block.find('shadow').visible = false;
         var b = block.find('block');
         b.width = qc.Tetris.BLOCK_W;
         b.height = qc.Tetris.BLOCK_H;
         b.scaleX = 1;
         b.scaleY = 1;
         b.frame = 'dark' + b.frame;
     });
     ob.scaleX = 1;
     ob.scaleY = 1;
     ob.interactive = false;
     self.hideFlag();
 };

• 初始時，標記正在拖拽（drag = true），並且沒有被放下（drop = false）
• 當拖拽到棋盤時，需要實時指示是否可以放下本形狀。拖拽開始先清理下最近一次檢測的邏輯坐標點（last = ''）
• 設置輸入模式nativeMode = true。確保輸入事件能被實時處理（默認情況下延后一幀處理，運行效率比較高），本游戲對拖拽的實時響應比較重要。
• 拖拽開始時，放大並偏移形狀（和鼠標按下的邏輯一樣）
• 后續的邏輯：另外復制出本形狀，並隱藏掉。這個形狀在后續拖拽中，會在棋盤顯示出來以指示當前是否可以放入。這個指示的格子圖片，使用暗色的圖片。

5. 添加拖拽的處理，每幀都會進行調度：

 /**
  * 拖拽中
  */
 BlocksUI.prototype.onDrag = function(e) {
     var self = this,
         o = self.gameObject;
     if (self.drag) {
         // 改變節點的目標位置
         var p = o.getWorldPosition();
         p.x += e.source.deltaX;
         p.y += e.source.deltaY;
         var lp = o.parent.toLocal(p);
         o.x = lp.x;
         o.y = lp.y;

         // 計算當前對應棋盤中心點的偏移
         var board = qc.Tetris.boardUI.gameObject;
         p = board.toLocal(p);
         p.y += board.height * 0.5;

         // 反算出對應的歸一化坐標
         var xy = qc.Tetris.board.toLocal(p);
         var x = Math.round(xy.x),
             y = Math.round(xy.y),
             pos = qc.Tetris.makePos(x, y);
         if (self.lastPos !== pos) {
             self.lastPos = pos;
             if (qc.Tetris.board.data[pos] &&
                 qc.Tetris.board.checkPutIn(pos, self.data.list)) {
                 self.showFlag(pos);
             }
             else {
                 self.hideFlag();
             }
         }
     }
 };

 

• 在拖拽的事件e中，會指明本幀到上一幀的移動偏移量（屏幕坐標），本形狀加上屏幕坐標偏移，這樣就移動起來了
• 然后計算本形狀的中心點，對應到棋盤的邏輯坐標。並檢查目標是否可以放入，如果可以就需要顯示指示
• 最近一次檢測的邏輯坐標需要記錄下來，防止每幀都對同一邏輯坐標檢查是否可以放入（白耗CPU）

6. 打開腳本Scripts/logic/Board.js，實現checkPutIn方法：

Board.prototype.checkPutIn = function(pos, list) {
     var self = this;
     var pt = qc.Tetris.readPos(pos),
         x = pt.x,
         y = pt.y;

     for (var i = 0; i < list.length; i++) {
         var x0 = x + list[i][0],
             y0 = y + list[i][1];

         // 這個點應該是空的
         var block = self.data[qc.Tetris.makePos(x0, y0)];
         if (!block) return false;
         if (block.value !== 0) return false;
     }
     return true;
 };

 

7. 繼續打開Scripts/ui/Blocks.js，繼續實現拖拽結束的邏輯：

 /**
  * 拖拽結束
  */
 BlocksUI.prototype.onDragEnd = function(e) {
     var self = this,
         o = self.gameObject;
     self.drag = false;

     if (self.flagBlocks.visible && self.lastPos) {
         // 放到這個位置中去
         self.drop = true;
         qc.Tetris.operation.putIn(self.index, self.lastPos, self.data);
     }
     else {
         self.reset();
         o.parent.getScript('qc.tetris.Pool').resize();
     }

     // 顯示標記可以干掉了
     self.flagBlocks.destroy();
     delete self.flagBlocks;
 };

 /**
  * 隱藏指示標記
  */
 BlocksUI.prototype.hideFlag = function() {
     this.flagBlocks.visible = false;
 };

 /**
  * 顯示指示標記
  */
 BlocksUI.prototype.showFlag = function(pos) {
     this.flagBlocks.visible = true;
     var pt = qc.Tetris.board.data[pos];
     this.flagBlocks.anchoredX = pt.x;
     this.flagBlocks.anchoredY = pt.y;
 };

 

• 拖拽結束后，需要判定形狀是否被放入目標節點
• 如果可以放入，則調用指令：qc.Tetris.operation.putIn（下步驟實現）
• 如果不能放入，則需要將位置和大小等還原
• 最后，指示對象需要被析構

8. 在Scripts/operation創建文件PutIn.js，實現放入形狀指令：

/**
  * 請求放入指定格子，如果成功放入返回true，否則返回false
  */
 qc.Tetris.operation.putIn = function(index, pos) {
     // TODO: 邏輯待實現
 };

 

9. 在Blocks.js中，我們使用到了棋盤對象：qc.Tetris.boardUI.gameObject，但目前這個值(BoardUI)尚未被賦值。
打開BoardUI.js，在構造函數中加入代碼賦值：

var BoardUI = qc.defineBehaviour('qc.tetris.BoardUI', qc.Behaviour, function() {
     var self = this;

     // 登記下本對象
     qc.Tetris.boardUI = self;

     /**
      * 棋盤的棋子元素
      */
     self.pieces = {};

     ...

 

10. 運行測試下，形狀可以隨意拖拽了，並且可以反彈回原來位置。不過還無法放入（因為PutIn我們還沒實現），請繼續后面教程。

十三. 形狀放入棋盤的實現

處理流程如下圖：

打開文件Scripts/operation/PutIn.js，實現上述代碼：

/**
     * 請求放入指定格子，如果成功放入返回true，否則返回false
     */
    qc.Tetris.operation.putIn = function(index, pos) {
        var shape = qc.Tetris.Shapes.pool[index],
            board = qc.Tetris.board,
            ui = qc.Tetris.game.ui,
            log = qc.Tetris.game.log;
        log.trace('嘗試將({0})放入({1})', index, pos);

        if (!board.checkPutIn(pos, shape.list)) {
            // 禁止放入
            return false;
        }
        log.trace('放入格子：({0})', pos);

        // 更新棋盤信息
        board.putIn(pos, shape.list, shape.value);

        // 計算可以消除的行，並同時消除掉
        var lines = board.getFullLines();
        lines.forEach(function(flag) {
            var children = ui.killLineEffect.find(flag).gameObject.children;
            var pts = [];
            children.forEach(function(child) { pts.push(child.name); })
            board.clearLine(pts);
        });

        // 計算分數明細，並添加之
        var scoreDetail = qc.Tetris.operation.calcScore(lines);
        qc.Tetris.score.current += scoreDetail.total;

        // 替換為新的形狀
        qc.Tetris.Shapes.pool.splice(index, 1);
        qc.Tetris.Shapes.pool.push(qc.Tetris.Shapes.random());

        // 重新繪制棋盤
        ui.board.redraw();

        // 行消除與分數增加的動畫表現
        if (lines.length > 0) {
            for (var i = 0; i < lines.length; i++) {
                ui.killLineEffect.play(i, lines[i], scoreDetail.lines[i]);
            }
        }
        else {
            ui.board.getScript('qc.tetris.FlyScore').play(pos, scoreDetail.total);
        }

        // 當前分數的動畫表現
        ui.currentScore.setScore();

        // 形狀飛入的動畫表現，並將舊的形狀刪除掉
        ui.pool.remove(index);
        ui.pool.add(2);
        ui.pool.flyIn(index);

        // 死亡檢測
        if (board.die) {
            // 延遲顯示死亡界面
            log.trace('Game Over!');
            qc.Tetris.game.timer.add(3000, function() {
                ui.onDie();
            });
        }

        // 放入成功了
        return true;
    };

    /**
     * 計算分數明細
     * total: 總分數
     * lines: [各行的分數]
     */
    qc.Tetris.operation.calcScore = function(lines) {
        var scores = {
            total: 40,
            lines: []
        };
        if (lines.length < 1) return scores;

        // 計算加成
        var append = Math.max(0, lines.length - 1 * 10);

        for (var i = 0; i < lines.length; i++) {
            var flag = lines[i];

            var line = qc.Tetris.game.ui.killLineEffect.find(flag);
            var len = line.gameObject.children.length;
            scores.lines[i] = len * 20 + append * len;
            scores.total += scores.lines[i];

            // 40合並到第一行去做表現
            if (i === 0) {
                scores.lines[i] += 40;
            }
        }

        return scores;
    };

• calcScore方法為計算分數的邏輯
• 代碼中出現了qc.Tetris.game.ui（即UIManager），在下文中陸續實現
• 另外，本邏輯中加入了一些動畫表現，在下文中也陸續實現之
• 先大致理解下處理流程，細節可以后續章節中逐一理解

十四. 界面管理

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，並關聯各屬性：

部分屬性先留空

 

十五. 消除行

以下的行是可以被消除的：

  

邏輯實現

1. 打開Scripts/logic/board.js，將上述3類型的行建立數據結構：

var Board = qc.Tetris.Board = function() {
     // 省略一堆代碼
     ...

     // 左斜的9條線，指明起始點坐標
     self.xyLines = [
         [0, -4],
         [1, -4],
         [2, -4],
         [3, -4],
         [4, -4],

         [4, -3],
         [4, -2],
         [4, -1],
         [4, 0]
     ];

     // 橫向9條線，指明起始點坐標和長度
     self.yLines = [
         [0, -4, 5],
         [-1, -3, 6],
         [-2, -2, 7],
         [-3, -1, 8],
         [-4, 0, 9],
         [-4, 1, 8],
         [-4, 2, 7],
         [-4, 3, 6],
         [-4, 4, 5]
     ];

     // 右斜9條線，指明起始點坐標和長度
     self.xLines = [
         [-4, 0, 5],
         [-3, -1, 6],
         [-2, -2, 7],
         [-1, -3, 8],
         [0, -4, 9],
         [1, -4, 8],
         [2, -4, 7],
         [3, -4, 6],
         [4, -4, 5]
     ];
 };

 

 

2. 實現putIn接口：

Board.prototype.putIn = function(pos, list, value) {
     var self = this;
     var pt = qc.Tetris.readPos(pos),
         x = pt.x,
         y = pt.y;

     for (var i = 0; i < list.length; i++) {
         var x0 = x + list[i][0],
             y0 = y + list[i][1];

         // 這個點應該是空的
         var block = self.data[qc.Tetris.makePos(x0, y0)];
         block.value = value;
     }
 };

 

3. 實現clearLine接口，干掉一行數據：

// 干掉一行
 Board.prototype.clearLine = function(pts) {
     var self = this;
     pts.forEach(function(pos) {
         self.data[pos].value = 0;
     });
 };

 

4. 實現getFullLines接口，將所有可以消除的行返回：

// 取得可以消除的行
 Board.prototype.getFullLines = function() {
     var self = this,
         lines = [];

     // 橫向9條線
     var pts = self.yLines;
     for (var i = 0; i < pts.length; i++) {
         var start = pts[i], end = [start[0] + start[2] - 1, start[1]];
         var ok = true;
         for (var x = start[0], y = start[1]; x <= end[0];) {
             var pos = qc.Tetris.makePos(x, y);
             if (self.data[pos].value === 0) {
                 // 不符合，不能消除
                 ok = false; break;
             }

             // 下一個點
             x++;
         }
         if (ok) {
             // 這條線可以消除，添加進來
             lines.push('y' + qc.Tetris.makePos(start[0], start[1]));
         }
     }

     // 右斜9條線
     var pts = self.xLines;
     for (var i = 0; i < pts.length; i++) {
         var start = pts[i], end = [start[0], start[1] + start[2] - 1];
         var ok = true;
         for (var x = start[0], y = start[1]; y <= end[1];) {
             var pos = qc.Tetris.makePos(x, y);
             if (self.data[pos].value === 0) {
                 // 不符合，不能消除
                 ok = false; break;
             }

             // 下一個點
             y++;
         }
         if (ok) {
             // 這條線可以消除，添加進來
             lines.push('x' + qc.Tetris.makePos(start[0], start[1]));
         }
     }

     // 左斜的9條線
     var pts = self.xyLines;
     for (var i = 0; i < pts.length; i++) {
         var start = pts[i], end = [start[1], start[0]];
         var ok = true;
         for (var x = start[0], y = start[1]; true;) {
             var pos = qc.Tetris.makePos(x, y);
             if (self.data[pos].value === 0) {
                 // 不符合，不能消除
                 ok = false; break;
             }

             // 下一個點
             if (end[0] > start[0]) {
                 x++, y--;
                 if (x > end[0]) break;
             }
             else {
                 x--, y++;
                 if (x < end[0]) break;
             }
         }
         if (ok) {
             // 這條線可以消除，添加進來
             lines.push('xy' + qc.Tetris.makePos(start[0], start[1]));
         }
     }

     return lines;
 };

界面實現

預先將所有的行創建出來，當行被刪除時直接顯示出來做動畫表現。以下流程中，我們首先創建一個格子的預制，再創建一個行的預置。

1. 在board節點下，創建Image對象，設置屬性如下圖：

2.將新創建的block節點拖入Assets/prefab目錄，創建預制。然后從場景中刪除。

3. 在board節點下，創建Node對象，設置屬性如下圖：

4. 為節點掛載TweenAlpha動畫組件，消失時需要淡出：

• 透明度從1變化到0
• 耗時0.5秒
• 變化的曲線是：先平緩的做變化，然后在快速變化為0
• 圖片中from和to值設置反了，請手工設置下from=1，to=0

5. 在Scripts/ui下創建腳本Line.js，控制行的繪制和表現：

/**
  * 消除一行的表現界面
  */
 var LineUI = qc.defineBehaviour('qc.tetris.LineUI', qc.Behaviour, function() {
     var self = this;

     // 描述行的信息
     self.flag = 'xy';
     self.x = 0;
     self.y = 0;
 }, {
     blockPrefab: qc.Serializer.PREFAB
 });

 Object.defineProperties(LineUI.prototype, {
     /**
      * 取得行標記
      */
     key: {
         get: function() {
             return this.flag + qc.Tetris.makePos(this.x, this.y);
         }
     },

     /**
      * 取得本行的格子數量
      */
     count: {
         get: function() {
             return this.gameObject.children.length;
         }
     }
 });

 /**
  * 初始化行
  */
 LineUI.prototype.init = function(flag, start, end) {
     var self = this;
     self.flag = flag;
     self.x = start[0];
     self.y = start[1];

     // 創建一個格子
     var createBlock = function(pos) {
         var block = self.game.add.clone(self.blockPrefab, self.gameObject);
         block.frame = 'white.png';
         block.anchoredX = qc.Tetris.board.data[pos].x;
         block.anchoredY = qc.Tetris.board.data[pos].y;
         block.name = pos;
         return block;
     };

     switch (flag) {
     case 'xy':
         for (var x = self.x, y = self.y; true;) {
             createBlock(qc.Tetris.makePos(x, y));

             // 下一個點
             if (end[0] > start[0]) {
                 x++, y--;
                 if (x > end[0]) break;
             }
             else {
                 x--, y++;
                 if (x < end[0]) break;
             }
         }
         break;

     case 'y':
         for (var x = start[0], y = start[1]; x <= end[0];) {
             createBlock(qc.Tetris.makePos(x, y));
             x++;
         }
         break;

     case 'x':
         for (var x = start[0], y = start[1]; y <= end[1];) {
             createBlock(qc.Tetris.makePos(x, y));
             y++;
         }
     }

     // 初始時隱藏掉
     self.gameObject.name = self.key;
     self.gameObject.visible = false;
 };

 /**
  * 播放消失的動畫
  */
 LineUI.prototype.playDisappear = function(index) {
     var self = this,
         o = self.gameObject,
         ta = self.getScript('qc.TweenAlpha');

     o.visible = true;
     o.alpha = 1;

     ta.delay = 0;
     ta.resetToBeginning();
     ta.onFinished.addOnce(function() {
         // 隱藏掉
         o.visible = false;
     });
     ta.playForward();
 };

• flag和x、y屬性描述了行的信息（左斜行、水平行還是右斜行，起始點的坐標）

6. 將此腳本掛載到Line節點，並設置blockPrefab為第一步驟創建的格子預置：

7. 將line拖進Assets/prefab目錄，創建預制。然后從場景中刪除。

8. 在Scripts/ui創建腳本KillLineEffect.js，處理行消失表現的邏輯

/**
  * 行消除的動畫表現
  */
 var KillLineEffect = qc.defineBehaviour('qc.tetris.KillLineEffect', qc.Behaviour, function() {
     var self = this;

     /**
      * 所有的行
      */
     self.lines = {};

     /**
      * 兩行之間的播放延遲
      */
     self.delay = 300;
 }, {
     delay: qc.Serializer.NUMBER,
     linePrefab: qc.Serializer.PREFAB
 });

 /**
  * 初始化：將用於表現的行全部創建出來放着
  */
 KillLineEffect.prototype.awake = function() {
     var self = this;

     // 創建用於消除表現的格子行
     var createLine = function(flag, start, end) {
         var ob = self.game.add.clone(self.linePrefab, self.gameObject);
         var line = ob.getScript('qc.tetris.LineUI');
         line.init(flag, start, end);
         self.lines[line.key] = line;
     };
     var pts = qc.Tetris.board.xyLines;
     for (var i = 0; i < pts.length; i++) {
         var start = pts[i], end = [start[1], start[0]];
         createLine('xy', start, end);
     }

     var pts = qc.Tetris.board.yLines;
     for (var i = 0; i < pts.length; i++) {
         var start = pts[i], end = [start[0] + start[2] - 1, start[1]];
         createLine('y', start, end);

     }
     var pts = qc.Tetris.board.xLines;
     for (var i = 0; i < pts.length; i++) {
         var start = pts[i], end = [start[0], start[1] + start[2] - 1];
         createLine('x', start, end);
     }
 };

 KillLineEffect.prototype.find = function(flag) {
     return this.lines[flag];
 };

 KillLineEffect.prototype.play = function(index, flag, score) {
     var self = this;
     var line = self.find(flag);
     var delay = index * self.delay;

     var playFunc = function() {
         // 冒出分數
         var children = line.gameObject.children;
         var pos = children[Math.round(children.length/2) - 1].name;
         self.getScript('qc.tetris.FlyScore').play(pos, score);

         // 消失動畫
         line.playDisappear();
     };
     if (delay <= 0) {
         playFunc();
     }
     else {
         self.game.timer.add(delay, playFunc);
     }
 };

 

• 在腳本初始化時，將所有行的數據構建出來，並隱藏掉
• delay表示在多行消失時，其動畫的間隔時間
• 在動畫表現時，有分數表現，FlyScore下一章再補充

9. 將KillLineEffect掛載到board節點（棋盤），並設置linePrefab:

10. 運行工程，就可以看到這些“行”了：

11. 選中UIRoot節點，設置UIManager的Kill Line Effect Node屬性（board節點，因為board掛載了KillLineEffect腳本）：

 

 

上一篇：JS開發HTML5游戲《神奇的六邊形》（二） 

下一篇：JS開發HTML5游戲《神奇的六邊形》（四）