1. 使用 Trae 从 0 开始，开发一个五子棋小游戏
2. 创建网格
由于是使用的 hexo 创建的静态页面，所以创建一个 gomoku.md 文件，然后使用 Trae 的 Builder 模式，让它实现五子棋的网格布局！
使用 javascript+canvas 实现一个 15*15 的五子棋棋盘
2.1 注意
- 我这里直接规定了它使用的语言和实现方法 javascript+canvas；
- 第一步我只是单纯的创建了棋盘，后边如果有需要还可以调试；
- 我并没有直接让它实现一个完整的游戏，因为之前我让它完整的实现俄罗斯方块，还是需要调试每一步，因此我决定五子棋，我按照每一步来实现。
2.2 思考结果
3. 创建人机对弈逻辑
棋盘创建好后，就需要添加人机对弈的点击事件和逻辑。
添加人和AI对弈的逻辑
3.1 注意
- 这里只是完成落子和玩家的监听事件；
- 没有对 AI 落子的评分机制进行完善。
3.2 思考结果
4. AI 落子评分机制
AI 落子需要经过每个位置的评分计算，找到最优位置，AI再进行落子。
AI根据不同位置形成的不同策略计算分数，找到最优位置落子
4.1 评分机制思考结果
5. 判断输赢函数
人机相互之间落子后，就需要对每一步落子后棋局的输赢判断。
添加判断输赢的函数
5.1 思考结果
6. 基本步骤总结
差不多到了这一步，一个简单的五子棋游戏，他就帮我们实现了！ 但是这个时候它还不够完善，不够美观：
- 界面美工还显示的比较粗糙；
- AI落子的评分机制也只是进行单纯的相邻棋子颜色的评分；
- 没有玩家和AI先手的选择以及，选择对应的棋子颜色；
- 游戏结束后，没有进行禁止落子判断等。
7. 基础的评分优化
- 调整了评分函数，增加了对开放端的评估，使得AI更注重形成多端开放的棋型；
- 增加了对关键位置（如中心点）的评估，使AI更倾向于占据有利位置；
- 优化了模拟深度，使AI能够更好地预测两步内的棋局变化。
8. 五子棋界优化
- 棋盘添加木质渐变背景和星位标记；
- 棋子增加阴影效果和金属渐变质感；
- 点击坐标计算优化为四舍五入方式；
- 增加棋子高光点提升立体感；
- 统一代码格式规范分号使用。
8.1 思考结果
9. 棋子优化
- 将玩家棋子颜色改为纯白色(#ffffff)，AI棋子改为纯黑色(#000000)；
- 移除了棋子的边框绘制逻辑；
- 保留了原有的阴影效果和高光点以维持棋子立体感。
9.1 思考结果
10. 添加游戏设置
-
在HTML中新增设置面板包含：
- 先手选择下拉框（玩家/AI）；
- 执棋颜色选择下拉框（黑/白）；
- 开始游戏和重新开始按钮。
-
实现游戏状态管理：
- 新增gameStarted状态控制游戏启停；
- 通过playerFirst判断先手顺序；
- 通过playerColor动态切换棋子颜色。
-
完善交互逻辑：
- 点击开始按钮后初始化游戏设置；
- 新增AI先手自动落子逻辑；
- 落子逻辑与棋盘绘制适配颜色选择；
- 重置按钮恢复所有设置选项。
-
优化界面样式：
- 控制面板采用横向布局；
- 增加元素间距提升操作体验；
- 按钮状态与游戏流程联动。
10.1 思考结果
11. 给棋盘添加边框
给canvas 四周设置 css 阴影5px，阴影不模糊，阴影是上下左右都添加
12. 以防御性优化算法逻辑
AI计算得分时，同时要计算玩家落在每个位置的得分，如果玩家落在那个位置的得分高于AI，优先占位玩家的最高得分位置
13. 实现的最终效果
14. 总结
- 可以看到整体效果比较完美，界面也是比较美观的；
- 但是这个评分算法还可以再优化，比如进行两三步的预测评分；
- 再给游戏添加背景音乐；
- 可以将棋子落点移动到交叉点上；
- 添加开始游戏和结束游戏的动画效果等！