🎮 #126 DEADZONE 能量防線：把失敗放在策略上，孩子才會想再試一次
#126 是一款直接在瀏覽器跑的 3D 塔防射擊：三種能量武器隨時切換、三種防禦塔各有分工、十波殭屍撲向能源核心。最關鍵的設計是角色不受傷害、敵人只攻核心——失敗回饋落在「這一波該把塔蓋在哪裡」，是能被討論、被修正、被下一局驗證的判斷，孩子因此願意再想一次。
一個很現實的觀察：孩子放棄的時間點
我在資訊課放過不少小遊戲，觀察到一個很一致的現象：讓孩子放棄的通常不是「太難」，而是「重來的代價太高」。
碰到敵人就立刻結束、一結束就得從頭再來、前面五分鐘的布局全部歸零——這種設計在遊戲市場上很常見，因為玩家是自己選擇要挑戰的。但放進四十分鐘的課堂，它會造成很現實的兩極化：反應快的孩子越玩越順，手速慢的孩子重來幾次之後就把視窗關掉，開始找別的事做。
更關鍵的是，這種設計把失敗的原因全部指向「我手不夠快」，而那跟我真正想讓孩子練的東西——觀察、判斷、規劃、取捨——幾乎沒有關係。教育上真正有價值的失敗，是那種可以被說出原因、可以被修正、下一次能驗證的失敗。
所以在做 DEADZONE｜能量防線 的時候，第一條定下來的規則不是武器有幾種，而是：玩家角色不受傷害，敵人只攻擊能源核心。
這個規則，改變了孩子面對失敗的方式
角色不受傷害，代表孩子可以放心走進戰場中間、繞到彎道後面、試試看站在哪個角度射得到最多敵人。他不會因為「站錯位置」被立刻懲罰，只會因為「塔蓋錯位置」而讓核心掉血。嘗試的成本被壓到很低，探索才會真的發生。
於是孩子講得出口的失敗原因，從「我反應不夠快」變成「我這一波的火力沒有覆蓋到那個彎道」。這是完全不同層次的兩句話——後者可以被討論、被修正、被下一局驗證，也才有辦法在課堂上接著問「那你下一局打算怎麼調整？」
遊戲的結束畫面也刻意不只寫一個 GAME OVER，而是告訴你撐到第幾波、擊退幾隻，並直接給一句可以照著試的戰術建議：試試在彎道搭配冰凍稜鏡與電漿迫擊塔。失敗在這裡不是句點，是下一輪的提示。
三種能量武器：熱量條逼你做選擇
玩家手上有三把可以隨時切換的能量武器（鍵盤 1／2／3，手機點武器卡）：
- 脈衝步槍：傷害 23、射速最快的通用型，射程也最遠。打雜兵很順。
- 電漿重砲：單發傷害 64，附帶爆炸範圍，但冷卻長、發熱高。適合一群敵人擠在彎道時一發清掉。
- 冰霜射線：單發只有 10 點傷害，但它的價值不在傷害，而在減速。拿它把快速殭屍拖慢，你的塔就多了幾秒輸出時間。
真正讓武器切換變成「決策」而不是「裝飾」的，是三把槍共用同一條熱量條。電漿重砲一發就吃掉 28 點熱量，你不可能整局壓著它掃射；熱量滿了會強制冷卻，那幾秒你只能看著敵人往前走。所以孩子會很自然地學到一件事：火力要分配，不是一直用最強的那把。
三種塔 × 一張全是彎道的地圖
塔有三種，價格與角色都分得很開：
| 塔 | 造價 | 角色 |
|---|---|---|
| 脈衝哨塔 | 100 | 穩定連射，單體輸出的基本盤 |
| 冰凍稜鏡 | 125 | 幾乎不造成傷害，專門減速控場 |
| 電漿迫擊塔 | 175 | 範圍爆破，一次打一群 |
開局只有 300 點能源。這個數字是刻意的——它剛好不夠讓你同時買一座迫擊塔和一座稜鏡，所以第一個決定就必須取捨。塔可以升級，也可以出售並返還已投入能源的 70%，代表「押錯位置」不是死局，但也不是沒有代價。
地圖是一條帶了好幾個直角彎的路徑。遊戲的戰術提示直接把答案講白了：彎道是最好的伏擊點。原因很單純——敵人在彎道會走比較久的路徑通過同一個塔的射程圈，等於免費多打好幾秒。這個道理不用我在黑板上畫圖，孩子自己蓋錯兩次就懂了。
敵人也有節奏：普通殭屍打底，第 2 波起混入快速殭屍，第 3 波起出現重型殭屍，第 5 波和第 10 波各有一隻血量 1000 的巨型殭屍。撐過十波就贏。一局大約十分鐘，剛好是一節課的一個段落，或一次下課。
真實技術特色：一款要能在學校電腦上跑起來的 3D 遊戲
戰場是用 Three.js 建的，殭屍、守衛與貨櫃、水塔、油桶等場景物件都是 GLTF／GLB 模型，用 Vite 打包後部署在 GitHub Pages。音效比較特別——它不是音檔，而是用 Web Audio 即時合成的音調，所以整包載入量比想像中小很多。
不過真正花時間的不是 3D，是讓它在學校的電腦教室裡不出事：
- 沒有 WebGL 2 就明講。學校電腦硬體加速被關掉是很常見的事。這時候不會給一片黑畫面，而是直接寫出「請使用支援 WebGL 2 的 Chrome 或 Edge，並開啟硬體加速後重新載入」。
- 準備階段自動存檔。波次、能源與塔的配置會存進 localStorage，孩子不小心重新整理，會回到最近一次的部署階段，而不是從頭開始。
- 改版後的舊快取會自動修好。這是 PWA 最惱人的坑：新版上線但瀏覽器還抓著舊的程式碼片段，畫面直接白掉。這裡加了一層攔截，偵測到載入失敗會自動註銷 Service Worker、清掉快取再重載，並在畫面上說明「正在同步遊戲程式」，而不是讓孩子看著白畫面舉手叫老師。
- 桌機和手機是兩套操作。桌機是 WASD 移動加滑鼠瞄準、Shift 奔跑；手機自動切成左右雙搖桿，左手移動右手瞄準開火。平板加到主畫面之後可以離線玩。
另外還有五步驟的新手訓練提示條、暫停與倍速、全圖視角、瞄準輔助與音效開關——都是為了讓「第一次打開的人不用問人就能開始」。
我會怎麼帶
當成課間或獎勵活動：一局十分鐘剛剛好。因為角色不受傷害，程度落差大的班級不會有人卡在開頭就放棄，願意動腦的孩子則會去挑戰第 5、10 波的巨型殭屍。
當成資訊課的策略討論：我會先讓全班在電子白板上一起玩一局，每次要蓋塔就停下來問「蓋哪裡？為什麼？」，然後把塔的造價、傷害、射程三個數字寫在旁邊，讓他們自己算「175 塊的迫擊塔，值不值得等於一座哨塔加一點錢」。這是很具體的數值取捨練習。
當成 3D 網頁教材：高年級或國中的資訊課，可以直接開開發者工具對照——Three.js 場景怎麼組、GLTF 模型怎麼載、WebGL 偵測失敗怎麼降級、PWA 怎麼離線。它是一個活的、可以按 F12 拆開來看的範例，比投影片上的程式碼截圖有感覺得多。
配對工具推薦
- #120 3D 星際雷霆：隕石防禦與太空探索解題大冒險：同樣是 3D，但鏡頭是第一人稱駕駛艙。兩款放在一起，正好可以讓學生比較「第一人稱」與「等距俯視」在空間判斷上的差別。
- #102 外星人入侵·保衛石門 — 復古太空射擊 × 全校排行榜：同樣是「守住基地」的主題，但是 2D Canvas。適合對照 2D 與 3D 在效能、載入與操作設計上的取捨。
- #126 DEADZONE 能量防線：3D 塔防射擊：本篇主角。
適用對象
- 導師：需要一個十分鐘結束、不用註冊、不會有人一直卡關的課間活動。
- 資訊科任教師：想要一份可以按 F12 拆開來講的 3D／WebGL／PWA 現成教材。
- 數學與綜合課教師：可以用塔的造價、傷害、射程做很具體的取捨與比較練習。
- 資訊組長與活動承辦：需要一款免帳號、無廣告、不上傳任何資料、全程在瀏覽器本機執行的校內遊戲素材。
- 學生：喜歡動腦更勝手速的孩子，這款會比純反應型遊戲耐玩。
想試試？
→ 前往 #126 DEADZONE 能量防線：3D 塔防射擊
第一局先別急著蓋塔。花三十秒把地圖看一遍，找出那幾個直角彎——你會發現整局遊戲的答案，其實在敵人還沒出現之前就已經決定了。