科技教育創新專區 › 工具 #126

DEADZONE 能量防線:3D 塔防射擊

三種能量武器、三種防禦塔、十波殭屍。在彎道埋伏、用有限能源在「多蓋一座塔」與「升級舊塔」之間取捨,撐過十波守住能源核心。角色不受傷害、敵人只攻核心,失敗原因落在策略而不是手速,動腦但不挫折;桌機鍵鼠、手機雙搖桿都能玩。

⚡ 立即使用 💻 開源原始碼(GitHub)

DEADZONE|能量防線是一款直接在瀏覽器裡跑的 3D 第三人稱射擊 × 塔防遊戲。玩家扮演最後能源站的守衛,一邊親自開槍,一邊在敵人進攻路線上布置防禦塔,目標是撐過十波殭屍、守住核心完整度。

玩法設計

技術特色

以 Three.js 建構 3D 戰場,殭屍、守衛與場景物件都是 GLTF/GLB 模型,Vite 打包後部署於 GitHub Pages。音效不是音檔,而是用 Web Audio 即時合成的音調,載入量極小。內建五步驟新手訓練、暫停與倍速、全圖視角、瞄準輔助與音效開關;桌機是 WASD 移動加滑鼠瞄準,手機則切換成左右雙搖桿。

工程細節上做了三件對校園環境很實際的事:偵測不到 WebGL 2 時會明確告訴使用者要用支援硬體加速的 Chrome 或 Edge,而不是給一片黑畫面;準備階段自動把波次、能源與塔的配置存進 localStorage,戰鬥中重新整理會回到最近一次部署;改版後若遇到舊快取造成的載入失敗,會自動註銷 Service Worker、清掉快取再重載,並在畫面上說明正在同步新版。整份遊戲附 PWA manifest 與各尺寸圖示,可加到手機或平板主畫面離線遊玩。

標籤:#3D塔防 #能量武器 #殭屍防守 #策略思考 #資源取捨 #Three.js #WebGL #GLTF模型 #手機雙搖桿 #PWA離線 #資訊課素材 #已建置完成

相關教學情境文章

開源原始碼:參考這個工具做出你的版本

阿凱老師大部分的教育工具都在 GitHub 公開原始碼,歡迎老師、學生與開發者參考改造成適合自己情境的版本。文章頁左下角的「複製 AI 開發提示詞」可把工具資料與原始碼連結一次交給 ChatGPT、Claude、Gemini 等 AI 助手。