This is the sixth day of my participation in Gwen Challenge

Then,

In the last article, flip the pieces and increase the health of the character and player. This is the last post on the black and white game, and it mainly introduces the following features:

  1. Own pieces in the middle of a combo attack effect
  2. Simple canvas that hints at combos

Caster combo damage calculation

The damage of a piece is calculated in moving pieces

moveChess: function (row, col) {
  let self = this;
  let character = self.initChess(); // Each time you select a piece to achieve a different character

  let { type } = self.tableArr[row][col];
  let nowMoveType = self.lastMove;
  if (type === 3) {
    if (self.lastMove == 1) {
      self.setChessTypeAction(row, col, {
        type: 1.character: { ...character },
      });
      self.lastMove = 2;
    } else if (self.lastMove == 2) {
      self.setChessTypeAction(row, col, {
        type: 2.character: { ...character },
      });
      self.lastMove = 1;
    }
    self.reversiChess(row, col, nowMoveType);
    // Calculate the damage
    self.computeAttack(nowMoveType, character._attack);
    // Empty the canvas
    self.clearCanvas();
    // Calculate the new locatable positionself.calculateMovableArea(self.lastMove); }}Copy the code

Combo damage counts when looking for your piece

for (let i = row - 1; i >= 0; i--) {
    if(tableArr[i][col].type === chessType && i ! == row -1) {
      // Find valid values and all vertical children of the current value
      if (tableArr[i][col].character._combo) {
        // If the current piece has combo damage, add the damage to it and deduct the health directly.
        self.computeAttack(chessType, tableArr[i][col].character._combo);
      }
      for (let _i = row - 1; _i > i; _i--) {
        self.reversiChessAction(_i, col, chessType);
      }
      break;
    } else if (tableArr[i][col].type === enemyType) {
      continue;
    } else {
      break; }}Copy the code

After calculating the damage, reduce the health of the responding player. When the health of one player reaches 0, the game ends.

computeAttack: function (nowMoveType, attack) {
  let self = this;
  let chessType = nowMoveType;
  let playerBeAttacked;
  if (Number(chessType) === 2) {
    playerBeAttacked = self.player1;
  } else {
    playerBeAttacked = self.player2;
  }
  if (playerBeAttacked._hp - attack > 0) {
    playerBeAttacked._hp -= attack;
  } else {
    playerBeAttacked._hp = 0;
    self.$nextTick(() = >{ self.gameOver(); }); }}Copy the code

Combos prompt Canvas

A piece that can be combos, as measured from the area where it can be landed

movableAreaAction: function(_row, _col, obj, nowRowCol) {
  let self = this;
  let { row, col } = nowRowCol;
  let tableDOM = this.tableProp;
  self.setChessTypeAction(_row, _col, obj);
  // find the current ref
  let _reftd = self.$refs[`reftd${_row}${_col}`] [0];
  let now_reftd = self.$refs[`reftd${row}${col}`] [0];
  // Get the current coordinates
  let pos = _reftd.getBoundingClientRect();
  let now_pos = now_reftd.getBoundingClientRect();
  // Check if there are people
  let _character = JSON.stringify(self.tableArr[row][col].character);
  if(_character ! = ='{}') {
    // If so, tell canvas to draw a line from here to the current position
    // Calculate the relative positionself.beginCanvasAnimation(pos, now_pos); }}Copy the code

Draw side lines at the calculated starting and ending points, and also remember to empty the canvas.

beginCanvasAnimation: function(pos, now_pos) {
  let self = this;
  let ctx = self.context;
  let tableDOM = self.tableProp;
  let x1 = pos.left-tableDOM.left+pos.width/2;
  let y1 = pos.top-tableDOM.top+pos.height/2;
  let x2 = now_pos.left-tableDOM.left+now_pos.width/2;
  let y2 = now_pos.top-tableDOM.top+now_pos.height/2;

  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

clearCanvas: function() {
  let self = this;
  self.context.clearRect(0.0, self.$refs.canvas.width, self.$refs.canvas.height);
}
Copy the code

The final result

conclusion

This is the end of black and white, and there are many more additions to the game. After that, you can add character skills, you can add action cards, to add the playability of the black and white. If you are interested in this game you can check it out here.