一、Demo 简介
是什么:一个纯前端单文件围棋定式互动教学 Web 应用,将围棋定式棋理与奇幻世界观深度融合,通过间隔重复算法帮助学习者科学记忆定式。
面向谁:围棋初学者与中级棋手——想系统学习角部定式(星位、小目、三三、高目、外目、天元)、又苦于"学了就忘"的棋友。
主要功能:
- 定式演武 + 猜手练习:8 大视图覆盖定式演示、猜手测验、剧情漫游、经典战役复盘、AI 对弈等。棋盘用 Canvas 绘制,支持势力影响域渲染、形势判断估算、落子音效。
- 修行台 · 间隔重复记忆系统:基于 SM-2 算法,按定式分阶段(起手/中盘/收官/变招)自动调度复习。猜手表现自动推算记忆质量评分(q值 0-5),常忘的先复习,熟知的拉长间隔。六领土掌握度热力图一眼定位薄弱点,错题本追踪最常错的手数。
- 定式分支探索器:新增"探索"模式,在任意一手自由分叉试演替代走法。不同点自动创建新分支,分支面包屑导航支持切换和删除,用户分支持久化到本地存储。
-
SGF 棋谱导入导出:支持导入真实职业对局 SGF 文件,自动解析棋盘大小和着手序列,19×19 完整棋盘回放。导出的 SGF 与导入格式兼容,可往返转换。
-
AI 对弈殿 · 四档难度:从"见习侯"到"棋圣"四个难度,棋圣难度采用 3 层极小极大搜索 + 棋形模式识别(连接性、双叫吃、眼位雏形、断点惩罚)+ 开局库,支持完整围棋规则(气/提子/劫/禁自杀)。
二、Demo 创作思路
灵感来源:围棋定式学习有一个经典痛点——学了就忘。传统定式书和演示工具都是线性的"看完就走",缺乏科学的记忆巩固机制。我想到背单词有 Anki 的间隔重复,为什么学定式不能有同样的系统?
想解决的问题:
- 定式学了不复习就会遗忘,但手动安排复习太麻烦
- 不知道自己哪些定式掌握得好、哪些薄弱
- 演示工具只能看预设变化,不能自由探索替代走法
- 无法导入真实职业棋谱进行复盘学习
- AI 对弈太弱,缺乏挑战性
为什么做这个方向:围棋教学是一个"有明确正确答案"的领域,非常适合用算法辅助记忆。同时,将棋理融入奇幻世界观(六大领土对应六种定式),让学习过程更有沉浸感。纯前端零依赖的技术选型让作品可以直接打包为 HTML 文件体验,降低评委体验门槛。
三、Demo 体验地址
方式:HTML 格式文件打包上传
应用为纯前端单文件,将 go-joseki-app.html(及配套的 manifest.json、sw.js、assets/ 目录)打包为 ZIP 上传。
本地运行方式:
- 解压 ZIP 文件
- 用浏览器直接打开
go-joseki-app.html即可体验全部功能 - 或在解压目录运行
python -m http.server 8099,访问http://localhost:8099/go-joseki-app.html
所有学习进度通过 localStorage 本地保存,支持导出/导入进度文件,PWA 离线化后可安装到桌面、断网使用。
四、TRAE 实践过程
整体流程
本项目使用 TRAE IDE 从创意到成品全流程开发完成。核心开发分四个阶段,每个阶段独立设计、实现、验收:
阶段一:间隔重复学习系统 + PWA 离线化
任务拆解:
- 探索现有项目代码结构(2883 行单文件 HTML,含约 1906 行内联 JS)
- 设计 SM-2 间隔重复算法的数据模型和调度逻辑
- 实现修行台标签页(复习队列、六领土掌握度热力图、错题本)
- 将猜手模式与 SRS 联动(自动记录错题、推算 q 值、更新调度)
- PWA 离线化(manifest.json + Service Worker + 在线/离线状态指示)
- 修复世界观文档缺失的封面图和字体资源
关键实现:
- SM-2 算法核心约 40 行纯函数实现,q 值由猜手表现自动推算(首手命中=5,重试后命中=4,用提示后=3,两次均错=2)
- 定式按手数分阶段(前4手/5-8手/9+手/变招),每个阶段独立调度
- 掌握度公式:已通关阶段数/总阶段数 × 0.6 + 猜手正确率 × 0.4
- PROG 数据模型平滑升级,老用户数据自动兼容
阶段二:定式分支探索器
任务拆解:
- 分析现有线性演示和预设变招系统的局限性
- 新增第 5 种模式"探索",点击棋盘空位即可分叉创建新分支
- 实现分支面包屑导航,支持切换和删除
- 用户分支持久化到 localStorage
关键实现:
exploreClick()函数判断点击位置:正解下一手则正常前进,不同点则创建新分支getAllBranches()合并主变、预设变招、用户自定义分支三类- 在已有用户分支中继续点击可追加手数,构建完整变化图
阶段三:SGF 棋谱导入导出
任务拆解:
- 实现 SGF 解析器(棋盘大小、预置子 AB/AW、着手序列 B/W)
- 处理嵌套分支(递归移除括号分支只取主路径)
- GRID 从 const 改为 let 支持动态棋盘尺寸(13×13 与 19×19 切换)
- 导入棋谱自动切换到原始棋盘尺寸
关键实现:
- 解析器清理注释中的括号干扰(C[…] 内容清空),再递归移除嵌套括号
- 导入后构建临时定式对象,加载到演武模式逐手回放
- 导出的 SGF 格式与导入兼容,可往返转换
阶段四:AI 引擎强化
任务拆解:
- 分析现有 AI 引擎(2 层极小极大,无棋形识别)
- 新增第四难度"棋圣":3 层搜索 + 棋形模式识别
- 增强
heurScore(连接性、双叫吃、眼位雏形、断点惩罚) - 增强
boardEval(眼位评估、连接性、中腹影响力) - 开局库:前 4 手从定式库随机选取
关键实现:
- 3 层搜索宽度优化为 10×6×4=240 次模拟,确保 3 秒内响应
- 棋形评估在
aiLevel>=3时启用,不影响低难度性能 - 新增成就"棋道通神":战胜棋圣解锁(15 棋力奖励)
Session ID
请在此处填入至少 3 个关键任务的 Session ID(双击 TRAE 对话复制):
- Session ID 1:2047738647156768:7946624582c63c416a7aa2718e4a1715_6a4f4f84b009197093b54486.6a4f5ba2b009197093b54558.6a4f5ba2b009197093b54556:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 16:28:18)(阶段一:间隔重复学习系统开发)
- Session ID 2:2047738647156768:c1cee6dd91eddba48da115b4f7b5e572_6a4f4f84b009197093b54486.6a4f613eb009197093b546aa.6a4f613eb009197093b546a8:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 16:52:14)(阶段二:定式分支探索器开发)
- Session ID 3:2047738647156768:da439c38c0eb6abbd6e76cde78695b83_6a4f4f84b009197093b54486.6a4f6c24b009197093b549ab.6a4f6c24b009197093b549a9:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 17:38:44)(阶段四:AI 引擎强化开发)
五、开发心得与踩坑记录
踩过的坑
-
Service Worker 的 Blob URL 陷阱:最初设计用 Blob URL 注入 Service Worker,但 SW 规范要求注册脚本必须是同源真实文件路径,不支持 Blob URL。改为独立
sw.js文件解决。 -
PWA 缓存导致测试失效:Cache First 策略导致修改代码后浏览器仍加载旧版本。每次迭代需要升级 SW 缓存版本号(v1→v2→v3→v4),并在测试时手动清除缓存。
-
SGF 坐标系映射:SGF 用 a-s 字母坐标(19×19),应用用角部本地坐标(13×13)。最初尝试映射到局部坐标但导致棋子重叠,最终改为动态切换 GRID 到 19×19 完整棋盘,保留原始坐标。
-
棋圣 AI 计算量:3 层搜索最初用 14×10×8=1120 次模拟,AI 响应超过 5 秒。优化为 10×6×4=240 次后稳定在 3 秒内。
技术选型思考
选择纯前端单文件架构(无框架、无构建工具)的理由:
- 零依赖:评委打开 HTML 即可体验,无需 npm install
- 可打包:ZIP 上传社区即可,部署门槛最低
- PWA 友好:纯静态文件天然适合 Service Worker 缓存
- localStorage:学习进度无需后端,隐私安全
四期迭代的价值
四期优化让作品从"演示器"进化为"学习工具":
- 一期:从"看完就走"到"科学记忆"(SM-2 间隔重复)
- 二期:从"线性演示"到"可交互定式树"(分支探索)
- 三期:从"封闭数据"到"棋谱生态"(SGF 导入导出)
- 四期:从"弱 AI"到"棋形识别"(棋圣难度)
六、报名帖链接
报名帖:【生活娱乐赛】· 围棋定式世界——一个由棋理构建的互动式幻想大陆 【生活娱乐赛】· 围棋定式世界——一个由棋理构建的互动式幻想大陆



