W15 · 課程作業報告

星際遊戲設計

AI2 + VS CODE · SPACE INVADERS
姓 名 陳黃英
學 號 1111310033
日 期 2026.06.03
01

課程概述

本週課程以「星際遊戲設計」為主題,帶領學生從視覺化積木程式逐步進入文字程式開發,最後透過 AI 代理優化遊戲內容。整個過程分為三個版本:

第一版 (AI2):使用 MIT App Inventor 2 開發太空侵略者小遊戲,學習物件導向的基本概念,如 X/Y 座標、速度 (Speed)、方向 (Heading) 與碰撞偵測。

第二版 (VS Code + Python):將 AI2 的積木邏輯對應至 Python + Pygame 文字程式,學習事件監聽、矩形碰撞偵測與遊戲主迴圈的實作方式。

第三版 (AI 代理優化):透過 Antigravity 代理工具,對遊戲進行多關卡、生命機制、排行榜等功能的進階優化,並部署至網頁。

02

第一版 — MIT App Inventor 2

使用 ai2.appinventor.mit.edu 開發「太空侵略者」,以視覺化積木設計遊戲邏輯,適合初學者建立物件導向思維。遊戲包含以下核心元件:

Canvas 遊戲畫布 RocketSprite 火箭 SaucerSprite 飛碟 Ball1 子彈 Clock1 計時器 ScoreLabel 計分 Button1 重設
AI2 Designer 介面
[圖1] AI2 Designer 介面 — 元件配置與屬性設定,畫面顯示火箭、飛碟及子彈的座標與 Clock1 間隔設定
AI2 Blocks 積木程式
[圖2] AI2 Blocks 積木程式 — 包含拖曳事件、碰撞偵測、計時器與重設按鈕的完整邏輯

在積木設計中,主要學習了以下關鍵邏輯:

01
when RocketSprite.Dragged:監聽拖曳事件,呼叫 set RocketSprite.X to get currentX,讓玩家可左右拖曳火箭躲避飛碟
02
when Ball1.CollidedWith:偵測子彈碰撞飛碟,分數加 1 並讓飛碟隨機移動位置,other 參數代表被撞到的精靈物件
03
when Clock1.Timer:每隔固定時間讓飛碟隨機出現在新的 X 座標,模擬敵機移動行為
04
when RocketSprite.Touched:點擊火箭發射子彈,將子彈移動到火箭正上方,設定速度 5、方向 90°(向上)
03

第二版 — Python + Pygame (VS Code)

將 AI2 的積木邏輯轉譯為標準文字程式,使用 Python 3.12 + Pygame 2.6.1 在 VS Code 開發環境中重構遊戲,採用清晰的物件導向架構:

config.py · 遊戲參數 sprites.py · 角色類別 game.py · 核心邏輯 main.py · 程式入點

AI2 積木 → Python 對照表

AI2 積木事件 功能說明 Python / Pygame 對應
RocketSprite.Dragged 監聽滑鼠移動,改變角色 X 軸位置 MOUSEMOTION → 更新 rect.centerx
Ball1.EdgeReached 條件判斷:子彈超出螢幕邊界 if bullet.rect.top < 0:
Ball1.CollidedWith 矩形碰撞偵測(是否重疊) bullet.rect.colliderect(saucer.rect)
Clock1.Timer 計時器循環事件(時脈控制) pygame.time.set_timer() 或時間差更新
VS Code + Pygame 執行
[圖3] VS Code 開發環境執行畫面 — 左側顯示 main.py 程式碼,右側為 Python + Pygame 的遊戲視窗(Score: 2,火箭可用滑鼠拖曳操控)
04

第三版 — AI 代理優化

使用 Antigravity AI 代理工具,向 Gemini 描述遊戲需求,由 AI 自動規劃 Implementation Plan 並修改程式碼,生成優化版本至 20260521/ 目錄。

優化後的遊戲功能大幅提升,主要改進項目如下:

3 個 LIVES 生命機制:每場遊戲有三條命,被炸彈擊中損失 1 條,受傷時火箭有 1.5 秒無敵閃爍保護
三關卡設計:第一關 1 艘飛碟、第二關 2 艘交叉巡行、第三關 3 艘快速穿梭,每關限時 10 秒內擊中 3 次才能晉級
🏆
排行榜 (Leaderboard):遊戲結束後前五名可輸入名字,資料持久化儲存至 leaderboard.json
結束畫面:通過三關顯示綠色 CONGRATS,生命耗盡顯示紅色 WO!
優化版遊戲執行與排行榜
[圖4] Antigravity 代理規劃 Implementation Plan 介面,顯示 AI 自動修改 sprites.py (+220)、game.py (+538)、leaderboard.py (+107) 等檔案的過程
05

作業繳交說明

依照課程要求,本作業需完成以下五項繳交內容:

01
HTML 部署 (Neocities):將遊戲部署至 hwumusic.neocities.org/space_invanders/,可直接在瀏覽器遊玩
02
截圖與說明:記錄 AI 工具使用過程(AI2 積木、Gemini 提示詞、Antigravity 代理執行步驟)
03
操作錄影:使用 OBS 或 WIN+ALT+R 錄製遊玩過程與開發操作
04
個人化設計:可更改遊戲背景、元件圖形、音效等,加入個人特色
05
三種方式學習心得:撰寫使用 AI2、Python、AI 代理三種方式製作遊戲的心得體會
06

學習心得

透過這次「星際遊戲設計」的課程,我深刻體會到程式設計學習的層次感與樂趣。從最初使用 MIT App Inventor 2 的視覺化積木開始,讓我在完全不需要記憶語法的情況下, 就能理解「物件」有自己的屬性(X/Y 座標、速度、方向)、也能回應「事件」(被拖曳、碰撞、計時)。 這種學習方式讓抽象的程式概念變得直觀,是非常好的入門橋樑。

進入第二版 Python + Pygame 時,我最大的收穫是理解到「積木的背後其實就是程式碼」。 以前以為文字程式很困難,但對照 AI2 的積木後發現, MOUSEMOTION 就是拖曳事件, colliderect() 就是碰撞偵測—— 兩者的邏輯完全相同,只是表達方式不同。這讓我對物件導向程式設計有了更扎實的認識, 也了解到「模組化設計」(將功能分散到 config.py、sprites.py、game.py)如何讓程式更容易維護。

最令我印象深刻的是第三版 AI 代理(Antigravity)的使用體驗。 只需要用自然語言描述需求——例如「加入三關卡、生命機制、排行榜」—— AI 便自動分析現有程式碼、規劃修改計畫,並實際修改數百行程式碼完成功能。 這讓我意識到,未來的程式開發不只是「會寫程式」,更重要的是「懂得如何精確地表達需求」、 「能夠審查和驗證 AI 產出的程式碼品質」。

三種方式各有其價值:AI2 培養邏輯思維、Python 建立實作能力、AI 代理則展示了未來開發的可能性。 這次課程讓我深刻體驗到,「工具在進步,但理解原理的能力永遠是核心」。 如果沒有前兩版的學習基礎,我在使用 AI 代理時便無法判斷它產出的程式是否正確、 也不知道如何修正錯誤。這正是課程設計最用心之處,讓人由淺入深地真正理解遊戲開發的全貌。