This is the fourth day of my participation in Gwen Challenge

The cause of

Recently, I was hooked on a game, Hunter: Battle of the arena. Because very like hunter this cartoon, so played on this game. It is also the first time to contact the game of black and white. This game added some mission attributes and skills on the basis of ordinary black and white chess, making the game play diversified, personally feel quite interesting.

introduce

Black and white, also known as flip chess. Black and white game rules are simple, the opening in the middle of the board there are 4 pieces, black and white chess points have played chess, and flip under the chess pieces and the horizontal and vertical direction of the rest of the other side of his pieces in the middle of the chess, and finally to the chess board whose pieces to judge the outcome.

start

First we need to identify the parts that need to be done:

  • Draw a checkerboard
  • Draw black and white chess pieces
  • Flip effect of pieces
  • Calculate the region that can be subdivided

The board

The chessboard part is very simple, mainly by the table to carry out the layout, but also more convenient. I implemented a 6×6 board because I was playing a 6×6 board.

<table>
    <tbody>
      <tr v-for="(row, rowIndex) in tableArr" :index="rowIndex">
        <td>
          <div class="element">
            <div>pieces</div>
          </div>
        </td>
      </tr>
    </tbody>
</table>
Copy the code
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;
},
Copy the code

Black and white pieces

The black and white pieces only need to be positioned in the middle of the table. Because black and white looked too dull, I chose two other complementary colors, blue and orange, which also looked more comfortable.

.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;
}
Copy the code

Flip effect of pieces

Simple Transition does the flip. This is done by adding the Rotate property to both the black and white pieces. Because the chess pieces are distinguished by background colors, the background color is used as the animation object.

.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;
}
Copy the code

Calculate the region that can be subdivided

This part is a little more complicated. The rule of black and white is that there must be an opponent’s piece between your piece and your piece. My method is to calculate a total of eight directions, namely up and down, left and right, oblique left and right, oblique left and down, oblique right.

calculateMovableArea: function (nowMoveType) {
  let self = this;
  // Clear the previous subregion
  self.clearMovableArea();
  // Is it black or white
  // The end of each piece is not itself
  // The end of each hypotenuse is not itself
  // Satisfy the above conditions in 8 directions
  // Check the position of each piece, find the same type of piece, and then find the position of the piece.
  let tableArr = this.tableArr;
  tableArr.map((row, rowIndex) = > {
    row.map((chess, colIndex) = > {
      if (chess.type === nowMoveType) {
        // Find the same child as the current one
        self.findCouldMoveArea(rowIndex, colIndex, nowMoveType);
      }
      return chess;
    });
    return row;
  });
},

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

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

  // up, down, left and right
  /** * search up * is its child or directly false * is not its child continue to search up * is empty position returns true and not adjacent child and critical child cannot be empty * is boundary returns false */
  // col unchanged row-1 determines the boundary condition >0
  // The search rules are different
  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; }}// ...
  / /... The remaining seven directions
 }
Copy the code

The end result is something like this.