「🐒 猴子投擲大戰 (Monkey Pixel-Art Clash)」是阿凱老師致敬 1991 年 QBASIC 經典 GORILLAS.BAS 的 React 重製版 — 那是無數工程師的程式設計啟蒙遊戲(兩隻大猩猩在城市天際線互丟爆炸香蕉),阿凱把它改成 pixel-art 猴子 + 現代化雲端功能。
🎯 核心特色
- 🎯 拋物線物理拖曳發射 — 受重力 + 風力影響,兩人輪流出招(同電腦對戰)
- 💥 地形破壞 — 爆炸挖洞改變戰場地形
- 🎁 4 種道具系統 — 10X 巨大化 / ACID 強酸穿透地形 / 流星雨天降多顆 / 雷射直線攻擊
- 🌬️ 風力視覺化三層指示(神細節) — 雲層 + 旗幟 + HUD,學生看得到風的存在
- 🏆 Firebase Firestore 雲端排行榜 — 含防刷分 Rules,全國學生 PK
- 🔊 Web Audio API 8-bit 音效即時合成 — 撞擊 / 爆炸 / 風聲都自合成(不放 mp3)
- 📱 PWA 可離線玩 + 加入主畫面
- 📐 直立 / 橫向皆可玩
💡 設計理念
React 19 + TypeScript + Vite,App.tsx ~1590 行(B1 拆分後),架構:App.tsx 主編排 + main.tsx audio unlock + SW 註冊 + pwa.ts 更新提示 + firebase.ts Firestore 排行榜 API + game/constants.ts 物理 / 道具 / 顏色常數 + game/types.ts GameState / Building / Particle 型別。.env 填 Firebase config,GitHub Actions 自動 CI/CD,部署 cagoooo.github.io/monkey/。從大猩猩 → 改成猴子(pixel-art 風格更可愛)、從 QBASIC text mode → Canvas + React 像素美學。
🎒 適合情境
阿凱「致敬經典遊戲系列」:
- #69 猴子投擲(本工具) — 1991 QBASIC GORILLAS.BAS(React + Firebase)
- #85 企鵝跑酷 — 1983 Konami Antarctic Adventure(React 19)
- #9 瑪莉歐冒險 — 任天堂 Mario(Canvas 純前端)
- #28 瑪莉歐風格平台跳躍 — 早期版
適合:
- 自然科「拋物線運動」單元(水平 + 垂直分速度抽象 → 玩遊戲看香蕉飛)
- 資訊課「程式設計史」單元(講 1991 QBASIC 經典)
- 想看「React + Firebase 遊戲架構」的開發者
- 想看「1991 QBASIC 經典重製」的懷舊玩家
兩人開玩 — 看誰先學會「逆風該怎麼瞄」。MIT 授權,cagoooo/monkey 開源。