进行四排 - 第2部分：开始-DEV365 开发者社区

介绍

在上一篇博客文章中，您设置了项目创建项目的文件结构的先决条件。

现在让我们开始实现游戏的逻辑。

游戏规则

四联行是在6（行）x 7（列）机架板上玩的两人游戏，该目标是成为第一个与垂直，水平或垂直线形成垂直，水平或垂直线的玩家您自己的四个令牌。

符合目标的球员将获胜。如果董事会完全填补并且没有赢家，则游戏以平局结束。

每个玩家放下的每个令牌都落在列中最低的可用空间。

准备实施逻辑

常数

现在我们知道了规则，现在我们将写下我们将在整个项目中使用的常数值。

创建一个新的JavaScript文件，称为index.js。

现在将以下内容添加到您刚刚创建的文件中：

export const GameStatus = {
  IN_PROGRESS: "in-progress",
  START: "start",
  WIN: "win",
  DRAW: "draw",
};

export const MoveStatus = {
  INVALID: "invalid",
  WIN: "win",
  SUCCESS: "success",
  DRAW: "draw",
};

export const PlayerColor = {
  NONE: "none",
  YELLOW: "yellow",
  RED: "red",
};

export const BoardDimensions = {
  ROWS: 6,
  COLUMNS: 7,
  WIN_LINE_LENGTH: 4,
};

export const BoardToken = {
  NONE: 0,
  YELLOW: 1,
  RED: 2,
};

设置状态机器

现在，我们将创建一台代表四英寸系列游戏的状态计算机。

在/src中创建一个名为FourInARowGame.js的新的JavaScript文件，然后添加以下内容：

import * as Constants from "./constants/index.js";

export default class FourInARowGame {
  // State machine code is going to be here!
}

简单字段

这些行引用了我们在src/constants/index.js中写的常数，使其可用于FourInARowGame.js。它还创建了一个名为FourInARowGame的类。

要进行游戏，我们需要跟踪以下内容：

目前游戏的状态是为了知道游戏是否已经结束以及它是否结束，如何结束。
当前的转弯是为了弄清下一个搬迁时要放下哪个球员的令牌
启动的彩色播放器令牌，以帮助确定谁可以开始游戏并弄清楚哪个玩家的转弯是随着时间的流逝。
董事会状态

让我们将这些字段添加到我们的FourInARowGame类：

export default class FourInARowGame {
  startingColor;
  currentTurn;
  status;
  currentBoard;

  // More to come...
}

关于起始颜色，没有任何关于启动哪种颜色的规则，但我们将其设置为yellow，默认情况下保持简单：

export default class FourInARowGame {
  // ..

  constructor() {
    this.startingColor = Constants.PlayerColor.YELLOW;
  }
}

接下来是currentTurn和status。由于游戏刚刚开始，我们将使currentTurn的值与
相同的值 startingColor和status至GameStatus.START：

初始化董事会

export default class FourInARowGame {
  // ..

  constructor() {
    this.startingColor = Constants.PlayerColor.YELLOW;
    this.currentTurn = this.startingColor;
    this.status = Constants.GameStatus.START;
  }
}

现在使用currentBoard字段，我们希望最初将其值设置为空板；四英寸的游戏中的一个板有6行和7列（总共42个位置）。

我们将使用数组数组来表示JavaScript。

第一步是在FourInARowGame类中创建静态方法，该方法为我们创建一个空板：

export default class FourInARowGame {
  // ..

  static createBoard() {
    let board = new Array(Constants.BoardDimensions.ROWS);

    for (let i = 0; i < Constants.BoardDimensions.ROWS; i++) {
      board[i] = new Uint8Array(Constants.BoardDimensions.COLUMNS);
      board[i].fill(Constants.BoardToken.NONE);
    }

    return board;
  }
}

请注意，封闭环中使用的Uint8Array代替Array。这是因为JavaScript中的数字是
默认存储为Number数据类型，该数据类型存储64位浮点数。

我们只会在每个董事会位置使用3个可能的数字，因此Uint8更有意义，这是我们可能数字范围适合的最小数字数据类型。

考虑到板上有42个位置，这可以节省内存。

现在我们可以完成初始化currentBoard字段：

export default class FourInARowGame {
  constructor() {
    // ..

    this.currentBoard = FourInARowGame.createBoard();
  }
}

我们现在准备实现播放器移动时运行的逻辑。

我们将在下一篇文章中执行此操作！回头见！ ð