課程類型:微學程 學程名稱:智慧數據分析與應用微學程 指導老師:經濟學系 王偉芳老師、蔡明熹老師, 派大老師
我希望不只是學會寫程式,而是做出有互動、有挑戰的作品。
因此選擇用 Three.js 開發一款 3D 飛行遊戲,從角色選擇到飛行控制與碰撞動畫,實現一個能玩、能展示的完整作品。
學習目標
熟練使用 Three.js 建構 3D 場景、物件與光影效果
實現飛行邏輯:加速、方向控制、上下飛行、碰撞檢測 等等
製作倒數計時、與命數的即時 HUD 等等提升遊玩體驗的內容
成功做出一個可以遊玩的3D 互動式遊戲
透過Three.js 網站作為編成環境
編成方式: 主要透過vibe coding 來產生,除方便外也可確保不同區域的編碼一致性
飛行控制機制:鍵盤操作左右旋轉、高度變化、空白鍵加速
障礙生成邏輯:隨機建築與樹木分布,模擬真實賽道環境
互動 UI 設計:顯示❤️生命數、⏱倒數秒數、📏飛行距離
紅閃動畫設計:碰撞時角色變色並短暫無敵,增強視覺衝擊力
視角切換與重啟:Q鍵切換視角,R鍵可回到初始狀態重新開始
重新開始後飛機亂飛自毀: 重新設定rotation() & speed() 的初值後解決
鏡頭視角錯誤看不到飛機: 透過localToWorld() 精準定位後解決
飛行感不流暢: 初期使用translateZ() 加速度不穩, 改成使用thrust() & speed() 控制
撞擊後沒有視覺反饋: 使用者撞到障礙時無感,後來設計了「紅色閃爍動畫」與生命扣減提示,增加衝擊效果。
障礙生成太稀疏且無邊界: 透過固定格線間距與排除起始安全區,創造足夠密集但合理的飛行通道,提升可玩性與策略性。
附圖為完成後的遊戲狀態
加入聲音特效與 BGM,強化臨場感
建立飛行紀錄與排行榜,增強競技動機
導入 AI 敵機或機關挑戰,增加策略性
支援多裝置操作(行動裝置)、實作 WebSocket 即時多人對戰模式