Cursor實踐專案-11-遊戲(一),AI遊戲的「hello world」

專案說明

Cursor遊戲編程(一),AI遊戲的「hello world」-貪食蛇

耗費時間：約0.5小時

Cursor使用次數：1次左右

從這個專案開始，我將嘗試用cursor進行一系列遊戲的編寫。首先從「貪食蛇」這個遊戲開始，目前AI編程已經把當年的「hello world」 提升到了 「幫我編寫一個貪食蛇遊戲！」

我的計劃是持續更新各類型的遊戲製作，從中探索cursor在遊戲編程的方方面面。

成果展示

  • 貪食蛇遊戲

前置準備

  • Cursor

    • 版本：1.2.4
    • cursor rules : Cursor Rules
    • agent: claude-4-sonnet

  • 整體流程

    • 設定cursor規則->和LLM溝通需求->cursor編碼->調試輸出

問題記錄

  1. 一次就搞定，遊戲本身一點問題都沒。
  2. 整合到md文章中的時候，碰到了一些問題
    • 靜態資源的訪問權限要打開
    • MD文件解析，需要支援iframe框架

使用心得

  • 比想像中的更為強大，一句話，遊戲一次成功，正常能玩，雖然界面還差點，可能沒加更多的提示詞

專案詳細步驟

  1. 輸入需求
寫一個貪食蛇，盡可能地好玩，有趣，界面美觀，整體協調。
貪食蛇需求
  1. 編碼 ：編碼、等待結果輸出
貪食蛇編寫 貪食蛇編寫
  1. 驗證測試：直接執行index.html進行試玩
驗證測試
  1. 加載到網站：加載到本文章中的結果展示部分
    • 拷貝目錄下的css、js目錄以及index.html文件到 本網站的public/game/snake/ 目錄下。
    • 修改md文件的解析器，支援iframe的框架
    • 在md文件中，輸入以下指令
<iframe 
  src="/games/snake/index.html"
  width="800"
  height="800"
  frameBorder="0"
  className="block mx-auto"
  title="貪食蛇遊戲"
>
  您的瀏覽器不支援iframe，請
  <a href="/games/snake/index.html" target="_blank" rel="noopener noreferrer">
    點擊這裡
  </a>
  在新視窗中打開遊戲。
</iframe>
  1. 完成：挑戰一下高分？