本文通过实现一个基本的五子棋游戏，展示了如何使用HTML、CSS和JavaScript来构建一个简单的交互式游戏。虽然这里提供的实现较为基础，但它为理解和进一步开发更复杂的版本打下了良好的基础。

未来还可以考虑添加以下功能：

1. 更复杂的AI算法，如Minimax算法或Alpha-Beta剪枝。
2. 多个难度级别的选择。
3. 用户界面改进，如动画效果和音效。
4. 在线多人游戏支持。

全部运行代码：

五子棋游戏的基本步骤：

1. 初始化游戏界面：

   • 创建棋盘画布（Canvas）。
   • 设置画布的尺寸和样式。
   • 绘制棋盘。

2. 管理游戏状态：

   • 创建数据结构来存储棋盘的状态。
   • 定义玩家顺序和当前玩家。
   • 管理游戏是否结束。

3. 玩家交互：

   • 监听鼠标点击事件。
   • 计算点击位置对应的棋盘坐标。
   • 验证点击位置是否合法。
   • 更新棋盘状态，并绘制棋子。

4. 电脑AI：

   • 实现简单的AI算法，如随机选择落子位置。
   • 更新棋盘状态，并绘制棋子。

5. 胜负判定：

   • 检查是否有玩家获胜。
   • 如果有玩家获胜，则显示胜利消息，并提供重新开始游戏的选项。

6. 游戏控制：

   • 提供重新开始游戏的功能。
   • 清除画布，重置游戏状态。

代码剖析：

1. 初始化游戏界面

// 获取画布元素
const canvas = document.getElementById('board');
const context = canvas.getContext('2d');

// 设置画布尺寸
canvas.width = 450; // 15格 * 30px每格 + 15px边距
canvas.height = 450; // 同上

// 定义棋盘格子的大小
const gridSize = 30;
const boardSize = 15;

// 绘制棋盘
function drawBoard() {
  context.strokeStyle = '#000';
  context.lineWidth = 1;
  
  // 绘制垂直线
  for (let i = 0; i <= boardSize; i++) {
    context.beginPath();
    context.moveTo(15 + i * gridSize, 15); // 增加15px边距
    context.lineTo(15 + i * gridSize, boardSize * gridSize + 15); // 增加15px边距
    context.stroke();
  }
  
  // 绘制水平线
  for (let i = 0; i <= boardSize; i++) {
    context.beginPath();
    context.moveTo(15, 15 + i * gridSize); // 增加15px边距
    context.lineTo(boardSize * gridSize + 15, 15 + i * gridSize); // 增加15px边距
    context.stroke();
  }
}

// 调用绘制函数
drawBoard();

2. 管理游戏状态

// 创建数据结构来存储棋盘的状态
let board = Array.from({length: boardSize}, () => Array(boardSize).fill(null));

// 定义玩家顺序和当前玩家
let currentPlayer = 'black';

// 游戏是否结束
let gameEnded = false;

// 重置游戏
function resetGame() {
  board = Array.from({length: boardSize}, () => Array(boardSize).fill(null));
  currentPlayer = 'black';
  gameEnded = false;
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawBoard();
}

3. 玩家交互

// 添加鼠标点击事件监听器
canvas.addEventListener('click', (event) => {
  if (!gameEnded && currentPlayer === 'black') { // 只有在游戏未结束且当前玩家是黑方时才允许点击
    const x = Math.floor((event.offsetX - 15) / gridSize); // 减去15px边距
    const y = Math.floor((event.offsetY - 15) / gridSize); // 减去15px边距
    
    if (board[x][y] === null) {
      drawChess(x * gridSize + 15, y * gridSize + 15, currentPlayer); // 加上15px边距
      board[x][y] = currentPlayer;
      
      if (checkWin(x, y, currentPlayer)) {
        gameEnded = true;
      } else {
        currentPlayer = 'white'; // 切换到白方
        computerMove(); // 电脑自动下棋
      }
    }
  }
});

// 绘制棋子
function drawChess(x, y, color) {
  context.fillStyle = color;
  context.beginPath();
  context.arc(x, y, 13, 0, Math.PI * 2, false);
  context.fill();
}

// 检查是否有五个连续的棋子
function checkWin(x, y, player) {
  // 这里可以实现一个简单的检查方法
  // 例如，检查行、列、对角线上是否有五个连续的棋子
  // 本例中省略具体实现
  return false;
}

4. 电脑AI

// 电脑自动下棋
function computerMove() {
  if (!gameEnded && currentPlayer === 'white') {
    let bestMove = findBestMove();
    if (bestMove) {
      drawChess(bestMove.x * gridSize + 15, bestMove.y * gridSize + 15, currentPlayer); // 加上15px边距
      board[bestMove.x][bestMove.y] = currentPlayer;
      
      if (checkWin(bestMove.x, bestMove.y, currentPlayer)) {
        gameEnded = true;
      } else {
        currentPlayer = 'black'; // 切换到黑方
      }
    }
  }
}

// 找到最佳移动位置
function findBestMove() {
  // 简单的随机选择一个空位
  const availableMoves = [];
  for (let x = 0; x < boardSize; x++) {
    for (let y = 0; y < boardSize; y++) {
      if (board[x][y] === null) {
        availableMoves.push({x, y});
      }
    }
  }
  
  return availableMoves[Math.floor(Math.random() * availableMoves.length)];
}

5. 胜负判定

// 检查是否有五个连续的棋子
function checkWin(x, y, player) {
  // 检查行
  let count = 1;
  for (let i = 1; i < 5; i++) {
    if (x - i >= 0 && board[x - i][y] === player) count++;
    if (x + i < boardSize && board[x + i][y] === player) count++;
  }
  
  // 检查列
  for (let i = 1; i < 5; i++) {
    if (y - i >= 0 && board[x][y - i] === player) count++;
    if (y + i < boardSize && board[x][y + i] === player) count++;
  }
  
  // 检查正对角线
  for (let i = 1; i < 5; i++) {
    if (x - i >= 0 && y - i >= 0 && board[x - i][y - i] === player) count++;
    if (x + i < boardSize && y + i < boardSize && board[x + i][y + i] === player) count++;
  }
  
  // 检查反对角线
  for (let i = 1; i < 5; i++) {
    if (x - i >= 0 && y + i < boardSize && board[x - i][y + i] === player) count++;
    if (x + i < boardSize && y - i >= 0 && board[x + i][y - i] === player) count++;
  }
  
  return count >= 5;
}

6. 游戏控制

// 胜利消息
function showVictoryMessage(player) {
  alert(`玩家 ${player} 获胜！`);
  resetGame();
}