🐒 #69 猴子投擲大戰 Monkey Pixel-Art Clash：致敬 1991 QBASIC GORILLAS.BAS + 拋物線物理 + Firebase 雲端排行榜

黃凱揚（阿凱老師） · 桃園市龍潭區石門國民小學 · 2026-05-21

#69 真實名稱「🐒 猴子投擲大戰 (Monkey Pixel-Art Clash)」致敬 1991 年 QBASIC 經典遊戲 **GORILLAS.BAS**。React + TypeScript + Vite + 拋物線物理（重力 + 風力）+ 地形破壞 + 道具系統（10X / 酸 / 流星雨 / 雷射）+ Firebase Firestore 雲端排行榜（含防刷分 Rules）+ 8-bit 音效。

致敬 1991 年 QBASIC GORILLAS.BAS

DOS 時代 1991 年的 QBASIC 內建範例遊戲 GORILLAS.BAS — 兩隻大猩猩在城市天際線上互丟爆炸香蕉，看誰先擊倒對方。

那是 無數工程師的程式設計啟蒙遊戲（一打開 GORILLAS.BAS 程式碼 → 看到「這就是遊戲」→ 想自己寫一個）。

阿凱的 #69 猴子投擲大戰 是 這款 35 年經典的 React 重製版：

• 從大猩猩 → 改成猴子（pixel-art 風格更可愛）
• 從 QBASIC text mode → 改成 Canvas + React 像素美學
• 加上現代化功能（Firebase 雲端排行榜 / PWA / 道具系統）

#69 真實怎麼做？

真實標題：「🐒 猴子投擲大戰 (Monkey Pixel-Art Clash)」

完整功能（從 README 抽出）：

核心遊戲機制：

• 🎯 拋物線物理：拖曳發射，受重力 + 風力影響
• 💥 地形破壞：爆炸挖洞改變戰場地形
• 兩人輪流出招（同電腦對戰）

🎁 道具系統（4 種）：

• 10X 巨大化：香蕉變超大
• ACID 強酸：穿透地形
• 流星雨：天降多顆
• 雷射：直線攻擊

🌬️ 風力視覺化（神細節）：

• 雲層 + 旗幟 + HUD 三層指示
• 學生看得到風的存在

🏆 雲端排行榜：

• Firebase Firestore
• 含防刷分 Rules
• 全國學生 PK

🔊 8-bit 音效：

• Web Audio API 即時合成（不放 mp3）
• 撞擊 / 爆炸 / 風聲都自合成

📱 PWA：可離線玩、加入主畫面

🎨 螢幕方向：直立 / 橫向皆可玩

真實技術棧（React + Vite）

• React 19 + TypeScript + Vite
• App.tsx ~1590 行（B1 拆分後）
• 架構：
  • src/App.tsx 主編排
  • src/main.tsx React 入口 + audio unlock + SW 註冊
  • src/pwa.ts PWA 更新提示
  • src/firebase.ts Firestore 排行榜 API
  • src/game/constants.ts 物理 / 道具 / 顏色常數
  • src/game/types.ts GameState / Building / Particle 型別
• 環境變數：.env 填 Firebase config
• CI/CD：GitHub Actions 自動部署
• 部署：cagoooo.github.io/monkey/

為什麼這個工具值得寫獨立文章？

「經典遊戲現代化」+「程式設計啟蒙」雙重意義：

對學生：

• 看到「會物理 + 風力的遊戲」是基礎物理運動學的具象化
• 30 年前的程式設計入門遊戲 → 現在還能玩

對工程師：

• **「用 React 重製 1991 QBASIC」**是一個有趣的程式設計練習
• 看 cagoooo/monkey repo 學「遊戲狀態管理 + Firebase 排行榜架構」

對教育系：

• 「讓學生用工程師的眼光看遊戲」 — 「這背後是物理 + 程式」

跟阿凱其他遊戲對比

阿凱「致敬經典遊戲系列」清晰可見。

教學情境

自然科「拋物線運動」單元：

• 講「水平 + 垂直分速度」抽象 → 玩 #69 看香蕉飛
• 切換風力 → 看影響軌跡
• 物理 → 程式 → 遊戲三層關聯

資訊課「程式設計史」單元：

• 講 1991 QBASIC → 看 #69 致敬版
• 「40 年前一台 DOS PC 也能跑這種遊戲」

下課休閒 PVP：

• 兩人輪流玩 → 排行榜 PK
• 全班一起拼最高分

配對工具推薦

• #9 超級瑪莉歐冒險 — 同款 Canvas 遊戲
• #85 南極大冒險：企鵝跑酷 — 致敬經典系列同伴
• #28 瑪莉歐風格平台跳躍 — 早期版

適用對象

• 國中小自然 / 物理老師（拋物線運動單元）
• 資訊老師（程式設計史 + 遊戲開發）
• 想看「React + Firebase 遊戲架構」的開發者
• 想看「1991 QBASIC 經典重製」的懷舊玩家

想試試？

→ 前往 #69 猴子丟香蕉 - 投擲大戰爭

兩人開玩 — 看誰先學會「逆風該怎麼瞄」。