[7天] 與AI共創樂趣橫生的遊戲製作

已經與Perplexity.AI合作開發基於D&D5e的網頁遊戲一週了。

今天也比內容更新更著重於內部架構的改進。

★ 使用分層畫布

不再使用單一畫布，而是將其分為三個畫布(background, ui, character)。

這樣一來，就可以只更新需要更新的部分，而不是重新繪製整個畫面，

(AI表示)這有助於提升整體性能。呵呵

還有，雖然是這次才學到的內容，但如果在畫布操作中沒有使用save、restore，各個元素就會互相影響，

如果想要在畫布上準確地呈現想要的內容，就需要使用save和restore。

★ 改用ESM模式

之前是在html中使用<script>載入所有js腳本，但隨著程式碼分割，js檔案越來越多…

所以一開始想用以前用過的require.js，但AI教會了我更先進的技術。

多虧了它，我成功地改用了ESM模式。現在無論程式碼增加多少，

像這樣，只在index.html中引入使用module聲明的main.js。看起來很不錯。

通過改進整體結構，可以新增以下功能：

★ 實現設施互動

進入設施後，對話框中會顯示選項，點擊(觸摸)即可互動。

這將成為日後新增各種系統的基礎功能。雖然在新增功能的過程中遇到很多bug和修改事項，

但現在運作良好，OK。

現在對話框中會顯示選項，點擊後可以正常運作。上面的區域顯示位置也很準確。

而且在戰鬥中，根據攻擊結果也會顯示以下效果！

命中則顯示Hit！暴擊則顯示Critical！這功能昨天還不太順利呢，哈哈…

總體而言，整理程式碼並改進結構後，已實現的功能都能按照預期運作。

因為一開始就載入所有圖片，所以也實現了以下載入畫面。

怎么说呢…現在感覺更像是一款遊戲了。

整理和基礎建設似乎告一段落了，接下來開始著手實現下一個階段的功能。

首先，將實現法師職業的魔法系統、盜賊和戰士職業的額外行動等系統，

以及非戰鬥探險時觸發的事件、城鎮互動引發的任務、休息、物品交易、劇本等等…

哎呀…還有好多工作要做呢!?

不過有AI的協助，我會繼續努力！

測試網址：https://ggoban.com/d2ng/

GitHub網址：https://github.com/d2ng/