博客 / 詳情

返回

⚪️ 五子棋加入道具系統是一種什麼體驗?我用 TRAE SOLO 實現了!

最近刷到 不如摸魚去 使用 TRAE SOLO 復刻了坦克大戰,他説彷彿捉住一隻嘶鳴的蟬,便攥緊了整個童年的夏天。

現在已經是冬天了,四川冬天的冷就像是“魔法攻擊“,雖然温度不如北方那麼低,但是寒意總會穿透衣服滲入到你的身體裏。每天早上蹬共享單車上班的我,在寒風中總會想如果現在是夏天就好了,我也要用 TRAE SOLO 做一個遊戲,我也想要抓住整個夏天!

奈何沒有 TRAE SOLO 資格,一直不能實踐我的想法。

……

終於,TRAE SOLO 中國版正式上線,我也解鎖了 SOLO 資格!

91.png

那麼今天就來做一個大家都熟知的五子棋遊戲吧,不過我希望可以加入道具系統( 海克斯大亂鬥玩的 )!

🤓 什麼是 TRAE SOLO

“過去,我們努力把 AI 做進工具,提升補全效率與開發體驗。
如今,我們把工具反向集成於 AI 之中,由它統一調度任務、理解上下文、組織工作。
TRAE SOLO 正是在這個思路下誕生 —— 致力於實踐上下文工程,構建真正由 AI 驅動的開發閉環” —— TRAE 官網

TRAE SOLO 是一種高度自動化的開發方式,以 AI 為主導,可理解目標、承接上下文並調度工具,獨立推進各階段開發任務。

92.png

SOLO Coder 不止於代碼編寫,更能進行深度需求分析,精準執行。你可以創建自定義智能體,由 SOLO Coder 自主編排,專屬 AI 專家團隊協同開發,靈活處理你交代的每個任務。

點擊左上角的「TRAE」圖標即可切換到 SOLO 模式,不同於普通模式,SOLO 模式由 AI 模塊佔據主要地位,這也符合 TRAE 對 SOLO 模式的定位 —— AI 主導開發。

93.png

🚀 開始 SOLO !

首先我們需要整理需求,將想要做的東西用文字描述給 TRAE,要確保儘量詳細準確,這樣 AI 才能清晰理解任務目標。可是,對於大多數開發者來説寫文檔是一件很痛苦的事情,寧寫 1000 行代碼也不願寫 100 行文檔,這可怎麼辦呢?

幸運的是,TRAE 提供了 AI 自動潤色優化輸入功能,事情一下就變簡單了!

現在,我們只需要簡單編寫一句話描述需求,先開發一款基礎版的五子棋遊戲:

使用 HTML5 Canvas 和 TypeScript 開發一款五子棋遊戲。

然後點擊輸入框右下角的 ✨ 圖標,就可以 AI 自動潤色啦!

01.png

稍等片刻,TRAE 就自己編寫了一段詳細的需求説明。

02.png

我們稍加檢查,看看自動生成的文字是否符合需求 ……

嗯,完全符合需求!(我自己可寫不出這麼詳細的説明 🥹)

由於這是從 0 開始開發,可以啓用輸入框右上角的「Plan」開關,讓 TRAE 先梳理一個開發計劃文檔,這會讓 AI 對需求的理解更加深刻,有效提升代碼的輸出質量。

03.png

TRAE 經過一系列的自動反覆思考,最終生成了一篇完整的《五子棋遊戲開發計劃》並輸出到 .trae/documents 目錄中。確認無誤後點擊「執行」按鈕,TRAE 就會開始自動編碼。

如同一個經驗老道的高級開發工程師,TRAE 會自動思考、規劃、創建文件、編寫代碼以及錯誤修復等工作,全程無需人工干預。

我們只需要靜靜地看着他工作,或者去做點其他事情 ~

04.gif

很快,喝杯水的功夫( 沒有説是多大的杯子 😁 ),TRAE 就完成了第一版遊戲的開發,還貼心總結了項目結構、技術要點以及操作説明等內容,幫助我們快速理解工程。

TRAE 自動運行起了開發服務,然後切換到內置瀏覽器模塊,可以實時預覽頁面。

啊哦,控制枱日誌中有一個報錯,導致頁面只有一片白屏!但是不用擔心,點擊「✨添加到對話」按鈕,然後讓 TRAE 幫我們修復一下就好啦 ~

05.png

現在,一個基礎版本的五子棋遊戲就可以正常運行啦!

簡單體驗一下,可以正常交替落子、悔棋以及五子連珠檢測,具備了五子棋遊戲的基本要素。

06.gif

不過還是有一些小問題,「開始新遊戲」按鈕和「重新開始」按鈕功能重複了,並且點擊切換棋盤大小沒有反應,讓 TRAE 幫我們修復一下吧!

07.png

TRAE 不負所托,修復成功!只保留了「重新開始」按鈕,並且棋盤大小也能正確切換。

08.gif

可是,現在只能自己一個人交替落子進行遊戲,難免會少了一些樂趣,如果能有一個「電腦」選手與我們對弈就好了,那就讓 TRAE 繼續幫我們做一個「電腦」選手吧!

09.png

現在就切換到「玩家 VS 電腦」模式,開始一場人類與 AI 的較量!💪

10.gif

好吧,又發現了一個小問題,點擊一下「悔棋」按鈕,只撤回了一次落子,當撤回到「電腦」回合的時候,玩家就不能正常落子。TRAE 實現 PVE 模式的時候沒有考慮到這一點,那麼就得靠我們來提醒他咯 ~(人類扳回一局 🥳)

11.png

等待 TRAE 修復後,在 PVE 模式下點擊「悔棋」按鈕將撤回上一回合電腦及玩家的落子,遊戲可以正常進行了。

12.gif

體驗一番下來,這個電腦也太弱 👎 了吧!玩家可以輕鬆取勝,沒有一點挑戰性。

把我們的訴求告訴 TRAE,讓他優化電腦落子算法,增強遊戲性。

13.png

經過一番思考,TRAE 設計了一套基於位置評分的智能算法,考慮了進攻和防守策略,能夠評估不同位置的優先級。
14.png

小何賽博下棋偶遇超強電腦選手,行雲流水強如怪物,拼盡全力也無法戰勝。☹️

15.gif

至此,TRAE 幫我們完成了一個功能完整的五子棋遊戲,成功達成最初功能清單所設定的目標,接下來終於可以進入正題啦!為遊戲加入盲盒道具機制,提升遊戲的趣味性。

我設計了分為「強化類」和「弱化類」的 8 個不同道具,「強化類」道具可以用於改善自己的棋局,而「弱化類」道具則會破壞自己的棋局或者為對手提供有利的效果。

由於「弱化類」道具的存在,玩家不能一味地選擇觸發道具而不故現有局勢,每一次決定佔領道具對於棋局的影響都是未知的,請小心作出你的抉擇!

16.png

這是一個全新的道具系統,讓我們多給 TRAE 一些時間。

……

又經過若干輪的思考、規劃和編碼後,開發服務重新啓動,內置瀏覽器自動打開,TRAE 完成了道具系統的開發!

讓我們一起來體驗加入了盲盒道具機制的五子棋遊戲吧 ~

17.gif

TRAE 實現了道具的隨機刷新、自動觸發以及道具説明彈窗功能,儘管道具的效果存在問題,但是完成度已經非常高啦!

接下來就要靠我們為 TRAE 指出問題所在,將體驗過程中遇到的問題簡單總結後發給 TRAE 即可。

18.png

經過一番修復,對於部分影響落子次數或順序的道具連續觸發所導致的計數問題 TRAE 依然不能正確處理,此時需要我們提醒他應該設計一個「落子計數系統」。

19.png

一個完整的「道具五子棋」遊戲誕生啦!🎉

無論是「玩家 VS 玩家」還是「玩家 VS 電腦」模式,遊戲都能按照預期正常刷新和觸發道具,並且還提供了遊戲道具日誌。

20.gif

最後,再讓 TRAE 優化一下游戲界面的佈局,現在的遊戲界面實在是太長了。

21.png

遊戲界面優化結果非常完美,我宣佈 TRAE 正式 SOLO 出道!🫰

22.png

作為一個沒有任何遊戲開發經驗的小白,能夠不寫一行代碼完全通過聊天實現一個完整的遊戲(雖然只是一個簡單的棋牌遊戲),是很酷的一件事情!😎

🎮 在線體驗

「道具版五子棋」已通過 Netlify 部署到線上,歡迎體驗!

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

🖥️ 源碼

項目的完整代碼可以在 gomoku-next 倉庫中查看。

贈人玫瑰,手留餘香,如果對你有幫助可以給我一個 ⭐️ 鼓勵,這將是我繼續前進的動力,謝謝大家 🙏!

🍵 寫在最後

我是 xiaohe0601,熱愛代碼,目前專注於 Web 前端領域。

歡迎關注我的微信公眾號「小何不會寫代碼」,我會不定期分享一些開發心得、最佳實踐以及技術探索等內容,希望能夠幫到你!

📚 推薦閲讀

  • 前端不是隻會寫管理後台,我用 400 行代碼畫了一個 LABUBU !
  • 當年偷偷玩小霸王,現在偷偷用 Trae Solo 復刻坦克大戰
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.