一个简易黑白棋游戏（一）-一一网

这是我参与更文挑战的第4天，活动详情查看：更文挑战

起因

最近迷上了一款游戏，猎人：斗技场之战。因为很喜欢猎人这部动漫，所以玩上了这款游戏。也是第一次接触黑白棋这个游戏。这个游戏在普通的黑白棋基础上加了一些任务属性以及技能的玩法，使得这个游戏玩法多样化了，个人觉得挺有意思的。

介绍

黑白棋，也叫翻转棋。黑白棋游戏规则简单，开局在棋盘中间存在4子，黑白棋分先后下棋，并翻转所下棋子与其横纵斜方向上其余夹在自己棋子中间的对方棋子，最后以棋盘上谁的棋子多来判断胜负。

开始

首先我们需要确定一下需要做的部分：

画一个棋盘
画黑白棋子
棋子的翻转效果
计算可以下子的区域

棋盘

棋盘部分很简单，主要是由table来进行布局，也比较方便。我实现的是6×6的棋盘，因为我玩的游戏也是6×6棋盘。

<table>
    <tbody>
      <tr v-for="(row, rowIndex) in tableArr" :index="rowIndex">
        <td>
          <div class="element">
            <div>棋子</div>
          </div>
        </td>
      </tr>
    </tbody>
</table>
复制代码

initChessDesk: function () {
  let tableArr = createArray(6, 6);
  tableArr[2][2].type = 1;
  tableArr[2][3].type = 2;
  tableArr[3][2].type = 2;
  tableArr[3][3].type = 1;
  this.tableArr = tableArr;
},
复制代码

黑白棋子

黑白棋子只需要定位到表格中间就可以了。因为黑白看上去太单调了，所以我选择了另外两个互补色，蓝色和橙色，看上去也舒服一些。

.chess {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.chess-orange {
    background-color: #f39801;
}

.chess-blue {
    background-color: #0267b5;
}
复制代码

棋子的翻转效果

简单的transition就可以实现翻转效果。给黑白棋子都加上rotate属性就可以实现了。因为用背景色区分棋子，所以用背景色作为动画对象。

.chess-orange {
    background-color: #f39801;
    transform: rotateY(0deg);
}

.chess-blue {
    background-color: #0267b5;
    transform: rotateY(180deg);
}
.chess-rotate {
    transition: transform 400ms ease-in-out, background 0ms 200ms;
}
复制代码

计算可以下子的区域

这个部分稍微复杂一点，黑白棋的规则可以下子的区域是，自己下的子和自己的子之间必须要有对手的子。我的方法是一共计算八个方向，即上下左右，斜左上，斜右上，斜左下，斜右下。

calculateMovableArea: function (nowMoveType) {
  let self = this;
  // 先清除之前的可下子区域
  self.clearMovableArea();
  // 现在的下子的是黑还是白
  // 每一颗棋子的上下左右的尽头不是自己
  // 每一颗的斜边尽头不是自己
  // 满足8个方向的上述条件可下子
  // 先遍历每个棋子的位置，找到棋子相同类型棋子，再寻找可以落子的位置。
  let tableArr = this.tableArr;
  tableArr.map((row, rowIndex) => {
    row.map((chess, colIndex) => {
      if (chess.type === nowMoveType) {
        // 找到当前已下的相同子
        self.findCouldMoveArea(rowIndex, colIndex, nowMoveType);
      }
      return chess;
    });
    return row;
  });
},

findCouldMoveArea: function (row, col, chessType) {
  let self = this;
  let tableArr = self.tableArr;
  // 边界
  let colLen = self.tableColNum;
  let rowLen = self.tableRowNum;

  let enemyType = chessType === 1 ? 2 : 1;

  // 上下左右
  /**
   * 向上找
   * 是自己的子或直接false
   * 不是自己的子继续向上找
   * 是空位置返回true且不是临近的子且临界子不能为空
   * 是边界返回false
   */
  // col不变 row-1 判断边界情况>0
  // 上下左右判断方法一样，只是搜索规则不一样
  for (let i = row - 1; i >= 0; i--) {
    if (
      tableArr[i][col].type === chessType ||
      tableArr[row - 1][col].type === 0 ||
      tableArr[row - 1][col].type === 3
    ) {
      break;
    } else if (tableArr[i][col].type === enemyType) {
      continue;
    } else {
      self.movableAreaAction(i, col, { type: 3, reversal: false }, { row, col });
      break;
    }
  }
  // ...
  // ... 剩余七个方向
 }
复制代码