使用HTML5 Canvas和JavaScript开发五子棋游戏-代码聚汇网

使用HTML5 Canvas和JavaScript开发五子棋游戏

Terminucia

1. 从零开始搭建五子棋游戏

五子棋作为一款经典的双人对弈游戏，其规则简单却蕴含无限策略可能。最近我在家里搭建了一个简易的五子棋游戏平台，整个过程既充满乐趣又富有挑战性。不同于商业游戏产品，自己动手实现五子棋不仅能完全掌控游戏体验，还能深入理解游戏背后的逻辑机制。

这个项目特别适合编程初学者或棋类爱好者尝试，通过约200行左右的代码就能实现基础功能。我选择使用HTML5 Canvas作为显示界面，JavaScript处理游戏逻辑，这种组合既保证了跨平台兼容性，又能快速看到效果。整个开发过程大约花费了一个周末的时间，但收获的成就感远超预期。

2. 游戏核心架构设计

2.1 棋盘与棋子表示方案

游戏的核心数据结构是15×15的二维数组，每个元素代表棋盘上的一个交叉点。空位用0表示，黑子用1，白子用2。这种表示法简单直观，便于进行胜负判断：

javascript复制const boardSize = 15;
let board = Array(boardSize).fill().map(() => Array(boardSize).fill(0));

棋盘绘制采用Canvas API，通过计算确定每个交叉点的像素坐标。关键参数包括：

棋盘边距：30px
格子间距：40px
棋子半径：18px

这些参数经过多次调试确定，既保证了在小屏幕上显示完整，又确保触控操作时有足够的目标区域。

2.2 游戏状态管理

游戏采用简单的状态机模型，包含以下状态：

等待黑方落子
等待白方落子
游戏结束（某方获胜或平局）

状态转换通过事件驱动，每次有效落子后检查是否满足胜利条件。为提高响应速度，胜负判断算法采用方向向量法，从最后落子位置向四个方向（水平、垂直、两对角线）延伸检查。

3. 核心算法实现细节

3.1 胜负判断优化算法

传统五子棋的胜负判断需要全盘扫描，效率较低。我实现的优化算法只检查当前落子周围可能形成五连珠的区域：

javascript复制function checkWin(x, y, color) {
  const directions = [
    [1, 0], [0, 1], [1, 1], [1, -1] // 水平、垂直、对角线
  ];
  
  return directions.some(([dx, dy]) => {
    let count = 1; // 当前落子本身
    
    // 正向检查
    for (let i = 1; i < 5; i++) {
      const nx = x + dx * i, ny = y + dy * i;
      if (nx < 0 || nx >= boardSize || ny < 0 || ny >= boardSize || board[nx][ny] !== color) break;
      count++;
    }
    
    // 反向检查
    for (let i = 1; i < 5; i++) {
      const nx = x - dx * i, ny = y - dy * i;
      if (nx < 0 || nx >= boardSize || ny < 0 || ny >= boardSize || board[nx][ny] !== color) break;
      count++;
    }
    
    return count >= 5;
  });
}

这种局部检查方法将时间复杂度从O(n²)降低到O(1)，在低端设备上也能流畅运行。

3.2 落子有效性验证

为防止重复落子和越界操作，每次点击后需要执行以下验证：

坐标转换：将鼠标点击位置转换为棋盘坐标
边界检查：确保坐标在0-14范围内
空位检查：目标位置必须未被占据

javascript复制function isValidMove(x, y) {
  return x >= 0 && x < boardSize && 
         y >= 0 && y < boardSize &&
         board[x][y] === 0;
}

4. 界面交互优化技巧

4.1 视觉反馈增强

为提升用户体验，我添加了以下视觉效果：

悬停提示：鼠标悬停时显示半透明预览棋子
落子动画：棋子下落时的缓动效果
胜利高亮：获胜的五颗棋子会闪烁提示

这些细节看似简单，却能显著提升游戏质感。动画实现使用requestAnimationFrame，确保流畅性：

javascript复制function animatePiece(ctx, x, y, color, progress) {
  const radius = progress * pieceRadius;
  drawPiece(ctx, x, y, color, radius);
  if (progress < 1) {
    requestAnimationFrame(() => animatePiece(ctx, x, y, color, progress + 0.1));
  }
}

4.2 触摸屏适配方案

针对移动设备，我做了特殊处理：

禁用默认触摸行为：防止页面滚动
增加点击区域：将每个交叉点周围10px设为有效区域
长按识别：超过300ms的按压视为无效操作，避免误触

javascript复制canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  // 增加触摸点识别逻辑
}, {passive: false});

5. 项目扩展与进阶方向

基础版本完成后，可以考虑以下增强功能：

AI对战模式：实现简单的评分算法，评估每个空位的潜在价值

javascript复制function evaluatePosition(x, y, color) {
  // 评估四个方向的潜在连珠可能性
  // 返回综合评分
}

网络对战：使用WebSocket实现双人在线对弈
游戏回放：记录棋谱并支持复盘功能
规则扩展：支持禁手规则、三三禁手等专业规则

我在实现AI模块时发现，即使是简单的贪心算法（总是选择当前最优落子），也能提供不错的挑战性。更复杂的Minimax算法配合Alpha-Beta剪枝，可以进一步提升AI水平。