今集將規格拆開做幾個簡化版嘅細 Prompt，逐句貼落去，同 AI 一步步「傾」出成個維港煙花實驗室。每一步都接續上一步加，唔使推倒重來。
片中 BEL 專業版 3D 模型資料來源：香港特別行政區政府 CSDI 空間數據共享平台（地政總署）｜道路資料 © OpenStreetMap 貢獻者
🧰 今次用咩工具
Gemini（Canvas 功能）：逐步生成互動網頁遊戲，免費版可用。
瀏覽器（電腦／手機都得）：開成品、分享畀學生，免費。
⏱ 每一步大約 10–20 秒，全程分層起大約 10 分鐘內。
Step 1：開 Gemini，加入 Canvas
入 gemini.google.com → 開新對話 → 撳輸入框「＋」→ 揀「Canvas」。
Step 2：一句 Prompt 起個基本框架
成句照抄，一隻字唔使改：
用 HTML、CSS、JavaScript 做一個單一檔案嘅互動網頁遊戲「維港煙花實驗室」，畀香港高小至初中學生玩，主題係 10.1 國慶 77 周年。全部圖形用 Canvas 手繪，唔好用外部圖片。介面用繁體中文（帶廣東話口語），要撐滑鼠同手機觸控。畫面做成手機直向 9:16，由上至下分五個區：標題列、夜空、天際線建築、維港海面、底部金屬顏料盤。標題列左邊寫「維港煙花實驗室」，右邊有個「國慶匯演 ▶」按鈕，底色金至橙至紅漸層。
等 10 幾秒——基本框架出咗：手機直向畫面，五區都有，右上有個靚仔按鈕。
Step 3：加天際線
成句照抄（接續上一個畫面，在原有基礎上加，不要推倒重來）：
喺天際線區，畫出由尖沙咀望向中環嘅維港天際線剪影，由左至右要有：LED 十字燈飾大樓、幾幢有紅色航空燈嘅普通大樓、中銀大廈（深色三角形，外牆有白色 X 形桁架，有天線）、綠色發光大樓、紅色 LED 大樓、藍光大樓、會慢慢轉嘅摩天輪、IFC（頂部有金黃色發光皇冠）、最右邊一幢有暖黃燈帶嘅大樓。海旁要有燈帶同幾束射向天空嘅探射燈。
等 10 幾秒——天際線出咗嚟，摩天輪仲識自己轉。
Step 4：加維港海面
成句照抄：
喺海面區，加入天際線燈光嘅倒影（上下顛倒、半透明、會左右搖晃），加入會橫向駛過嘅船（天星小輪、紅帆船、觀光船，各有唔同顏色同窗燈，船身要跟 Y 座標做透視縮放），再加三艘靜止嘅躉船喺海面上（左、中、右各一），所有煙花之後都由呢三艘躉船發射。
等 10 幾秒——海面郁晒：有船經過、燈光倒影喺水面搖，仲有三艘定住嘅躉船。
Step 5：加底部顏料盤（揀金屬）
成句照抄：
喺底部顏料盤區，加入 7 個圓形金屬按鈕：鍶（紅）、鈣（橙紅）、鈉（黃）、鋇（綠）、銅（藍）、鐵（金色火花）、鎂（白光），每個按鈕下面寫中文名。撳一個就揀選，最多揀 3 種，撳第 4 種會自動取消最早揀嗰種；初始預設揀咗「鍶」同「鐵」。上面要有個狀態列話你知而家揀咗咩、可唔可以撳天空發射。
等幾秒——顏料盤出咗，撳落去識揀金屬，狀態列識轉字。
Step 6：加煙花發射同爆炸
成句照抄：
撳天空任何位置，就由最近嗰艘躉船發射一枚煙花，拋物線上升，到達位置爆開（大約 120 粒粒子）。粒子顏色跟揀咗嘅金屬分配，唔好混色（揀紅同綠就一半紅一半綠）；粒子要畫成會發光嘅圓點，帶微細拖尾，用疊加模式令重疊位更光，受重力同摩擦力影響慢慢落。鐵要有金色火花效果（慢啲落、會閃）；鎂要夠白夠猛（快啲亮、會閃）。如果玩家耐咗冇撳（6 秒），就自動隨機揀 1 至 3 種唔重複嘅金屬，自動發射。
等幾秒——撳一下天空就真係爆到嘢，仲識自動放花。
Step 7：加知識卡
成句照抄：
每次玩家自己撳天空發射煙花、爆炸之後，喺爆炸位置附近彈一張半透明毛玻璃知識卡，列出用咗邊啲金屬同顏色，再加一句簡單科學解釋（例如焰色反應、鐵花、鎂光），2 秒後慢慢淡出；同一時間只顯示一張卡。如果同時揀咗「鍶」同「銅」，爆炸會變成紫色（呢個係唯一例外嘅混色），卡要講明「紫色＝鍶紅＋銅藍」。自動發射唔應該彈卡，淨係玩家自己撳先至有。
等幾秒——自己撳嘅煙花爆完會彈張靚仔知識卡，過兩秒自己散。
Step 8：加「國慶匯演」大結局
成句照抄：
撳右上角「國慶匯演 ▶」按鈕，自動播放一段大約 13 秒嘅煙花表演（唔好清走玩家本身揀咗嘅金屬）：先紅綠藍輪流放、中段來一發鍶加銅嘅紫色彩蛋（要彈返知識卡）、再嚟鐵花同紅色混合連發，最後喺畫面正中爆出粒子砌成「77」字形（用 Canvas 讀取「77」文字嘅像素再生成粒子嚟做，唔好淨係印文字），同時彈出「國慶 77 周年」金色大字，幾秒後淡出。播完按鈕恢復正常，玩家可以繼續自己玩。
等 10 幾秒——撳個按鈕，成套煙花匯演自動播埋「77」字形大結局。
分層寫 vs 一次過寫，點揀？
兩種寫法各有用途：想快、唔介意睇唔到中途效果，一次過貼晒規格書最快；想每一步都睇住個效果、方便中途執返錯處，就好似今集咁逐步拆開傾。拆開寫重有個好處——如果某一步出錯（例如天際線走樣），你只需要重講嗰一步，唔使成份規格重新再嚟。
拆分嘅原則好簡單：跟返畫面嘅「區域」或者「功能」分段——一區一句，一個功能一句，唔好將版面同邏輯混埋一齊講，AI 先至唔會漏嘢。
🔧 執漏五寶（常見問題）
記住分工：你負責講「想點」，佢負責諗「點做」；覺得邊一步唔啱，淨係講返嗰一步就得，唔使由頭嚟過。
📲 點樣攞去堂上用
Canvas 右上角「分享」→ 攞連結 → 貼落 Google Classroom 或者出 QR code。學生開 iPad 瀏覽器就玩到，唔使裝任何 app。
建議玩法：老師上堂先播放國慶匯演做引入，講解焰色反應點解唔同金屬會有唔同顏色；之後開放畀學生自己揀金屬放煙花，順手考吓佢哋記唔記得邊種金屬係邊種顏色。
🎓 你已經識多一種起教材嘅方法
一份規格書，可以一次過貼晒，都可以拆開逐步傾——兩種方法你自己揀，熟手之後甚至可以混合用：大框架一次過寫，細節逐步執。乜科都用得：歷史加朝代地圖、化學加元素周期表關卡、英文加文法過關遊戲。