🚀 #102 外星人入侵·保衛石門：復古太空射擊 × 全校排行榜 × 可離線的下課十分鐘
#102 外星人入侵是阿凱寫給孩子的復古太空射擊遊戲：純 HTML5 Canvas 單檔零相依，三種難度、王關 Boss 母艦、火力道具與連擊加成，石門校徽開場、可加入主畫面當 App、離線也能玩，內建全校跨裝置排行榜，桌機鍵盤 + 手機觸控全支援。
下課十分鐘，我想要一個「打開就玩、還能全校拚名次」的遊戲
#101 的 3D 迷宮上線後，班上孩子下課搶著玩，但我發現一件事：有些孩子想要更直覺、更街機感的東西 — 不用學走位視角、按下去就有雷射、有爆炸、有分數往上跳。
於是我做了 #102：一款復古像素風的太空射擊遊戲 — 駕駛地球最後一艘戰機，擊退一波波外星艦隊。但這次我給它一個專屬主題：保衛石門。開場是石門國小的校徽，標題下面寫著「保衛石門 · DEFEND SHIH MEN」，孩子一打開就知道「這是我們學校的遊戲」。
#102 怎麼玩？走位 + 撿道具 + 拚連擊
打開 cagoooo.github.io/alien-invasion 看到的是石門校徽 + 霓虹標題的開始畫面。操作極簡：
← → / A D ← 移動戰機
（自動開火） ← 不用一直按射擊鍵
P ← 暫停
手機：手指滑動 ← 觸控操控
我刻意做成自動開火，因為對低年級或第一次玩的孩子，「一邊移動一邊還要按射擊」太難了。專心走位、閃子彈、瞄準 — 這樣每個孩子都玩得起來。
核心玩法：
- 👾 三種外星人 — 偵察兵（綠、脆）、戰鬥機（藍、會反擊）、轟炸機（粉、肉）。整隊橫向移動、碰到邊緣往下壓，剩越少打越快（經典太空侵略者手感）
- 💪 道具掉落 — 火力強化（單發 → 雙發 → 三連發）、急速射擊、能量護盾、增加戰機
- 🔥 連擊加成 — 連續擊殺不失誤，分數倍率會往上疊，逼孩子「貪一點但別貪過頭」
- ⚠️ 王關 Boss 母艦 — 每 5 波出現巨型母艦，三種彈幕（雙直射 / 扇形散射 / 瞄準你），上面有血條
三種難度，同一間教室不同孩子都玩得起來
這是我做教學遊戲最在意的一點 — 一款遊戲要能涵蓋不同程度的孩子：
- 🟢 簡單 — 5 條命、敵人開火慢、移動慢（三四年級、第一次玩）
- 🔵 普通 — 3 條命、標準節奏（高年級主力）
- 🔴 困難 — 2 條命、敵彈又快又密（高手 / 資訊老師自己挑戰）
選難度就在開始畫面，三顆按鈕，孩子自己挑。簡單模式讓「手沒那麼快」的孩子也能撐過幾波、嚐到上榜的甜頭；困難模式留給「已經破關十次」的孩子繼續找挑戰。
為什麼是「純 HTML5 Canvas 單檔」？
#101 用 React + Three.js，#102 我反其道而行 — 整個遊戲就是一個 index.html，零相依、零建置。理由很實際：
① 任何裝置點開就跑 — 沒有幾百 KB 的 bundle 要下載、沒有框架要載入。學校最老的那台 Chromebook 也是秒開。
② 改一個數值就上線 — 單檔意味著臨時想調敵人血量、難度節奏，改完 push 就生效，不用等冗長 build。
③ 教學上是活範例 — 資訊課講「網頁能做什麼」時，我直接打開原始碼給高年級看：「整個遊戲就這一個檔案，用 Canvas 畫的」。孩子看到外星人、爆炸、星空全是程式畫出來的，對『程式 = 畫圖 + 邏輯』的想像被打開。
加入主畫面當 App、沒網路也能玩
班級平板最怕「要玩還要開瀏覽器打網址」。所以 #102 做成 PWA：
- iPad / Chrome / Edge 開啟後選「加入主畫面」→ 變成全螢幕 App，孩子下次點 icon 就開（icon 就是石門校徽）
- 內建 Service Worker 把遊戲快取起來，沒網路也能玩 — 校外教學遊覽車上、Wi-Fi 斷線的角落都能打一輪
App 圖示是用程式把石門校徽重繪、疊在深空背景上，任何尺寸都清晰不破圖。
全校排行榜：跨裝置、可留名、健康競爭
這是 #102 跟一般小遊戲最大的差別 — 不是只有自己這台裝置的紀錄，而是全校共用一份。
遊戲結束輸入暱稱、按「上傳」，分數就進雲端（Firebase 匿名登入 + Firestore），全校同學在「🌏 全校」分頁看到同一份 TOP 5。離線時自動退回「📱 本機」榜，連得上線就看全校。
為什麼這對班級經營有用？因為衝高分要同時顧火力升級、別吃彈、連擊別斷，不是單純比手速。策略多元 = 不同特質的孩子都有機會上榜，而不是手最快的那個壟斷。
真實技術棧
- 遊戲核心：純 HTML5 Canvas 2D + 原生 JavaScript（單檔、零相依、零建置）
- 音效：Web Audio API 即時合成（雷射、爆炸、道具、Boss 登場）
- 排行榜：Firebase 匿名登入 + Firestore（跨裝置即時同步）
- PWA：manifest.webmanifest + Service Worker（可安裝、離線可玩）
- 校徽：Canvas 向量重繪石門國小校徽（無外部圖檔、任何尺寸清晰）
- 部署：GitHub Pages（cagoooo/alien-invasion）
桌機 vs 手機，操作有什麼不同？
- 桌機 / Chromebook：方向鍵或 A / D 移動，自動開火，P 暫停
- 手機 / 平板：手指在畫面上滑動，戰機跟著手指走
兩端都是「自動開火、只管走位」，從桌機換到平板沒有學習成本，孩子拿起哪台都會玩。
老師回饋
「孩子一看到開場是我們學校的校徽，整個眼睛亮起來。『這是石門的遊戲耶！』那種歸屬感，是隨便一個小遊戲給不了的。」
— 桃園某國小導師
「我們班平板沒網路的角落也能玩，校外教學遊覽車上整車安靜打外星人，我終於不用一直喊『不要吵』。」
— 帶隊出遊的級任老師
「全校排行榜一出來，下課就有孩子衝來問『我全校第幾』。為了上榜他們會自己研究怎麼撿道具、怎麼連擊，比我教還認真。」
— 資訊老師
跟其他工具的關係：學生自驅體驗，再補一塊
阿凱工具集裡「孩子打開就玩、不用老師全程顧」的自驅型體驗工具，#102 又補上一塊：
- #50 童樂學園：學科 × 趣味（廣度）
- #97 MBTI 校園奇遇記：個人 × 情境（深度）
- #101 3D 迷宮冒險：空間 × 反應（沉浸 3D）
- #102 外星人入侵：反應 × 策略（街機 × 全校競技）
#101 和 #102 剛好是一對：一個 3D 沉浸、一個 2D 街機，孩子照心情挑。
配對工具推薦
- #101 3D 迷宮冒險遊戲 — 第一人稱 3D 探索，跟 #102 是 3D / 2D 雙生
- #97 MBTI 校園奇遇記 — 16 型人格情境探索
- #102 外星人入侵·保衛石門 — 本篇主角
適用對象
- 國小導師 — 下課十分鐘 / 校外教學 / 班級獎勵的健康放電方案
- 資訊老師 — 高年級「網頁做遊戲」的 Canvas 活範例
- 帶平板的班級 — 可安裝、可離線，沒網路也能玩
- 想跟全校拚名次的孩子 — 留名上傳，看自己全校第幾
- 石門國小師生 — 開場就是自己學校的校徽，專屬感拉滿
想試試？
第一次玩：選「簡單」，手機直接滑動或桌機按方向鍵，自動開火，撐過幾波撿幾個道具，遊戲結束留個名上傳。
想拚名次：升「普通」，把火力升到三連發、別吃彈、連擊別斷，衝進全校 TOP 5。
找挑戰：「困難」2 條命、敵彈又快又密，留給已經破關很多次的孩子。
下節資訊課最後 10 分鐘，把這個丟給孩子當下課放電 — 而且這次，他們守的是石門。