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

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

继续

之前已经算出了可以下子的区域，这次要做的是下子结束之后要把自己落子之间的对方的子都要翻转成为自己的子。

开始

这个和我想要做的翻转棋还差了点东西。所以除了计算翻转棋子，我们还要做以下几个事：

添加下子人物属性
增加玩家血量

先计算翻转棋子

这一步和计算下子区域基本相同，基本算法和上面的差不多。也是需要计算上下左右以及斜左右上下，八个方向。部分代码如下

  // 当前下子的位置和当前下子的类型
  // 寻找当前下子类型相同的上下左右，中间有不同类型的子就翻转
  // 遇到空直接返回false
  // 为其他类型的子继续查找
  // 为相同类型的子就跳出，且翻转同一行或者同一列的子
  // 上
  let self = this;
  let tableArr = self.tableArr;
  // 边界
  let colLen = self.tableColNum;
  let rowLen = self.tableRowNum;

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

  // 上下左右
  /**
   * 向上找
   * 不是自己的子且连续则继续向上找
   * 遇到是自己的子停止
   * 是空位置直接break
   * 是边界直接break
   */
  // col不变 row-1 判断边界情况>0
  // 上下左右判断方法一样，只是搜索规则不一样
  for (let i = row - 1; i >= 0; i--) {
    if (tableArr[i][col].type === chessType && i !== row - 1) {
      // 寻找有效值和当前值的所有纵向的子，进行值的翻转
      for (let _i = row - 1; _i > i; _i--) {
        self.reversiChessAction(_i, col, chessType);
      }
      break;
    } else if (tableArr[i][col].type === enemyType) {
      continue;
    } else {
      break;
    }
  }
  // ...
  // ... 剩余7个方向
复制代码

添加人物属性

下面创建一个蜀国的类别，具有一定的攻击力和连击能力。攻击效果和连击能力将在第三部分写。

// 人物类
// 姓名，攻击力，血量
class Characters {
  constructor(name, attack, combo) {
    this._name = name || "soldier";
    this._attack = attack || 1;
    this._combo = combo || 1;
  }

  get name() {
    return this._name;
  }

  get attack() {
    return this._attack;
  }

  get combo() {
    return this._combo;
  }
}

// 不同组别的人物
class ShuGroup extends Characters {
    constructor(name, attack, combo) {
        super(name, attack, combo);
        this._group = 'shu';
    }
}

// 创建一下人物
const Liubei = new ShuGroup('liubei', 6, 10);
const Guanyu = new ShuGroup('guanyu', 12, 10);
const Zhangfei = new ShuGroup('zhangfei', 13, 5);
复制代码

增加玩家血量

这部分比较简单，首先创建一下玩家对象，给玩家一个血量值就可以了。

class Player {
    constructor(name, hp, chessType) {
      this._name = name || "player";
      this._hp = hp || 120;
      this._chessType = chessType; // 不能为空，且一个为1一个为2
    }

    get name() {
      return this._name;
    }

    get hp() {
      return this._hp;
    }

    get chessType() {
      return this._chessType;
    }
}
复制代码

给血量减少时加个渐变效果。

.player {
    position: relative;
    width: 30em;
    background-color: gray;
    height: 20px;
    border-radius: 5px;
    margin: 20px auto;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    color: white;
}

.player-hp {
    position: absolute;
    top: 0;
    left: 0;
    width: 30em;
    height: 20px;
    background-color: red;
    transition: width .5s ease-in-out;
    -moz-transition: width .5s ease-in-out; /* Firefox 4 */
    -webkit-transition: width .5s ease-in-out; /* Safari 和 Chrome */
    -o-transition: width .5s ease-in-out; /* Opera */
}

.player-hp--ratio {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
复制代码