五子棋JavaScript对战 - 重温经典游戏

前端

2023-07-14 04:33:33

五子棋：让经典焕发新生的JavaScript实现

简介

五子棋，一款古老而令人着迷的两人对战游戏，现在借助JavaScript，您可以轻松地将它带到您的计算机或移动设备上。本博客将引导您一步一步地构建一个完整的五子棋游戏，包括游戏规则、棋盘设计、玩家交互，甚至人工智能（AI）实现。

五子棋规则

五子棋的规则很简单，但要精通却具有挑战性。双方轮流在15x15格的棋盘上放置自己的棋子，目标是首先将五个棋子连成一条直线（横向、纵向或斜向）。连成五子者获胜。

棋盘设计

首先，我们需要设计我们的棋盘。我们将使用HTML和CSS创建棋盘，并使用Canvas元素来绘制网格线和棋子。

HTML和CSS

<canvas id="canvas" width="600" height="600"></canvas>

#canvas {
  background-color: black;
}

绘制棋盘

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "white";
ctx.fillRect(0, 0, 600, 600);

for (let i = 0; i < 15; i++) {
  ctx.moveTo(0, i * 40);
  ctx.lineTo(600, i * 40);

  ctx.moveTo(i * 40, 0);
  ctx.lineTo(i * 40, 600);
}

ctx.stroke();

玩家交互

现在，我们需要处理玩家交互。当玩家点击棋盘上空的位置时，需要放置一枚棋子。

canvas.addEventListener("click", (e) => {
  // 获取鼠标点击位置
  const x = e.clientX - canvas.getBoundingClientRect().left;
  const y = e.clientY - canvas.getBoundingClientRect().top;

  // 将点击位置转换为棋盘坐标
  const i = Math.floor(x / 40);
  const j = Math.floor(y / 40);

  // 检查位置是否空
  if (board[i][j] === 0) {
    // 放置棋子
    board[i][j] = player;
    drawPiece(i, j, player);

    // 切换玩家
    player = (player === 1) ? 2 : 1;
  }
});

人工智能实现

为了让游戏更具挑战性，我们将实现AI作为玩家之一。我们使用Alpha-Beta剪枝算法，这是一种高效的搜索算法，用于评估所有可能的下一步棋并选择最佳棋步。

function alphaBeta(depth, alpha, beta, maximizingPlayer) {
  // 终止条件
  if (depth === 0 || game结束) {
    return evaluateBoard();
  }

  // 生成所有可能的下一步棋
  const moves = generateMoves();

  // 最大化玩家
  if (maximizingPlayer) {
    // 初始化最佳分数
    let bestScore = -Infinity;

    // 遍历所有可能下一步棋
    for (const move of moves) {
      // 执行下一步棋
      makeMove(move);

      // 计算当前分数
      const score = alphaBeta(depth - 1, alpha, beta, false);

      // 更新最佳分数
      bestScore = Math.max(bestScore, score);

      // Alpha-Beta剪枝
      if (bestScore >= beta) {
        undoMove(move);
        return bestScore;
      }

      // 更新alpha值
      alpha = Math.max(alpha, bestScore);

      // 撤销执行的棋步
      undoMove(move);
    }

    return bestScore;
  } else {
    // 初始化最佳分数
    let bestScore = Infinity;

    // 遍历所有可能下一步棋
    for (const move of moves) {
      // 执行下一步棋
      makeMove(move);

      // 计算当前分数
      const score = alphaBeta(depth - 1, alpha, beta, true);

      // 更新最佳分数
      bestScore = Math.min(bestScore, score);

      // Alpha-Beta剪枝
      if (bestScore <= alpha) {
        undoMove(move);
        return bestScore;
      }

      // 更新beta值
      beta = Math.min(beta, bestScore);

      // 撤销执行的棋步
      undoMove(move);
    }

    return bestScore;
  }
}