⚪️ 五子棋加入道具系统是一种什么体验?我用 TRAE SOLO 实现了!

2,183 阅读8分钟

最近刷到 不如摸鱼去 使用 TRAE SOLO 复刻了坦克大战,他说仿佛捉住一只嘶鸣的蝉,便攥紧了整个童年的夏天。

现在已经是冬天了,四川冬天的冷就像是“魔法攻击“,虽然温度不如北方那么低,但是寒意总会穿透衣服渗入到你的身体里。每天早上蹬共享单车上班的我,在寒风中总会想如果现在是夏天就好了,我也要用 TRAE SOLO 做一个游戏,我也想要抓住整个夏天!

奈何没有 TRAE SOLO 资格,一直不能实践我的想法。

……

终于,TRAE SOLO 中国版正式上线,我也解锁了 SOLO 资格!

那么今天就来做一个大家都熟知的五子棋游戏吧,不过我希望可以加入道具系统(海克斯大乱斗玩的)!

🤓 什么是 TRAE SOLO

“过去,我们努力把 AI 做进工具,提升补全效率与开发体验。 如今,我们把工具反向集成于 AI 之中,由它统一调度任务、理解上下文、组织工作。 TRAE SOLO 正是在这个思路下诞生 —— 致力于实践上下文工程,构建真正由 AI 驱动的开发闭环” —— TRAE 官网

TRAE SOLO 是一种高度自动化的开发方式,以 AI 为主导,可理解目标、承接上下文并调度工具,独立推进各阶段开发任务。

SOLO Coder 不止于代码编写,更能进行深度需求分析,精准执行。你可以创建自定义智能体,由 SOLO Coder 自主编排,专属 AI 专家团队协同开发,灵活处理你交代的每个任务。

点击左上角的「TRAE」图标即可切换到 SOLO 模式,不同于普通模式,SOLO 模式由 AI 模块占据主要地位,这也符合 TRAE 对 SOLO 模式的定位 —— AI 主导开发。

🚀 开始 SOLO !

首先我们需要整理需求,将想要做的东西用文字描述给 TRAE,要确保尽量详细准确,这样 AI 才能清晰理解任务目标。可是,对于大多数开发者来说写文档是一件很痛苦的事情,宁写 1000 行代码也不愿写 100 行文档,这可怎么办呢?

幸运的是,TRAE 提供了 AI 自动润色优化输入功能,事情一下就变简单了!

现在,我们只需要简单编写一句话描述需求,先开发一款基础版的五子棋游戏:

使用 HTML5 Canvas 和 TypeScript 开发一款五子棋游戏。

然后点击输入框右下角的 ✨ 图标,就可以 AI 自动润色啦!

稍等片刻,TRAE 就自己编写了一段详细的需求说明。

我们稍加检查,看看自动生成的文字是否符合需求 ……

嗯,完全符合需求!(我自己可写不出这么详细的说明 🥹)

由于这是从 0 开始开发,可以启用输入框右上角的「Plan」开关,让 TRAE 先梳理一个开发计划文档,这会让 AI 对需求的理解更加深刻,有效提升代码的输出质量。

TRAE 经过一系列的自动反复思考,最终生成了一篇完整的《五子棋游戏开发计划》并输出到 .trae/documents 目录中。确认无误后点击「执行」按钮,TRAE 就会开始自动编码。

如同一个经验老道的高级开发工程师,TRAE 会自动思考、规划、创建文件、编写代码以及错误修复等工作,全程无需人工干预。

我们只需要静静地看着他工作,或者去做点其他事情 ~

很快,喝杯水的功夫(没有说是多大的杯子 😁),TRAE 就完成了第一版游戏的开发,还贴心总结了项目结构、技术要点以及操作说明等内容,帮助我们快速理解工程。

TRAE 自动运行起了开发服务,然后切换到内置浏览器模块,可以实时预览页面。

啊哦,控制台日志中有一个报错,导致页面只有一片白屏!但是不用担心,点击「✨添加到对话」按钮,然后让 TRAE 帮我们修复一下就好啦 ~

现在,一个基础版本的五子棋游戏就可以正常运行啦!

简单体验一下,可以正常交替落子、悔棋以及五子连珠检测,具备了五子棋游戏的基本要素。

不过还是有一些小问题,「开始新游戏」按钮和「重新开始」按钮功能重复了,并且点击切换棋盘大小没有反应,让 TRAE 帮我们修复一下吧!

TRAE 不负所托,修复成功!只保留了「重新开始」按钮,并且棋盘大小也能正确切换。

可是,现在只能自己一个人交替落子进行游戏,难免会少了一些乐趣,如果能有一个「电脑」选手与我们对弈就好了,那就让 TRAE 继续帮我们做一个「电脑」选手吧!

现在就切换到「玩家 VS 电脑」模式,开始一场人类与 AI 的较量!💪

好吧,又发现了一个小问题,点击一下「悔棋」按钮,只撤回了一次落子,当撤回到「电脑」回合的时候,玩家就不能正常落子。TRAE 实现 PVE 模式的时候没有考虑到这一点,那么就得靠我们来提醒他咯 ~(人类扳回一局 🥳)

等待 TRAE 修复后,在 PVE 模式下点击「悔棋」按钮将撤回上一回合电脑及玩家的落子,游戏可以正常进行了。

体验一番下来,这个电脑也太弱 👎 了吧!玩家可以轻松取胜,没有一点挑战性。

把我们的诉求告诉 TRAE,让他优化电脑落子算法,增强游戏性。

经过一番思考,TRAE 设计了一套基于位置评分的智能算法,考虑了进攻和防守策略,能够评估不同位置的优先级。

小何赛博下棋偶遇超强电脑选手,行云流水强如怪物,拼尽全力也无法战胜。☹️

至此,TRAE 帮我们完成了一个功能完整的五子棋游戏,成功达成最初功能清单所设定的目标,接下来终于可以进入正题啦!为游戏加入盲盒道具机制,提升游戏的趣味性。

我设计了分为「强化类」和「弱化类」的 8 个不同道具,「强化类」道具可以用于改善自己的棋局,而「弱化类」道具则会破坏自己的棋局或者为对手提供有利的效果。

由于「弱化类」道具的存在,玩家不能一味地选择触发道具而不故现有局势,每一次决定占领道具对于棋局的影响都是未知的,请小心作出你的抉择!

这是一个全新的道具系统,让我们多给 TRAE 一些时间。

……

又经过若干轮的思考、规划和编码后,开发服务重新启动,内置浏览器自动打开,TRAE 完成了道具系统的开发!

让我们一起来体验加入了盲盒道具机制的五子棋游戏吧 ~

TRAE 实现了道具的随机刷新、自动触发以及道具说明弹窗功能,尽管道具的效果存在问题,但是完成度已经非常高啦!

接下来就要靠我们为 TRAE 指出问题所在,将体验过程中遇到的问题简单总结后发给 TRAE 即可。

经过一番修复,对于部分影响落子次数或顺序的道具连续触发所导致的计数问题 TRAE 依然不能正确处理,此时需要我们提醒他应该设计一个「落子计数系统」。

一个完整的「道具五子棋」游戏诞生啦!🎉

无论是「玩家 VS 玩家」还是「玩家 VS 电脑」模式,游戏都能按照预期正常刷新和触发道具,并且还提供了游戏道具日志。

最后,再让 TRAE 优化一下游戏界面的布局,现在的游戏界面实在是太长了。

游戏界面优化结果非常完美,我宣布 TRAE 正式 SOLO 出道!🫰

作为一个没有任何游戏开发经验的小白,能够不写一行代码完全通过聊天实现一个完整的游戏(虽然只是一个简单的棋牌游戏),是很酷的一件事情!😎

🎮 在线体验

「道具版五子棋」已通过 Netlify 部署到线上,欢迎体验!

👉 Gomoku Next (可能需要魔法 🪄 上网)

🖥️ 源码

项目的完整代码可以在 gomoku-next 仓库中查看。

赠人玫瑰,手留余香,如果对你有帮助可以给我一个 ⭐️ 鼓励,这将是我继续前进的动力,谢谢大家 🙏!

🍵 写在最后

我是 xiaohe0601,热爱代码,目前专注于 Web 前端领域。

欢迎关注我的微信公众号「小何不会写代码」,我会不定期分享一些开发心得、最佳实践以及技术探索等内容,希望能够帮到你!

📚 推荐阅读