一个简易黑白棋游戏（三）

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

接着

上一篇介绍了，翻转棋子，增加人物以及玩家血量。 这是讲述这个黑白棋的最后一篇，这篇主要介绍一下以下几个功能点：

1. 自己的棋子中间有连击攻击效果
2. 提示连击效果的简易canvas

落子连击伤害计算

落子的伤害，在移动棋子中计算

moveChess: function (row, col) {
  let self = this;
  let character = self.initChess(); // 每次选择棋子落子实现人物不同

  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);
    // 计算伤害
    self.computeAttack(nowMoveType, character._attack);
    // 清空画布
    self.clearCanvas();
    // 计算新的可落子位置
    self.calculateMovableArea(self.lastMove);
  }
}

连击伤害在寻找自己的棋子时计算

for (let i = row - 1; i >= 0; i--) {
    if (tableArr[i][col].type === chessType && i !== row - 1) {
      // 寻找有效值和当前值的所有纵向的子，进行值的翻转
      if (tableArr[i][col].character._combo) {
        // 如果当前棋子有combo伤害，把伤害加上，直接扣除血量？
        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;
    }
}

计算伤害后减少响应玩家的血量，当一方玩家血量为0时，游戏结束。

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();
    });
  }
}

连击提示Canvas

从可以落子的区域计算，可以进行连击的棋子

movableAreaAction: function(_row, _col, obj, nowRowCol) {
  let self = this;
  let { row, col } = nowRowCol;
  let tableDOM = this.tableProp;
  self.setChessTypeAction(_row, _col, obj);
  // 找到当前的ref
  let _reftd = self.$refs[`reftd${_row}${_col}`][0];
  let now_reftd = self.$refs[`reftd${row}${col}`][0];
  // 获取当前坐标
  let pos = _reftd.getBoundingClientRect();
  let now_pos = now_reftd.getBoundingClientRect();
  // 判断是不是有人物
  let _character = JSON.stringify(self.tableArr[row][col].character);
  if(_character !== '{}') {
    // 如果有，告诉canvas从这里划线，划到现有位置
    // 计算相对位置
    self.beginCanvasAnimation(pos, now_pos);
  }
}

在计算出来的起点和终点位置画上支线，也要记得清空画布。

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);
}

最终效果

结束语

这个黑白棋到这里就告一段落了，这个游戏还有许多和添加的地方。 做到后面可以添加人物的技能，可以添加行动卡牌，来添加这个黑白棋的可玩性。 如果对这个游戏有兴趣可以到这里看看。