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？还有什么不懂的？评论区留言挨个回。 
长河君 · 2026/9/22 10:59:43 · 阅读 1.2k 3步搞定五子棋游戏在线玩 避坑实战项目
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？还有什么不懂的？评论区留言挨个回。