「3D 迷宮冒險遊戲」是阿凱老師為國小高年級資訊課與下課十分鐘打造的 第一人稱 3D 探索遊戲，解決「想用瀏覽器玩 3D 遊戲卻要灌一堆軟體 / 想讓孩子玩有教育意義的遊戲卻找不到免費版本」的痛點。
🎯 核心玩法
- 🔵 收集藍色光球 — 散落在迷宮裡的關鍵目標，蒐集數會即時計分
- 🔴 躲避紅色巡守者 — 場上巡邏的紅怪會追你，碰到就 GG
- ⏱️ 與時間賽跑 — 計時開跑，挑戰最短秒數通關
- 🏆 全班 / 全校排行榜 — 通關後自動上榜，看自己班 / 全校排名
- 📱 桌機 + iPad 觸控全支援 — 桌機 WASD + 滑鼠視角；iPad / 手機左下虛擬搖桿 + 右下視角拖曳
- 🎮 第一人稱沉浸視角 — 走廊透視 + 動態光源，3D 空間感十足
💡 技術亮點
- React + Three.js + react-three-fiber (R3F) 純前端跑 3D，無後端伺服器
- PWA 可安裝 — manifest.webmanifest + Service Worker，iPad / Chrome / Edge 可加入桌面
- WebGL 硬體加速 — 在學校老舊電腦也能 30 FPS 流暢跑
- Schema.org VideoGame Structured Data — Google 搜尋會跳 Rich Result 卡片
- 完整 OG / Twitter Card — 轉貼 LINE / FB 自動顯示走廊透視預覽圖
- 深色 sci-fi 配色 — Inter + Noto Sans TC + JetBrains Mono 字型組合，介面質感像獨立遊戲
🎒 教學情境
國小高年級資訊課「3D 與遊戲設計」單元的實作範例（學生可看到「React + Three.js 真的能跑 3D」）、下課十分鐘的健康放電（取代孩子滑手機）、班級獎勵活動（達標後開放打 5 分鐘 + 上排行榜）、資訊週成果展（投影到大螢幕老師示範第一人稱探索）、特教 / 資源班視覺空間訓練（3D 空間定位與決策練習）、家長日攤位（讓家長體驗孩子在課堂玩什麼）。
🎓 為什麼適合放教室
全班排行榜會自然產生競爭感，但因為「光球數 + 時間」雙因子，孩子不容易作弊（光球少時間短、光球多時間長都會被排序）。第一人稱視角讓孩子專注，不會像平面遊戲那樣分心。免登入直接玩 — 點開網址就開始，不用註冊帳號、不用裝 app、不用付費，學校 Chromebook / iPad 都跑得動。