3步搞定五子棋游戏在线玩 避坑实战项目
版本升级后 API 全变了，以前能跑的 Canvas 绘图代码现在直接报错，这种痛谁懂？别急着翻文档，咱们直接上实战项目。今天不整虚的，用原生 JavaScript 加 Canvas，从零手写一个五子棋游戏在线玩的小程序。不用任何框架，不用 npm install，打开浏览器就能跑。这不仅是练手，更是理解前端交互逻辑的最佳切入点。很多初学者卡在“想做一个网页游戏”这一步，其实核心就三块：棋盘绘制、落子逻辑、胜负判断。搞定这三块，你的第一个五子棋游戏在线玩作品就诞生了。
1. 项目目标：为什么选五子棋
做前端实战项目，选什么题材很关键。太简单的没成就感，太复杂的劝退。五子棋是最佳平衡点。
为什么是它？
- 规则简单：黑白交替，连五即胜。不需要复杂的 AI 算法（初期），适合入门。
- 交互直观：鼠标点哪里，棋子落哪里。视觉反馈即时，容易建立成就感。
- 技术覆盖全：涉及 DOM 操作、Canvas 绘制、事件监听、状态管理。这些是前端基本功。
我们要实现的功能清单：
- 静态棋盘：15x15 的标准棋盘，带坐标线。
- 动态落子：鼠标点击格子，生成黑/白棋子，交替进行。
- 胜负判定：实时检测横、竖、斜四个方向是否有五子连珠。
- 重开一局：清空棋盘，重置状态。
注意：这里我们不写 AI。AI 算法（如极小极大算法）是进阶内容，会分散初学者对基础逻辑的注意力。先把基础打牢，再去挑战 AI。
2. 目录结构：极简主义
既然要在线玩，我们就用单文件策略，方便部署和调试。后续如果要扩展，再拆分模块。
gomoku-online/
├── index.html # 主页面，包含 HTML 结构
├── style.css # 样式文件，美化界面
└── script.js # 核心逻辑，所有 JS 代码
index.html 核心结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>五子棋游戏在线玩</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><h1>五子棋游戏在线玩</h1><p id="status">当前玩家：黑棋</p><button id="restartBtn">重开一局</button><!-- Canvas 容器，固定宽高 --><canvas id="board" width="600" height="600"></canvas></div><script src="script.js"></script>
</body>
</html>
style.css 关键点：
- 居中布局，让棋盘看起来更专业。
- 背景色设为木色或浅灰，模拟真实棋盘质感。
- 按钮悬停效果，提升交互体验。
3. 核心代码实现：逐行拆解
这部分是实战项目的核心。我们分三步走：画棋盘、处理点击、判断胜负。
3.1 初始化 Canvas 与棋盘绘制
Canvas 是 HTML5 的核心绘图 API。很多老项目用 getContext('2d') 时，因为浏览器版本差异或上下文丢失，导致 fillRect 等方法报错。Stack Overflow 上有个高赞回答指出，必须在 Canvas 尺寸确定后再获取 context，否则绘图坐标会偏移。
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');// 定义常量，方便后续修改
const BOARD_SIZE = 15; // 15路棋盘
const CELL_SIZE = 40; // 每格40px
const MARGIN = 20; // 边距let currentPlayer = 'black'; // 当前玩家，初始黑棋
let boardState = []; // 二维数组存储棋盘状态，0:空 1:黑 2:白// 初始化棋盘状态
function initBoard() {boardState = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));currentPlayer = 'black';document.getElementById('status').innerText = '当前玩家：黑棋';drawBoard();
}// 绘制棋盘网格
function drawBoard() {// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 画背景ctx.fillStyle = '#DEB887'; // 木色背景ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.strokeStyle = '#000';ctx.lineWidth = 1;// 画横线for (let i = 0; i < BOARD_SIZE; i++) {ctx.beginPath();ctx.moveTo(MARGIN, MARGIN + i * CELL_SIZE);ctx.lineTo(MARGIN + (BOARD_SIZE - 1) * CELL_SIZE, MARGIN + i * CELL_SIZE);ctx.stroke();}// 画竖线for (let j = 0; j < BOARD_SIZE; j++) {ctx.beginPath();ctx.moveTo(MARGIN + j * CELL_SIZE, MARGIN);ctx.lineTo(MARGIN + j * CELL_SIZE, MARGIN + (BOARD_SIZE - 1) * CELL_SIZE);ctx.stroke();}// 画星位（天元等，可选，增加专业感）drawStarPoints();
}
关键点解析：
clearRect：每次重绘前必须清空，否则棋子会重叠。- 坐标计算：
MARGIN + i * CELL_SIZE是核心公式。行号i和列号j对应像素位置。 beginPath和stroke：这是 Canvas 绘制的标准流程，忘记beginPath会导致线条粘连。
3.2 事件监听与落子逻辑
鼠标点击 Canvas 时，我们需要计算点击位置对应的是哪个格子。这里有个常见坑：Canvas 的坐标原点在左上角，但鼠标事件的 clientX/Y 是相对于视口的。必须减去 Canvas 本身的偏移量。
canvas.addEventListener('click', function(e) {// 获取点击位置相对于 Canvas 内部的坐标const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;// 计算行列索引// 注意：要四舍五入到最近的格子中心，而不是直接除以const col = Math.round((x - MARGIN) / CELL_SIZE);const row = Math.round((y - MARGIN) / CELL_SIZE);// 边界检查if (col < 0 || col >= BOARD_SIZE || row < 0 || row >= BOARD_SIZE) {return; // 点击了棋盘外}// 检查该位置是否已有棋子if (boardState[row][col] !== 0) {return; // 已有棋子，忽略点击}// 落子boardState[row][col] = (currentPlayer === 'black' ? 1 : 2);// 重绘整个棋盘（包含新棋子）drawBoard();drawPieces();// 判断胜负if (checkWin(row, col, currentPlayer)) {document.getElementById('status').innerText = `${currentPlayer === 'black' ? '黑' : '白'}棋获胜！`;return;}// 切换玩家currentPlayer = currentPlayer === 'black' ? 'white' : 'black';document.getElementById('status').innerText = `当前玩家：${currentPlayer === 'black' ? '黑' : '白'}棋`;
});
避坑指南：
Math.round很重要。如果你用Math.floor，点击格子边缘右侧时，可能会被算到下一格，体验极差。- 不要只画新棋子。
drawPieces遍历整个boardState重新画所有棋子，这样逻辑最简单，性能对于 15x15 的棋盘也完全足够。
3.3 棋子绘制与胜负判断
drawPieces 函数：
function drawPieces() {for (let i = 0; i < BOARD_SIZE; i++) {for (let j = 0; j < BOARD_SIZE; j++) {if (boardState[i][j] !== 0) {const x = MARGIN + j * CELL_SIZE;const y = MARGIN + i * CELL_SIZE;ctx.beginPath();// 画圆，半径略小于格子一半ctx.arc(x, y, CELL_SIZE * 0.4, 0, Math.PI * 2);ctx.fillStyle = (boardState[i][j] === 1) ? '#000' : '#FFF';ctx.fill();// 加个边框，让白子在浅色背景上更清晰ctx.strokeStyle = '#000';ctx.stroke();}}}
}
checkWin 函数：核心算法
这是五子棋游戏在线玩逻辑中最难的部分。我们需要检查以 (row, col) 为中心的四个方向：横、竖、左斜、右斜。
function checkWin(row, col, player) {const directions = [[0, 1], // 横向[1, 0], // 纵向[1, 1], // 右斜[1, -1] // 左斜];for (const [dx, dy] of directions) {let count = 1; // 包含当前点// 正向延伸for (let i = 1; i < 5; i++) {const nr = row + i * dx;const nc = col + i * dy;if (nr < 0 || nr >= BOARD_SIZE || nc < 0 || nc >= BOARD_SIZE) break;if (boardState[nr][nc] === player) count++;else break;}// 反向延伸for (let i = 1; i < 5; i++) {const nr = row - i * dx;const nc = col - i * dy;if (nr < 0 || nr >= BOARD_SIZE || nc < 0 || nc >= BOARD_SIZE) break;if (boardState[nr][nc] === player) count++;else break;}if (count >= 5) return true;}return false;
}
逻辑详解：
- 我们不需要遍历整个棋盘，只需要以最新落子点为中心向四周探测。效率极高。
dx和dy定义方向向量。例如[1, 0]表示向下走一步。- 双向探测：因为五子连珠可能跨越中心点，比如
XXXOXXX这种情况虽然不合法，但逻辑上我们需要确认连续长度。
4. 运行与测试：如何验证你的代码
代码写完了，怎么知道它是对的？
本地运行：
- 安装 Live Server 插件（VS Code 用户）。
- 右键
index.html，选择 "Open with Live Server"。 - 浏览器自动打开
http://127.0.0.1:5500。
测试用例：
- 正常落子：点击中心，出现黑子。再点旁边，出现白子。状态栏文字切换正确。
- 重复点击：点击已有棋子的位置，无反应，不报错。
- 边界点击：点击棋盘最外圈线条，能正确落子。点击画布空白处，无反应。
- 胜负测试：
- 手动摆出横向五子，点击最后一子，应提示“黑棋获胜”。
- 手动摆出竖向五子，测试通过。
- 摆出“四子一断”，不应判定获胜。
- 重开功能：点击“重开一局”，棋盘清空，状态变回黑棋。
常见 Bug 排查：
- 棋子位置偏移：检查
MARGIN和CELL_SIZE是否一致。Canvas 的width属性必须与 CSS 设置的宽度一致，否则坐标系会缩放错乱。 - 点击无效：检查
getBoundingClientRect是否返回了正确的偏移量。如果页面有滚动条，这个值会变化，所以每次点击都要实时获取。 - 胜负误判：在
checkWin中加console.log，打印出探测到的count值，手动推演一遍逻辑。
5. 优化扩展：从 Demo 到产品
基础功能跑通后，你的五子棋游戏在线玩项目才算入门。想让它更专业，可以加这些功能：
1. 悔棋功能
- 维护一个
history数组，每次落子 push 一个{row, col, player}对象。 - 点击“悔棋”，pop 最后一个状态，修改
boardState，重绘。 - 注意：悔棋后，当前玩家也要切换回来。
2. 倒计时
- 使用
setInterval，每 30 秒切换一次玩家或提示超时。 - 需要在
checkWin获胜或重开时clearInterval，防止内存泄漏。
3. 音效
- 加载
place.mp3，落子时播放。 - 加载
win.mp3，获胜时播放。 - 代码：
new Audio('place.mp3').play()。注意某些浏览器需要用户交互后才能自动播放声音。
4. 响应式设计
- 使用 CSS Media Query，在小屏幕上缩小 Canvas 尺寸。
- 或者使用
transform: scale()缩放整个容器，保持逻辑坐标不变。
5. 数据持久化
- 使用
localStorage保存最佳战绩。 - 例如：
localStorage.setItem('gomoku_wins', count)。
进阶挑战：
- 简单 AI：实现一个基于“规则”的 AI，优先堵死对方四子，其次做自己的四三。这比随机落子有趣得多，也是面试常问的逻辑题。
- WebSocket 联机：使用 Node.js + Socket.io，实现两个浏览器实时对战。这才是真正的“在线玩”，也是实战项目中最具含金量的部分。
6. 小结：从代码到思维
这个项目虽然只有几百行代码，但它涵盖了前端开发的几个核心痛点：
- Canvas 坐标映射：像素与逻辑坐标的转换，是图形编程的基础。
- 状态管理：
boardState是单一数据源，所有渲染都基于它。这是 React/Vue 等框架思想的雏形。 - 算法思维：胜负判断的方向探测，是典型的滑动窗口或射线追踪思想，在图像处理、游戏开发中随处可见。
很多初学者觉得做游戏难，其实是难在“不知道从哪下手”。只要你把五子棋游戏在线玩这个最小闭环跑通，你就建立了信心。接下来，你可以试着把它部署到 GitHub Pages 或 Vercel 上，分享给朋友玩。当看到别人通过你写的代码下棋时，那种成就感是无与伦比的。
编程不是背 API，而是解决问题。版本升级 API 变了，但逻辑没变。理解了原理，换什么框架、什么语言，你都能快速上手。
这个实战项目只是个开始。你打算给它加什么功能？是联机对战，还是更复杂的 AI？还有什么不懂的？评论区留言挨个回。
