摘要：六邊形游戲的鼻祖應(yīng)該是這個(gè)，原作者開(kāi)發(fā)用的是游戲引擎，本著快速開(kāi)發(fā)的理念，本游戲采用，延用。預(yù)覽功能介紹六邊形游戲本質(zhì)是俄羅斯方塊，理解這個(gè)對(duì)接下來(lái)的開(kāi)發(fā)會(huì)有很大的幫助。六邊形的寬度為寬度高度。相鄰六邊形的水平距離為水平寬度。

六邊形游戲的鼻祖應(yīng)該是這個(gè) hex-frvr，原作者開(kāi)發(fā)用的是 pixi 游戲引擎，本著快速開(kāi)發(fā)的理念，本游戲采用 cocos creator，UI 延用 hex-frvr。學(xué)習(xí)過(guò)程中，有借鑒各路實(shí)現(xiàn)。此源碼僅供學(xué)習(xí)使用，謝謝。

六邊形游戲本質(zhì)是俄羅斯方塊，理解這個(gè)對(duì)接下來(lái)的開(kāi)發(fā)會(huì)有很大的幫助。

本游戲?qū)崿F(xiàn)功能如下：

[x] 六邊形棋盤(pán)繪制、方塊隨機(jī)生成

[x] 方塊能否落入棋盤(pán)的判定

[x] 方塊消除與游戲結(jié)束的判定

[x] 各種動(dòng)畫(huà)效果

[x] 游戲計(jì)分

在講游戲開(kāi)發(fā)思路前，建議先了解 cocos creator

文檔

API

必須了解的 API 有：

Game

Canvas

Scene

Node

Component

Sprite

Texture2D

Director

loader

Event

Touch

Action

Vec2

Animation

AnimationClip

Prefab

sys

其中，Node、Event、Vec2，是此游戲開(kāi)發(fā)的重點(diǎn)。

下面從功能逐一介紹開(kāi)發(fā)思路。

棋盤(pán)用的是六角網(wǎng)格布局，電子游戲中六角網(wǎng)格的運(yùn)用沒(méi)有方形網(wǎng)格那樣常見(jiàn)，先來(lái)簡(jiǎn)單了解下六角網(wǎng)格。

本文中討論的六角網(wǎng)格使用的都是正六邊形。六角網(wǎng)格最典型的朝向有兩種：水平方向( 頂點(diǎn)朝上 )與豎直方形( 邊線朝上 )。本游戲用的是，頂點(diǎn)朝上的朝向。

細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，圖中有類(lèi)似坐標(biāo)系的東西，稱(chēng)之為軸坐標(biāo)。

軸坐標(biāo)系，有時(shí)也叫做“梯形坐標(biāo)系”，是從立方坐標(biāo)系的三個(gè)坐標(biāo)中取兩個(gè)建立的坐標(biāo)系。由于我們有約束條件 x + y + z = 0，因此第三個(gè)坐標(biāo)其實(shí)是多余的。軸坐標(biāo)適合用于地圖數(shù)據(jù)儲(chǔ)存，也適合用于作為面向玩家的顯示坐標(biāo)。類(lèi)似立方坐標(biāo)，你也可以使用笛卡爾坐標(biāo)系中的加，減，乘，除等基本運(yùn)算。

有許多種立方坐標(biāo)系，因此，也自然有許多種由其衍生的軸坐標(biāo)系。本游戲，選用的是 q = x 以及 r = z 的情況。這里 q 代表列而 r 表示行。

偏移坐標(biāo)是人們最先會(huì)想到的坐標(biāo)系，因?yàn)樗軌蛑苯邮褂梅叫尉W(wǎng)格的笛卡爾坐標(biāo)。但不幸的是，偏移坐標(biāo)系中的一個(gè)軸總會(huì)顯得格格不入，并且最終會(huì)把問(wèn)題變得復(fù)雜化。立方坐標(biāo)和軸坐標(biāo)則顯得相得益彰，算法也更簡(jiǎn)單明了，只是地圖存儲(chǔ)方面會(huì)略微變得復(fù)雜一點(diǎn)。所以，使用立方/軸坐標(biāo)系是較為簡(jiǎn)單的。

大致了解了什么是六角網(wǎng)格，接下來(lái)了解如何把六角網(wǎng)格轉(zhuǎn)換為像素。

如果使用的軸坐標(biāo)，那么可以先觀察下圖中示意的單位矢量。在下圖中，箭頭 A→Q 表示的是 q 軸的單位矢量而 A→R 是 r 軸的單位矢量。像素坐標(biāo)即 q_basis _ q + r_basis _ r。例如，B 點(diǎn)位于 (1, 1)，等于 q 與 r 的單位矢量之和。

在網(wǎng)格為 水平 朝向時(shí)，六邊形的 高度 為 高度 = size * 2. 相鄰六邊形的 豎直 距離則為 豎直 = 高度 * 3/4。

六邊形的 寬度 為 寬度 = sqrt(3)/2 * 高度。相鄰六邊形的 水平 距離為 水平 = 寬度。

對(duì)于本游戲中，取棋盤(pán)中心點(diǎn)為，(0,0)。從已知的六角網(wǎng)格坐標(biāo)(正六邊形)以及六邊形的高度，就可以得到每個(gè)正六邊形的坐標(biāo)。可以得到如下像素轉(zhuǎn)換代碼：

  hex2pixel(hex, h) {
    let size = h / 2;
    let x = size * Math.sqrt(3) * (hex.q + hex.r / 2);
    let y = ((size * 3) / 2) * hex.r;
    return cc.p(x, y);
  }

坐標(biāo)系轉(zhuǎn)像素問(wèn)題解決了，接下來(lái)，需要獲得本游戲中六角網(wǎng)格布局相應(yīng)的坐標(biāo)系。

這個(gè)問(wèn)題，本質(zhì)是軸坐標(biāo)系統(tǒng)的地圖存儲(chǔ)。
8)

對(duì)半徑為 N 的六邊形布局，當(dāng)N = max(abs(x), abs(y), abs(z)，有 first_column[r] == -N - min(0, r)。最后你訪問(wèn)的會(huì)是 array[r][q + N + min(0, r)]。然而，由于我們可能會(huì)把一些 r < 0 的位置作為起點(diǎn)，因此我們也必須偏移行，有 array[r + N][q + N + min(0, r)]。

如本游戲中，棋盤(pán)為邊界六邊形個(gè)數(shù)為 5 的六角網(wǎng)格布局，生成的坐標(biāo)系存儲(chǔ)代碼如下：

  setHexagonGrid() {
    this.hexSide = 5;
    this.hexSide--;
    for (let q = -this.hexSide; q <= this.hexSide; q++) {
      let r1 = Math.max(-this.hexSide, -q - this.hexSide);
      let r2 = Math.min(this.hexSide, -q + this.hexSide);
      for (let r = r1; r <= r2; r++) {
        let col = q + this.hexSide;
        let row = r - r1;
        if (!this.hexes[col]) {
          this.hexes[col] = [];
        }
        this.hexes[col][row] = this.hex2pixel({ q, r }, this.tileH);
      }
    }
  }

邊界個(gè)數(shù)為 6 的六角網(wǎng)格布局，六邊形總數(shù)為 61。接著，只需要遍歷添加背景即可完成棋盤(pán)的繪制。

  setSpriteFrame(hexes) {
    for (let index = 0; index < hexes.length; index++) {
      let node = new cc.Node("frame");
      let sprite = node.addComponent(cc.Sprite);
      sprite.spriteFrame = this.tilePic;
      node.x = hexes[index].x;
      node.y = hexes[index].y;
      node.parent = this.node;
      hexes[index].spriteFrame = node;
      this.setShadowNode(node);
      this.setFillNode(node);
      this.boardFrameList.push(node);
    }
  }

至此，棋盤(pán)繪制結(jié)束。

方塊的形狀可以千變?nèi)f化，先來(lái)看下本游戲事先約定的 23 種形狀。

在前面六角網(wǎng)格的知識(shí)基礎(chǔ)上，實(shí)現(xiàn)這 23 種形狀并不難。只需要約定好每個(gè)形狀對(duì)應(yīng)的軸坐標(biāo)。

代碼配置如下：

const Tiles = [
  {
    type: 1,
    list: [[[0, 0]]]
  },
  {
    type: 2,
    list: [
      [[1, -1], [0, 0], [1, 0], [0, 1]],
      [[0, 0], [1, 0], [-1, 1], [0, 1]],
      [[0, 0], [1, 0], [0, 1], [1, 1]]
    ]
  },
  {
    type: 3,
    list: [
      [[0, -1], [0, 0], [0, 1], [0, 2]],
      [[0, 0], [1, -1], [-1, 1], [-2, 2]],
      [[-1, 0], [0, 0], [1, 0], [2, 0]]
    ]
  },
  {
    type: 4,
    list: [
      [[0, 0], [0, 1], [0, -1], [-1, 0]],
      [[0, 0], [0, -1], [1, -1], [-1, 1]],
      [[0, 0], [0, 1], [0, -1], [1, 0]],
      [[0, 0], [1, 0], [-1, 0], [1, -1]],
      [[0, 0], [1, 0], [-1, 0], [-1, 1]]
    ]
  },
  {
    type: 5,
    list: [
      [[0, 0], [0, 1], [0, -1], [1, -1]],
      [[0, 0], [1, -1], [-1, 1], [-1, 0]],
      [[0, 0], [1, -1], [-1, 1], [1, 0]],
      [[0, 0], [1, 0], [-1, 0], [0, -1]],
      [[0, 0], [1, 0], [-1, 0], [0, 1]]
    ]
  },
  {
    type: 6,
    list: [
      [[0, -1], [-1, 0], [-1, 1], [0, 1]],
      [[-1, 0], [0, -1], [1, -1], [1, 0]],
      [[0, -1], [1, -1], [1, 0], [0, 1]],
      [[-1, 1], [0, 1], [1, 0], [1, -1]],
      [[-1, 0], [-1, 1], [0, -1], [1, -1]],
      [[-1, 0], [-1, 1], [0, 1], [1, 0]]
    ]
  }
];

由于沒(méi)有涉及方塊出現(xiàn)的概率，這里就簡(jiǎn)單粗暴地用 random 來(lái)實(shí)現(xiàn)方塊隨機(jī)生成。

const getRandomInt = function(min, max) {
  let ratio = cc.random0To1();
  return min + Math.floor((max - min) * ratio);
};

網(wǎng)格和方塊都搞定了，蠻喜歡這種簡(jiǎn)單的 UI 風(fēng)格，非常適合游戲開(kāi)發(fā)的入門(mén)學(xué)習(xí)。接下來(lái)處理游戲交互邏輯。

方塊與棋盤(pán)之間的交互關(guān)系是 Drag 與 Drop ，在 cocos creator 中暫時(shí)沒(méi)發(fā)現(xiàn)有 Drag 相關(guān)的組件，目前是通過(guò) touch 事件來(lái)模擬。在方塊 touchmove 的過(guò)程，需要處理兩件事，第一，檢測(cè)拖拽過(guò)程中方塊是否與棋盤(pán)有交叉，就是游戲里所謂的 碰撞檢測(cè)，cc 有提供相應(yīng)的碰撞組件，但不夠靈活，因?yàn)槲覀円玫降氖欠綁K與棋盤(pán)重合關(guān)系(ps：并不需要完全重合)，所以還是用腳本來(lái)模擬實(shí)現(xiàn)，cc 為此提供了很多 API，主要都與 vec2 有關(guān)。第二，檢測(cè)方塊是否可以落入棋盤(pán)。

方塊與棋盤(pán)其實(shí)都是由正六邊形組合而成，這里有種比較簡(jiǎn)單地方式來(lái)判斷兩者是否有重合部分，即判斷兩個(gè)六邊形圓心的距離，當(dāng)小于設(shè)定值，則認(rèn)為有重合。

這邊簡(jiǎn)單起見(jiàn)，特意將棋盤(pán)與方塊的父節(jié)點(diǎn)的坐標(biāo)系原點(diǎn)設(shè)為同一個(gè)(中心點(diǎn))。cocos 坐標(biāo)系可參考這篇

由于方塊是相對(duì)于它的父級(jí)中心點(diǎn)定位，而它的父級(jí)是相對(duì)于 Canvas 定位，因此可以通過(guò)
cc.pAdd(this.node.position, tile.position) 來(lái)獲取方塊相對(duì)于棋盤(pán)原點(diǎn)的坐標(biāo)值。接著遍歷棋盤(pán)內(nèi)六邊形坐標(biāo)值，來(lái)檢查拖拽進(jìn)入的六邊形與棋盤(pán)哪些存在重合關(guān)系。相關(guān)代碼如下：

  checkCollision(event) {
    const tiles = this.node.children; // this.node 為 方塊的父級(jí)，拖拽改變的是這個(gè)節(jié)點(diǎn)的坐標(biāo)
    this.boardTiles = []; // 保存棋盤(pán)與方塊重合部分。
    this.fillTiles = []; // 保存方塊當(dāng)前重合的部分。
    for (let i = 0; i < tiles.length; i++) {
      const tile = tiles[i];
      const pos = cc.pAdd(this.node.position, tile.position); // pAdd 是cc早期提供的 api，可用 vec2 中向量相加替換
      const boardTile = this.checkDistance(pos);
      if (boardTile) {
        this.fillTiles.push(tile);
        this.boardTiles.push(boardTile);
      }
    }
  },
  checkDistance(pos) {
    const distance = 50;
    const boardFrameList = this.board.boardFrameList;
    for (let i = 0; i < boardFrameList.length; i++) {
      const frameNode = boardFrameList[i];
      const nodeDistance = cc.pDistance(frameNode.position, pos);
      if (nodeDistance <= distance) {
        return frameNode;
      }
    }
  },

在拖拽過(guò)程，實(shí)時(shí)保存棋盤(pán)有重合關(guān)系的六邊形，用于判定方塊是否可以落入棋盤(pán)

只要方塊的個(gè)數(shù)與棋盤(pán)所在區(qū)域可填充部分（棋盤(pán)里面沒(méi)有方塊）數(shù)目一致，則認(rèn)為可以落子。

checkCanDrop() {
    const boardTiles = this.boardTiles; // 當(dāng)前棋盤(pán)與方塊重合部分。
    const fillTiles = this.node.children; // 當(dāng)前拖拽的方塊總數(shù)
    const boardTilesLength = boardTiles.length;
    const fillTilesLength = fillTiles.length;

    // 如果當(dāng)前棋盤(pán)與方塊重合部分為零以及與方塊數(shù)目不一致，則判定為不能落子。
    if (boardTilesLength === 0 || boardTilesLength != fillTilesLength) {
      return false;
    }

    // 如果方塊內(nèi)以及存在方塊，則判定為不能落子。
    for (let i = 0; i < boardTilesLength; i++) {
      if (this.boardTiles[i].isFulled) {
        return false;
      }
    }

    return true;
  },

得到落入與否的判定值后，需要給用戶可以落子的提示。這邊的一個(gè)做法是，在生成棋盤(pán)之前就給每個(gè)棋盤(pán)格子節(jié)點(diǎn)新建一個(gè) name 為 shadowNode 的子節(jié)點(diǎn)。接著只需要修改符合條件的節(jié)點(diǎn)的spriteFrame為當(dāng)前拖拽方塊的spriteFrame，同時(shí)降低透明度即可。代碼如下：

  dropPrompt(canDrop) {
    const boardTiles = this.boardTiles;
    const boardTilesLength = boardTiles.length;
    const fillTiles = this.fillTiles;

    this.resetBoardFrames();
    if (canDrop) {
      for (let i = 0; i < boardTilesLength; i++) {
        const shadowNode = boardTiles[i].getChildByName("shadowNode");
        shadowNode.opacity = 100;
        const spriteFrame = fillTiles[i].getComponent(cc.Sprite).spriteFrame;
        shadowNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
      }
    }
  }

至此，方塊的 touchmove 事件添加完畢。接下來(lái)，需要做的是，拖拽結(jié)束后的相關(guān)邏輯處理。

兩種情況，方塊可以落入，與方塊不能落入。前面已經(jīng)獲取了是否可以落入的判定。那接下來(lái)就是添加相應(yīng)的處理。

可以落入的情況需要做的是在棋盤(pán)添加對(duì)應(yīng)方塊，方塊添加結(jié)束后重新隨機(jī)生成新的方塊。不可以落入則讓拖拽的方塊返回原位置。

在添加方塊上用了跟之前說(shuō)到的落入提示類(lèi)似的方法，給棋盤(pán)內(nèi)每個(gè)格子節(jié)點(diǎn)下新增一個(gè)名為 fillNode 的節(jié)點(diǎn)，方塊落入都跟這個(gè)節(jié)點(diǎn)有關(guān)。

  tileDrop() {
    this.resetBoardFrames();
    if (this.checkCanDrop()) {
      const boardTiles = this.boardTiles;
      const fillTiles = this.fillTiles;
      const fillTilesLength = fillTiles.length;

      for (let i = 0; i < fillTilesLength; i++) {
        const boardTile = boardTiles[i];
        const fillTile = fillTiles[i];
        const fillNode = boardTile.getChildByName("fillNode");
        const spriteFrame = fillTile.getComponent(cc.Sprite).spriteFrame;

        boardTile.isFulled = true;
        fillNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
        this.resetTile();
      }
      this.board.curTileLength = fillTiles.length;
      this.board.node.emit("dropSuccess");
    } else {
      this.backSourcePos();
    }
    this.board.checkLose();
  }

棋盤(pán)有了，也可以判斷方塊是否可以落入棋盤(pán)。接下來(lái)要做的就是消除邏輯的處理，之前說(shuō)，六邊形消除游戲就是俄羅斯方塊的衍生版，其實(shí)就是多了幾個(gè)消除方向，來(lái)看張圖：

如果把這個(gè)棋盤(pán)看成數(shù)組，即從左斜方向依次添加 [0,1,2.....]，最終可以得到如下消除規(guī)則：

const DelRules = [
  //左斜角
  [0, 1, 2, 3, 4],
  [5, 6, 7, 8, 9, 10],
  [11, 12, 13, 14, 15, 16, 17],
  [18, 19, 20, 21, 22, 23, 24, 25],
  [26, 27, 28, 29, 30, 31, 32, 33, 34],
  [35, 36, 37, 38, 39, 40, 41, 42],
  [43, 44, 45, 46, 47, 48, 49],
  [50, 51, 52, 53, 54, 55],
  [56, 57, 58, 59, 60],

  //右斜角
  [26, 35, 43, 50, 56],
  [18, 27, 36, 44, 51, 57],
  [11, 19, 28, 37, 45, 52, 58],
  [5, 12, 20, 29, 38, 46, 53, 59],
  [0, 6, 13, 21, 30, 39, 47, 54, 60],
  [1, 7, 14, 22, 31, 40, 48, 55],
  [2, 8, 15, 23, 32, 41, 49],
  [3, 9, 16, 24, 33, 42],
  [4, 10, 17, 25, 34],

  //水平
  [0, 5, 11, 18, 26],
  [1, 6, 12, 19, 27, 35],
  [2, 7, 13, 20, 28, 36, 43],
  [3, 8, 14, 21, 29, 37, 44, 50],
  [4, 9, 15, 22, 30, 38, 45, 51, 56],
  [10, 16, 23, 31, 39, 46, 52, 57],
  [17, 24, 32, 40, 47, 53, 58],
  [25, 33, 41, 48, 54, 59],
  [34, 42, 49, 55, 60]
];

規(guī)則有了，接著添加消除邏輯，直接看代碼：

  deleteTile() {
    let fulledTilesIndex = []; // 存儲(chǔ)棋盤(pán)內(nèi)有方塊的的索引
    let readyDelTiles = []; // 存儲(chǔ)待消除方塊
    const boardFrameList = this.boardFrameList;
    this.isDeleting = true; // 方塊正在消除的標(biāo)識(shí)，用于后期添加動(dòng)畫(huà)時(shí)，充當(dāng)異步狀態(tài)鎖
    this.addScore(this.curTileLength, true);

    // 首先獲取棋盤(pán)內(nèi)存在方塊的格子信息
    for (let i = 0; i < boardFrameList.length; i++) {
      const boardFrame = boardFrameList[i];
      if (boardFrame.isFulled) {
        fulledTilesIndex.push(i);
      }
    }

    for (let i = 0; i < DelRules.length; i++) {
      const delRule = DelRules[i]; // 消除規(guī)則獲取
      // 逐一獲取規(guī)則數(shù)組與存在方塊格子數(shù)組的交集
      let intersectArr = _.arrIntersect(fulledTilesIndex, delRule);
      if (intersectArr.length > 0) {
        // 判斷兩數(shù)組是否相同，相同則將方塊添加到待消除數(shù)組里
        const isReadyDel = _.checkArrIsEqual(delRule, intersectArr);
        if (isReadyDel) {
          readyDelTiles.push(delRule);
        }
      }
    }

    // 開(kāi)始消除
    let count = 0;
    for (let i = 0; i < readyDelTiles.length; i++) {
      const readyDelTile = readyDelTiles[i];
      for (let j = 0; j < readyDelTile.length; j++) {
        const delTileIndex = readyDelTile[j];
        const boardFrame = this.boardFrameList[delTileIndex];
        const delNode = boardFrame.getChildByName("fillNode");
        boardFrame.isFulled = false;
        // 這里可以添加相應(yīng)消除動(dòng)畫(huà)
        const finished = cc.callFunc(() => {
          delNode.getComponent(cc.Sprite).spriteFrame = null;
          delNode.opacity = 255;
          count++;
        }, this);
        delNode.runAction(cc.sequence(cc.fadeOut(0.3), finished));
      }
    }

    if (count !== 0) {
      this.addScore(count);
      this.checkLose();
    }

    this.isDeleting = false;
  }

三個(gè)方塊都無(wú)法放入棋盤(pán)，則認(rèn)為游戲結(jié)束。

首先得到未填充的棋盤(pán)格子信息，再將三個(gè)方塊逐一放入未填充區(qū)域判斷是否可以放入。代碼如下：

  checkLose() {
    let canDropCount = 0;
    const tiles = this.node.children;
    const tilesLength = tiles.length;
    const boardFrameList = this.board.boardFrameList;
    const boardFrameListLength = boardFrameList.length;

    // TODO: 存在無(wú)效檢測(cè)的情況，可優(yōu)化
    for (let i = 0; i < boardFrameListLength; i++) {
      const boardNode = boardFrameList[i];
      let srcPos = cc.p(boardNode.x, boardNode.y);
      let count = 0;
      if (!boardNode.isFulled) {
        // 過(guò)濾出未填充的棋盤(pán)格子
        for (let j = 0; j < tilesLength; j++) {
          let len = 27; // 設(shè)定重合判定最小間距

          // 將方塊移到未填充的棋盤(pán)格子原點(diǎn)，并獲取當(dāng)前各方塊坐標(biāo)值
          let tilePos = cc.pAdd(srcPos, cc.p(tiles[j].x, tiles[j].y));

          // 遍歷棋盤(pán)格子，判斷方塊中各六邊形是否可以放入
          for (let k = 0; k < boardFrameListLength; k++) {
            const boardNode = boardFrameList[k];
            let dis = cc.pDistance(cc.p(boardNode.x, boardNode.y), tilePos);
            if (dis <= len && !boardNode.isFulled) {
              count++;
            }
          }
        }

        if (count === tilesLength) {
          canDropCount++;
        }
      }
    }

    if (canDropCount === 0) {
      return true;
    } else {
      return false;
    }
  }

計(jì)分規(guī)則千變?nèi)f化，看你需求。一般方塊放入與消除均可加分。

  scoreRule(count, isDropAdd) {
    let x = count + 1;
    let addScoreCount = isDropAdd ? x : 2 * x * x;
    return addScoreCount;
  }

項(xiàng)目屬于入門(mén)級(jí)別，初次接觸 cocos creator 游戲開(kāi)發(fā)，多數(shù)參考了網(wǎng)上一些六邊形開(kāi)源游戲。在此感謝開(kāi)源，項(xiàng)目有融入自己的一些方法，比如處理六角網(wǎng)格那塊，但是消除規(guī)則，還需要接觸更多知識(shí)后才能完善。先寫(xiě)這么一篇入門(mén)級(jí)的，后續(xù)再深入，希望對(duì)一些像我一樣剛接觸游戲開(kāi)發(fā)的人能有一些幫助。后續(xù)可能會(huì)結(jié)合適當(dāng)?shù)睦?，講一些，cocos creator 動(dòng)畫(huà),粒子系統(tǒng),物理系統(tǒng)，webgl等。

源碼

hexagons

六角網(wǎng)格

LBXGame