[第四篇] 使用AI在30分鐘內製作網頁遊戲。

從來沒有這麼認真地寫過文章……但因為新事物太有趣了，不知不覺就變成連載了。

首先，改進事項如下。

1. 角色（玩家、怪物）新增了暴擊率和暴擊傷害屬性，戰鬥中根據暴擊率會產生比平常更高的傷害。

1.1. 修改為升級時也能提升暴擊率。

2. 將怪物的出現概率從原本的（單純隨機）修改為賦予怪物權重，並根據權重生成。

2.1. 將怪物種類從原本的4種增加到12種。

3. 為能活用掉落的黃金，戰鬥後可在商店購買治癒藥水（3種）。

3.1. 管理目前狀態（閒置、戰鬥、商店），並根據狀態調整UI範圍，使商店只能在戰鬥後使用。

3.2. 在商店UI中新增購買商品並恢復角色HP的邏輯。

（新增）4. 新增考量行動裝置的響應式CSS。

4.1. 請求支援響應式CSS，結果一下就修改好了。太棒了…。

（新增）5. 修改根據各狀態顯示按鈕的狀態。

5.1. 因為所有狀態下都會顯示所有按鈕，所以會發生再次點擊「開始遊戲」而遊戲初始化等不便，因此修改為根據狀態顯示相對應的按鈕。

（新增2）6. 解決戰鬥時回合兩次進行的問題。

6.1. 雖然曾請求修改過一次，但battleTurn()函數沒有問題。仔細檢查相關部分後，發現是html內的onclick事件和main.js中注入事件監聽器的部分重複導致的問題，將此問題傳達給perplexity後，得到了這樣的回覆呵呵。

（新增2）7. 稍微修改為在戰鬥中顯示玩家和怪物名稱於體力條上方，並更改背景。
7.1. 新背景看起來比較搭配。預計將修改為可在開始時設定並使用主角名稱。

（新增3）8. 為玩家和怪物新增魔力，現在可以設定名稱後遊玩。
8.1. 修改為可在開始時設定名稱並開始遊戲，並使用該名稱進行遊戲。

8.2. 為玩家和怪物新增魔力，並反映在畫布上。

8.3. 之後預計將改進為（技能如同Roguelike遊戲般在商店隨機購買—以特定樹狀順序擴展）可在商店隨機購買技能並用於戰鬥。

事實上，現在已經不像標題所說的那樣，每天只花30分鐘了。

如果沒有將功能分開到不同的檔案中，在這個階段可能會很痛苦…。

不過，完成今天的作業後，看起來雖然簡單，但也算具備了相當不錯的簡易網頁遊戲架構。

呵呵

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