由chatGPT o1-preview生成的射擊遊戲
點此開始遊戲
在初始的版本(v1.0.0)，我將遊戲設計架構提供給chatGPT o1-preview，以下是我的prompt：
我想以html、css、javascript建立一個射擊遊戲，各別的程式碼請幫我寫在game.html、styles.css、control.js中。
這個遊戲是一個在簡單的筆直的車道上，藉由操作車子左右移動，閃躲障礙物來累積積分的遊戲。
- 在遊戲中，車速是由程式所控制，會隨著積分越來越高，車速也會越來越快
- 得分的規則：每閃過一個障礙物，或每消滅一個障礙物，則獲得10分
- 當得分每超過100分的級距，速度會再加快一些
- 超過500分後出現障礙物的頻率會增加，且每500分的級距，障礙物出現頻率會再提升
- 基礎的障礙物請設計為綠色。另外，超過500分之後會出現一種紅色的障礙物，它會發射出直線及左右斜向45度行進的子彈，當被子彈打中時，遊戲一樣會結束
- 在操作上，我只需要操作鍵盤的左、右鍵來控制方向，另外有一個空白鍵可以在取得道具時發射子彈
- 遊戲中會隨機產兩種道具，只要移動到相對應的位置就可以取得
- 第一種道具：取得時，按下空白鍵，會發射出直線行進的子彈，可以清除前方的障礙物，不過道具的擁有只能維持10秒，超過10秒道具的功用就會消失，且當道具快消失的前3秒車子會有閃爍的效果。設計上請使用黃色填滿方塊表示
- 第二種道具：出現機率為第一種的20%，取得時，按下空白鍵，會發射出直線及左右斜向45度行進的子彈，可以清除前方的障礙物，不過道具的擁有只能維持8秒，超過8秒道具的功用就會消失，且當道具快消失的前3秒車子會有閃爍的效果。請使用金色填滿圓形表示，並且有閃爍效果
- 道具所在的位置不會和障礙物重疊
- 遊戲的介面上，最上方會有一個方框顯示歷史最高分（因此頁面會紀錄過往的最高分數），其正下方則顯示遊戲進行中的分數
- 另外遊戲操作區域需要給定一個明確的黑線條方框區域
- 遊戲結束後，請將頁面跳轉到顯示是否需重新開始的方框（非跳窗），點選是則重新開始，點選否則自動關閉game.html頁面
接續是各個版號更新內容：
- v1.1.0
- 遊戲背景加上細小的移動顆粒，製造一點在星際中移動的感覺
- 提高射擊到障礙物的分數為一次20分
- v1.2.0
- 當分數超過1000分時，會有一種紫色的障礙物，會有突然加速靠近的效果
- 當取得道具時，車子周圍圍繞一圈細小的顆粒，且不同的道具會有不同圍繞效果
- 調整射擊得分的機制為：
綠色方塊20分
紅色方塊50分
紫色方塊100分
- 將遊戲名稱命名為“Nebula Escape”
- v1.3.0
- 在第一次進入遊戲頁面時，會先跳出一個對話視窗，這個對話視窗會顯示遊戲的規則，並邀請玩家進行遊戲
- 遊戲結束後，頁面跳轉到顯示是否需重新開始的方框（非跳窗），點選是則重新開始，點選否則出現感謝畫面
- v1.3.1
- 將部分程式碼重複或寫法不統一的部分做調整
- v1.4.0
- 行動裝置（手機、平板）能夠操作
- 因應行動裝置，在遊戲區域的正下方放置有左、右鍵和空白鍵圖示的方塊，對應到左右移動及發射的功能
- 未來可調整功能
- 響應式網頁設計
在進行這個 project 時，我發現了 chatGPT 的強大，但也發現了諸多的限制。以下是一些個人在製作過程中的感想，並非絕對。
- 對於要提供 chatGPT 的資訊，我們可以依照 project 不同的面向（如介面樣式、遊戲邏輯）去將這些需求整理、分類，並條列出來。
- 藉由每次的提問，也讓 chatGPT 產生一些意見的回饋；而這些意見的回饋，也最終產生了後續的功能精進，某些程度上提升了遊戲的趣味性。
- 先前我也嘗試過使用過 chatGPT 4o，不過在 4o 的版本中，它似乎沒辦法一次消化太多的資訊，從簡單的功能一步一步邁向複雜，可能是操作 chatGPT 4o 比較恰當的方式；然而到了 chatGPT o1-preview ，能夠一次“消化”較多的訊息，因此在建構作品時較能一次到位。
- chatGPT 在 debug 的能力上似乎還是比較有限，在 debug 的來回中經常會陷入鬼打牆；這時拆解問題，或是使用者本身具備的基礎知識就蠻重要了。我對於前端的語法並不是很熟悉，也是在這次的實作中逐漸接觸到一些語法，進而在 prompt 去引用部分的語法，提升回覆的精準度。
- chatGPT 對於文字理解的差異：我在 prompt 中使用“車子”或是“飛船”對於產生出來的效果似乎有差異，將“車子”套用於描述中似乎更能夠讓它理解整套遊戲的運作邏輯（但我並不很確定這是否真的有所影響）。