我用AI做了一个中国象棋游戏我居然还下不过【项目已开源】一个写了 10 年 Android 的老码农第N次用 AI 做 Web 项目结果这次被自己做的 AI 打得怀疑人生。写在前面先放结论项目已开源https://github.com/yutils/xiangqi在线试玩https://yutils.github.io/xiangqi备用地址https://xiangqi.kotlinx.com我做了个在线中国象棋纯前端开箱即玩。人机对战、双人对战、自定义残局、悔棋、提示、计时器都有。然后我开了一局专家难度。然后我就下不过了。被自己亲手写的代码按在地上摩擦这种体验确实新奇。一、为什么是象棋我是余静写 Android 已经 11 年了主要做物联网相关的工程化项目。象棋对我而言,是从小看到大的玩意儿——爷爷的茶馆里、街边的梧桐树下、老爸的饭桌上,都有那种啪一声落子的声音。我自己棋力很一般,大概属于知道规则、能下、但说不出所以然的水平。做这个项目纯属偶然:某个周末想用 AI 辅助做个完整的 Web 小项目练手,想了半天选题,最后落在象棋上。理由有三个:规则明确:中国象棋走法清晰,边界条件可枚举,适合工程化有现成引擎:不用从零写 AI,有开源的 XiangQi Wizard Light 可用能玩:做完自己能用,而不是躺在 GitHub 吃灰二、技术栈长什么样?作为一个 Android 出身的人,这次选了 Vue 3 Vite:模块技术前端框架Vue 3 (Composition API)构建工具Vite 6AI 引擎XiangQi Wizard Light (GPL-2.0)部署GitHub Pages Actions 自动部署整个项目纯静态,没有后端。AI 计算放在 Web Worker 里,不会卡 UI。工程结构很简单:src/ ├── components/ChessBoard.vue # 棋盘组件 ├── engine/ │ ├── ai.js # AI 接口 │ ├── aiWorker.js # Web Worker │ ├── board.js # 棋盘逻辑 │ ├── evaluation.js # 局面评估 │ ├── xqwlight-adapter.js # 引擎适配器 │ └── xqwlight/ # 引擎本体 ├── utils/ # 记谱、音效 └── App.vue三、AI 到底是怎么想的?很多人对中国象棋 AI 的印象,还停留在穷举所有走法。理论上是,实践上不是。真要纯穷举,象棋的搜索空间大约是 10^40 量级,比宇宙原子数还多。所以引擎核心是两件事:1. 搜索:用 Alpha-Beta 剪枝简单说就是:“如果对方最优应对下,我某一步已经比另一步差了,那这一步后面的所有变化都不用看了。”剪枝之后,实际搜索量从指数爆炸降到可接受。2. 评估:给每个局面打分搜索到一定深度后,要把棋盘翻译成数字。评估函数大概会考虑:子力价值(车 9 分、马 4 分、兵 1 分……)位置价值(马跳卧槽、车占肋道加分)攻守关系(威胁对方子力加分,被威胁减分)特殊形态(连环马、担子炮、铁门栓……)XiangQi Wizard Light 这套引擎是开源的(GPL-2.0),我直接集成进去了。我没有重写引擎,只是做了适配和封装。重点:棋力不是我的功劳,是引擎的功劳。我负责的是让这套引擎在浏览器里跑起来,并且跑得舒服。四、四个难度是怎么调出来的?这是这个项目里我比较得意的部分。直接给引擎一个深度参数是最简单的做法,但体验很差——深度浅的时候 AI 像智障,深度深的时候浏览器卡死、风扇狂转。我的做法是深度 时间双限制:难度思考时间行为表现简单~0.3 秒向前看 2 步,会犯低级错误中等~0.8 秒向前看 3 步,正常业余水平困难~2 秒向前看 4 步,需要认真下专家~2.5 秒向前看 5 步,我下不过关键点是把计算放到 Web Worker 里,主线程只负责渲染。这样即使引擎在后台算 3 秒,你的棋盘交互、动画、提示都不会卡。五、被自己写的 AI 打败是什么体验?我第一次测试开了一局专家难度,执红先手。开局我走中炮,架势很正。AI 应屏风马,有模有样。中盘我开始吃亏——它的子力调度比我快,我还在想这步要不要走,它已经把马跳到了我车面前。最气的是残局:我剩一车一马,它剩一车一炮。我刚走一步车,以为要将军。它直接弃炮解将,反手车马冷杀。我盯着屏幕看了三秒,默默点了悔棋。悔棋之后还是输。那一刻我突然意识到:我写的代码,已经比我强了。这不是什么AI 觉醒的玄学,而是搜索深度 评估函数的必然结果——4 步以上的搜索深度,人类业余棋手已经很难对抗了。六、AI 辅助开发的真实感受说实话,这次项目里 AI 辅助的成分很大。但我必须把话说清楚——“AI 辅助不等于AI 替我写”。具体分工大概是这样:我做的AI 帮我做的选型、架构、模块划分生成棋盘 SVG 渲染的初版引擎集成和适配写 CSS 动画的细节难度调参、性能优化提供残局校验逻辑UI/交互设计排查 Web Worker 通信 bug部署流水线生成 README 和文档也就是说,决策都是我做的,苦力活 AI 干了大部分。这种模式对有经验的人特别友好——你心里清楚要什么,AI 就是个超高效的打字员。但如果你完全不懂,直接让 AI 从零生成一个完整项目,质量会很糟糕,因为你没法判断它写的对不对。AI 不会替代工程师,但会用 AI 的工程师会替代不会用的。这话老套,但确实是这个理。七、做了哪些细节?分享几个我比较在意的工程细节,可能对做类似项目的朋友有参考价值。1. 棋盘渲染用 SVG,不是 Canvas理由:矢量缩放,手机端不糊可以用 CSS 控制线条样式,改主题方便点击事件天然支持,不用自己做命中检测2. 飞子动画走子时不是直接刷新棋盘,而是先播一段棋子从 A 飞到 B的动画,动画结束再更新数据。看起来很自然,但实现上要小心动画和数据状态的同步。3. 将军特效被将军时,被将的棋子会有红色脉冲 屏幕闪光 将军二字弹出。这个细节我自己挺喜欢,很有被针对的压迫感。4. 自定义残局可以摆任意棋局开始下。这个功能是给研究残局的朋友做的——摆个经典残局,让 AI 走给你看,比自己对着书谱强。5. 记谱走完一步会生成中文记谱,比如炮二平五“马八进七”。这个看似简单,实际上涉及坐标转换、走法判定(平/进/退)、同子歧义处理(两个马都能走到同一位置时怎么区分)等等。八、开源地址 试玩GitHub:https://github.com/yutils/xiangqi在线试玩:主地址:https://yutils.github.io/xiangqi备用:https://xiangqi.kotlinx.com技术栈:Vue 3 Vite 6XiangQi Wizard Light 引擎 (GPL-2.0)GitHub Actions 自动部署代码质量自认为还行,该拆的模块拆了,该注释的地方注释了。如果你想做类似的网页棋类游戏,或者想看看 Vue 3 Web Worker 怎么组织,可以直接去仓库翻翻。欢迎 star ⭐、欢迎提 issue、欢迎 fork 来改。如果你能改成AI 下不过我的版本,请务必告诉我怎么调的,我也想赢一次。九、最后说两句这个项目我做了一个多礼拜断断续续其实一天就做完了就放在那儿没管后来把项目拉起来对战感觉人机走的很生硬又加了一些走棋动画。最爽的时刻不是部署成功,而是第一次完整下完一局——尽管我输了。被自己亲手做的 AI 打败,有一种很奇特的感觉。像看着自己教出来的学生,第一次在某个领域超过自己。你既有点失落,又有点骄傲。我想,这可能就是工程师特有的浪漫。关于我:余静,10 年 Android/Java 开发。长期深耕XX行业全链路工程化,也做物联网全栈。开源了 kotlinx、YUtils、YSerialPort、YHttp 等工具库。GitHub: https://github.com/yutils个人站: https://www.kotlinx.comCSDN: Yu1441如果你也在做 AI 辅助开发、或者对工程化感兴趣,欢迎来交流。下一篇文章大概率会写**“AI 辅助开发的正确姿势”**——结合这个象棋项目,讲讲怎么把 AI 当成一个靠谱的副驾,而不是指望它替你干活。敬请关注。项目开源地址:https://github.com/yutils/xiangqi如果这篇文章对你有启发,点赞、在看、转发,都是对我继续写下去的最大鼓励。