玩過微信“天天愛消除”遊戲的人都應該瞭解這類遊戲，尤其這類遊戲常常受到許多妹子的喜歡，所以我還是花了週末一天的時間做做這個遊戲。

我的這個遊戲當然沒有微信裡的效果那麼炫酷，只是完成了消除遊戲一些核心的邏輯，包括消失、補全、交換這些。

仔細算下來，這好像已經是我的第7款小遊戲了，這又讓我開始憧憬大遊戲的到來。

算了，反正小時候玩過那麼多小遊戲，先把那些記憶中的遊戲寫完再說。

這款遊戲還是延續canvas的方案，主要的邏輯還是在判斷消失和補全的部分，

核心程式碼如下：

[code]
/**
     * 檢查下落補缺的方塊
     */
    checkDropBlock: function() {
      var len = 0, hasFade = false;
      for(var i = 0; i < span.x; i++) {
        hasFade = false;
        for(var j = span.y - 1; j >= 0; j--) {
          var m = matrix[j][i];
          if(!hasFade && m.opacity <= 0) {
            //垂直方向從下往上找，當找到第一個消失的方塊時記錄位置，
            //後面就不用再記錄了
            hasFade = true;
            len = j;
          } else if(hasFade && m.opacity > 0) {
            //遇到有效的方塊則往下移動
            matrix[len][i] = this.clone(m);
            matrix[j][i].opacity = 0;
            len--;
          }
          //當到達最頂部時，不夠的選擇隨機的方塊補充上，以此填滿
          if(j === 0 && m.opacity <= 0) {
            while(len >= 0) {
              matrix[len][i] = this.getRandomBlock();
              len--;
            }
          }
        }
      }
    }
 /**
     * 檢查需要消失漸變的方塊
     * @param x 結束的x座標
     * @param y 結束的y座標
     * @param len 消失方塊連續長度
     * @param direct 方向
     * @returns {boolean} true-有消失的，false-無消失的
     */
    checkFadeBlock: function(x, y, len, direct) {
      if(len >= 3) {
        //長度大於等於3才會消失
        while(len > 0) {
          var m = direct === 'x' ? matrix[y][x-len] : matrix[y-len][x];
          //依次往前排，打上tag
          m.fade = 1;
          len--;
        }
        return true;
      }
      return false;
    },
    /**
     * 檢測兩個方塊是否相鄰
     * @param x1 方塊1x座標
     * @param y1 方塊1y座標
     * @param x2 方塊2x座標
     * @param y2 方塊2y座標
     * @returns {boolean} true-相鄰，false-不相鄰
     */
    checkNearBlock: function(x1, y1 ,x2 ,y2) {
      return (x1 - x2 === 1 && y1 - y2 === 0)
        || (x1 - x2 === -1 && y1 - y2 === 0)
        || (x1 - x2 === 0 && y1 - y2 === 1)
        || (x1 - x2 === 0 && y1 - y2 === -1);
    },
    /**
     * 全域性檢查是否有3個及3個以上連續相同的方塊
     * @returns {boolean} true-有，false-沒有
     */
    checkSameBlock: function() {
      var len = 0, color, opacity, ret = false;
      for(var i = 0; i < span.y; i++) {
        len = 0;
        //從左邊第一個開始標記
        color = matrix[i][0].color;
        opacity = matrix[i][0].opacity;
        for(var j = 0; j < span.x; j++) {
          var m = matrix[i][j];
          if(m.opacity > 0 && opacity > 0 && m.color === color) {
            //如果方塊有效，並且顏色等於上個方塊的顏色，則len加1
            len++;
            if(j === span.x-1 && this.checkFadeBlock(j+1, i, len, 'x')) {
              //最右邊時直接檢查
              ret = true;
            }
          } else {
            //如果滿足消失的要求在打上tag
            if(this.checkFadeBlock(j, i, len, 'x')) {
              ret = true;
            }
            //如果一旦出現無效或者顏色不等於上個方塊的顏色，則充值len和顏色
            len = 1;
            color = m.color;
            opacity = m.opacity;
          }
        }
      }
      //同上
      for(i = 0; i < span.x; i++) {
        len = 0;
        color = matrix[0][i].color;
        opacity = matrix[0][i].opacity;
        for(j = 0; j < span.y; j++) {
          var mm = matrix[j][i];
          if(mm.opacity > 0 && opacity > 0 && mm.color === color) {
            len++;
            if(j === span.y-1 && this.checkFadeBlock(i, j+1, len, 'y')) {
              ret = true;
            }
          } else {
            if(this.checkFadeBlock(i, j, len, 'y')) {
              ret = true;
            }
            len = 1;
            color = mm.color;
            opacity = mm.opacity;
          }
        }
      }
      if(ret && !animating) {
        //如果滿足條件並且不處於動畫中，則開啟漸變消失動畫
        animating = true;
        this.createFadeBlock();
      }
      return ret;
    }
/**
     * 建立漸變消失動畫
     */
    createFadeBlock: function() {
      fadeTimer && clearTimeout(fadeTimer);
      var flag = false;
      for(var i = 0; i < span.y; i++) {
        for(var j = 0; j < span.x; j++) {
          var m = matrix[i][j];
          if(m.fade === 1) {
            //標記消失的才執行動畫
            flag = true;
            m.opacity -= 0.1;
            if(m.opacity <= 0) {
              //完全透明瞭了則可以結束動畫了
              m.fade = 0;
              m.opacity = 0;
              m.color = Color.bg;
              flag = false;
            }
          }
        }
      }
      if(flag) {
        fadeTimer = setTimeout(function() {
          elimination.createFadeBlock();
        }, 10);
      } else {
        fadeTimer && clearTimeout(fadeTimer);
        animating = false;
        //隨時都要檢查是否要補齊空缺的方塊
        this.checkDropBlock();
        //檢查相同的方塊
        this.checkSameBlock();
      }
    }
/**
     * 開始後的點選事件回撥
     * @param e
     */
    startedClickHandler: function(e) {
      var x = e.offsetX,
        y = e.offsetY,
        size = Config.size;
      x = Math.floor(x / size);
      y = Math.floor(y / size);
      var m = matrix[y][x];
      if(m.selected === 0) {
        //未有選中狀態
        for(var i = 0; i < span.y; i++) {
          for (var j = 0; j < span.x; j++) {
            var mm = matrix[i][j];
            if(mm.selected === 1 && this.checkNearBlock(x, y, j, i)) {
              //如果兩個方塊都被選中並且相鄰才交換眼色
              var color = mm.color;
              mm.color = m.color;
              m.color = color;
              if(!this.checkSameBlock()) {
                //如果交換沒有消失的方塊，則不能交換，直接還原
                var tColor = mm.color;
                mm.color = m.color;
                m.color = tColor;
              }
            }
            mm.selected = +(i === y && j === x);
          }
        }
      } else {
        //已選中的話則去掉選中狀態
        m.selected = 0;
      }
    }
[/code]