TinyTap 兒童樂園
專為 1～3 歲幼兒設計的安全觸控遊戲 PWA，另有給大小孩／大人的「懷舊遊戲」，支援離線遊玩、可安裝至手機桌面。
功能特色
- 完整 PWA 支援（Android Chrome / PC Chrome 可安裝為獨立 App）
- 離線可用（Service Worker 快取所有資源）
- 全螢幕 standalone 模式
- 大觸控區域、鮮豔色彩、無失敗懲罰、即時正面回饋
- 家長設定（長按右上角）：預設模式（每次詢問／寶寶／幼兒／懷舊遊戲）、音量、遊玩計時提醒、釣魚的點點捲線輪
- 返回鍵要按住約 0.8 秒才會返回（外圈進度環填滿），寶寶亂拍不會跳出遊戲
- 可完全離線遊玩：Service Worker 安裝時就預先快取所有頁面與音效，搭飛機前打開一次 App 即可
- 全介面中文化
遊戲模式
寶寶模式（適合 1 歲）
- 氣球點點樂 — 點擊畫面任何地方爆出彩色氣球 + 粒子噴射 + 音效回饋，點空白處也有小火花
- 寶寶鋼琴 — 兒童玩具鋼琴：Do 到高音 Do 八個彩虹白鍵加五個黑鍵，按下去鍵會沉下去、飄出彩色音符；手指按著滑過琴鍵可以刷鍵，支援多指。上方有自動彈兒歌按鈕（小星星、小蜜蜂、倫敦鐵橋），彈奏時對應的鍵會亮起來，再按一次停止
- 躲貓貓 — 每次從八種藏身處（草叢、門、禮物盒、窗簾、棉被、雨傘、大石頭、窗戶）隨機挑四個大的，點一下打開，十六隻動物（貓、狗、乳牛、鴨子、獅子、大象、豬、兔子、母雞、綿羊、猴子、熊貓、長頸鹿、斑馬、老虎、熊）輪流跳出來「哇！」並叫一聲（沒有叫聲的唸名字），過一會兒自己躲回去，再換一隻新動物藏起來；上方「🔄 換地方」可以換一批藏身處
- 敲敲蛋 — 鳥巢裡有一顆大蛋（六種花色：圓點、波浪、鋸齒、小點點、恐龍蛋斑點、愛心），點畫面任何地方蛋就搖一下、裂開一點，點到第四下蛋殼彈開，跳出一隻動物（躲貓貓那十六隻再加烏龜、企鵝），撒彩帶、叫一聲並唸出名字；再點會再叫一次，過幾秒新的蛋從右邊滑進來。最近六隻不會重複，孵過的動物排在畫面下方（橫向時在右邊）
- 擦窗戶 — 畫面蓋著一層霧，手指隨便抹就擦掉霧、露出底下的動物和風景，擦掉約三分之二就整片放晴、喊出動物名字並叫一聲（動物跟躲貓貓同一套十六隻），接著重新起霧換下一張
- 動物鍵盤 — 六個動物鍵由低到高是大象、牛、獅子、狗狗、貓咪、鴨子，按下去動物叫聲會變成那個鍵的音高（Do Re Mi Fa Sol La），剛按到的動物會在舞台上跳出來
幼兒模式（適合 3 歲）
- 畫畫板 — 全螢幕 Canvas 繪畫，8 色色盤、3 種筆刷、橡皮擦、印章（星星/愛心/貓咪/小狗/花朵/蝴蝶）、撤銷、清除、背景色切換。內建描繪圖線模板（小馬/兔子/迷你豬），淺灰虛線引導小朋友沿線描繪
- 記憶翻牌 — 翻牌配對遊戲，先選關卡：🐄 農場（貓、狗、乳牛、鴨子、豬、兔子、母雞、綿羊）、🦁 動物園（獅子、大象、猴子、熊貓、長頸鹿、斑馬、老虎、熊）、🦖 恐龍（十二隻恐龍）、🐳 海裡的朋友（鯊魚、鯨魚、章魚、企鵝、海豹…）、🐠 海底世界（魚類拼圖的六種魚）、🌈 大集合（全部混在一起）。前五關 4×3 共 6 對，大集合 4×4 共 8 對，每次從那一關的圖裡隨機挑；配對成功會唸出名字，全部配完有慶祝動畫，可以直接進下一關，過關的關卡在選單上打星星
- 數一數 — 隨機顯示 1～5 個水果（蘋果/香蕉/葡萄/橘子/草莓），點選正確數字
- 賽車 — Canvas 跑道自動捲動，中央方向盤觸控轉動控制車子平滑移動。3-2-1 倒數開始、2 分鐘計時、目標 30 金幣。吃到金幣會飛向右上角收集欄。撞到石頭會扣一顆愛心，撞 3 次就結束
- 玩沙沙 — 側視圖沙盤，沙子是一粒一粒的格子沙（falling sand 細胞自動機），會往下掉、堆太陡就滑落。手指可以推沙、挖沙堆成沙丘；水桶倒出的沙粒會真的落下堆積；壓平板可以把沙壓平；城堡 / 波浪 / 小山是裝滿沙倒扣的模具，點在沙面上再拿起來就留下形狀，模具壓出來的沙是紮實的、不會自己崩塌
- 釣魚 — 池裡的魚跟著天氣變：晴天有鯊魚、鯉魚、河豚、烏龜、章魚、螃蟹；黃昏有鯉魚、蝦子、螃蟹、章魚、烏龜；夜晚有魷魚、章魚、龍蝦、螃蟹、鯊魚；下雨有青蛙、鯉魚、烏龜、蝦子、河豚；春天有鯉魚、青蛙、烏龜、蝦子、螃蟹；秋天有螃蟹、龍蝦、鯉魚、河豚、烏龜；冬天有企鵝、海豹、河豚、章魚、螃蟹。換天氣時不屬於新天氣的魚會游走、新的魚游進來，任務也會換成這種天氣釣得到的。另外到處都有輪胎、舊靴子、鐵罐，偶爾會出現閃閃發亮的稀有獵物（金色小魚、鯨魚、美人魚、寶箱），釣到有彩帶慶祝；寶箱要按「🔓 打開寶箱」，裡面可能是任何一種魚、稀有獵物，也可能是垃圾（沒按的話幾秒後自動打開）。所有魚和垃圾都是自己畫的 SVG 圖（不用 emoji，舊電腦也看得到）。每次進來的數量、組合與深度都隨機；魚會左右也會上下游動，每隔幾秒會有新的魚從池邊游進來，池子滿了舊的會游走。直接點池塘，點哪裡鉤子就丟到哪裡，落水會濺起水花；點到魚牠會跳一下、吐泡泡。魚咬餌時浮標被拉下去、跳出「！」、手機震一下，接著出現捲線輪，手指在輪子上畫圈收線，每種魚圈數不同（烏龜、螃蟹 2 圈，鯊魚、鯨魚力氣大要 5 圈，釣竿會彎、畫面會晃），河豚上鉤會鼓成一顆球、章魚會噴墨汁。家長設定可以打開「點點捲線輪」，還不會畫圈的小小孩連點輪子也能收線。釣到魚會用語音說出名字，掛在竿尖讓小朋友選「🪣 收下」或「🌊 丟回去」（不想要的魚丟回池塘會繼續游，6 秒沒選就自動收下），收下的飛進左邊的水桶；點水桶可以看釣到什麼、把魚放生回池塘，或打開水族箱看牠們游來游去（點魚會跳起來）。撿到的垃圾會掉在草地上，拖進右下角的回收桶。左上角的📖魚類圖鑑記錄釣過的種類（沒釣過是剪影，下面標出在哪幾種天氣出現），存在 localStorage，全部收集完有慶祝；上方的任務卡會出「釣三隻螃蟹」、「撿兩個垃圾」之類的小任務練習數數。右上角可以換場景：晴天、黃昏、夜晚（螢火蟲、月亮倒影）、下雨、春天（櫻花）、秋天（落葉）、冬天（下雪），每次進來隨機一種
- 太空彈珠台 — 太空主題彈珠台：霓虹檯面、星球彈射器、星星通道燈、發光拖尾的彈珠。右下角有彈簧拉桿，彈珠等發射時點一下右半邊畫面，右下方會跳出放大版拉桿，在裡面往下拉再放開就把彈珠打上去，拉越深力道越大；按擋板正下方的 ◀ ▶ 按鈕控制左右擋板，撞星球得分、四顆星星全亮有大獎，五顆球用完結算分數；剛進檯面 8 秒內掉球會免費還一顆。檯面參考 Space Cadet 的玩法：擋板上方有三角彈射板、兩側有出球道與回球道（出球道的救球燈亮著時會把球彈回來一次）、右牆有三個落靶、中央黑洞會把慢速的球傳送到上方白洞、左側有 U 形坡道（上層）。任務依序是「打倒三個靶 → 進黑洞 → 衝上坡道」，黃色箭頭會指著現在該打的目標，完成後有大獎並升一級
- 夜市彈珠台 — 台灣夜市那種沒有擋板的彈珠台：黃色機身、彩虹邊框、粉紫色檯面、跑馬燈和燈籠。彈珠會自己從右上方的投珠口掉到右下角的拉桿上（機台下方的珠盤顯示還剩幾顆）；彈珠在拉桿上等發射時，在畫面任何地方按住往下拖再放開，就把彈珠打上去，拉越深力道越大；力道不夠會滑回拉桿，可以重打、不扣球。彈珠穿過釘子陣後掉進底部七格之一，依格子得分（中間 100 分最高），掉進去的彈珠會留在格子裡疊起來；十顆打完結算總分
- 動物樂團 — 節奏遊戲：企鵝 🐧、貓咪 🐱、狗狗 🐶 在夜空舞台上組樂團，三條軌道對應三隻動物。星星照著兒歌旋律往下掉，掉到發光的線上時點下面的大圓按鈕（或軌道任何地方），長長的星星要按住到尾巴；判定很寬鬆，太早按不扣分，判定顯示「超棒！/ 不錯！/ 差一點」，旋律一直照譜播放、打中多一聲 tick。五首經典兒歌（小星星、兩隻老虎、小蜜蜂、倫敦鐵橋、王老先生有塊地），兩種難度 🐢 慢慢 / 🐰 快快；有分數、連擊（每 10 連擊動物一起跳），結算給 1～3 顆星與評級，各歌各難度的最佳紀錄存在 localStorage。支援多指與鍵盤 A/S/D、← ↓ →，切到背景會自動暫停
- 拼圖 — 恐龍與魚類拼圖合在一起，選單上方切換 🦖 恐龍拼圖 / 🐠 魚類拼圖。十二隻恐龍（暴龍、三角龍、劍龍、腕龍、翼手龍、甲龍、迅猛龍、棘龍、副櫛龍、厚頭龍、蛇頸龍、破殼而出的恐龍寶寶）各一張有背景的圖，可選 🐣 4 片、🦕 6 片或 🦖 8 片（預設 8 片）。碎片是真正的拼圖形狀，相鄰兩片一凸一凹（公母頭，每次開始隨機），外框是平的；托盤上的碎片縮小擺放，拿起來就變回原大。拼板上有淡淡的原圖和還沒拼的碎片虛線輪廓當提示，把碎片拖到對的位置就會吸上去、發出叮一聲；放錯會自己滑回托盤，不扣分。全部拼好整張圖跳出來、撒彩帶、恐龍吼一聲並唸出名字，可以再拼一次或換下一隻，拼完的恐龍在選單上會打星星
- 魚類拼圖：玩法跟恐龍拼圖一樣，換成六種海裡的魚：小丑魚（海葵旁）、河豚（圓滾滾、全身是刺）、鯊魚（笑嘻嘻）、海馬（海草間）、鮟鱇魚（深海、頭上掛著發光的小燈籠）、藍倒吊（珊瑚礁），各一張有海底背景的圖；可選 🐟 4 片、🐠 6 片或 🐡 8 片，拼完撒彩帶、咕嚕咕嚕冒泡泡並唸出名字
- 小小廚房 — 做簡單的料理：🥞 鬆餅（水果、巧克力豆、彩色糖、鮮奶油、奶油、楓糖漿、巧克力醬、蜂蜜）、🎂 生日蛋糕（四色蠟燭、草莓、櫻桃、愛心糖、星星糖、奶油花…）、🍕 披薩（香腸、青椒、蘑菇、鳳梨、玉米、橄欖、番茄、蝦子、起司、火腿、九層塔、洋蔥）。橫著玩：料理在中間，左右各一排、下面一排配料；先點一個配料（框起來並唸出名字），再點料理上想放的地方就放上去，一直點就一直加；也可以直接把配料拖到料理上。按「完成」料理跳一下、撒彩帶；蛋糕有插蠟燭的話會先點火、彈生日快樂歌，點火焰（或按「💨 一起吹熄」）把蠟燭吹熄才慶祝。所有配料都是自己畫的 SVG 圖
懷舊遊戲（大小孩／大人）
- 坦克大戰 — 紅白機風格的坦克射擊（只沿用玩法，關卡、像素美術、音效旋律全部原創）。守住下方的像素老鷹基地，打倒每關所有敵方坦克就過關，共 10 關原創地圖（新手訓練場、磚塊迷宮、小森林、大河、鋼鐵堡壘、冰湖、十字路口、雙子島、迷霧森林、最終決戰）。地形有磚牆（打得破）、鋼牆（三星子彈才打得破）、水（過不去）、樹林（會擋住視線）、冰面（放開方向會滑一段）。敵車有普通、快速、火力、裝甲（要打好幾下、顏色會變）四種，閃紅光的獎勵車打中會掉道具：星星（子彈升級，最多三星）、頭盔（護盾）、時鐘（敵人定住）、鏟子（基地外圈變鋼牆）、手榴彈（場上敵車全爆）、坦克（多一條命）。兩種難度：🎖️ 經典（3 條命、每關 20 台）與 🌱 輕鬆（5 條命、每關 10 台、敵車較慢、開場基地有鋼牆保護）；每個難度各自記住最高分與最遠到過的關卡，可以選「從第 N 關開始」（分數從 0 算起），10 關全破會顯示結局畫面。操作像紅白機手把：左邊十字鍵（手指按住可滑動換方向）、右邊紅色發射鈕（按住連發），手機直拿橫拿都能玩；電腦可用方向鍵／W A S D 移動、空白鍵／J 發射、P／Esc 暫停，切到背景會自動暫停。音效是 Web Audio 即時合成的方波／三角波／噪音
- 小精靈 — 小精靈（Pac-Man）風格的迷宮遊戲（只沿用玩法，迷宮、像素美術、音效旋律全部原創）。在左右對稱、沒有死路的迷宮裡吃光所有豆子就過關（小豆子 10 分、大力丸 50 分），左右兩邊的隧道相通。四隻鬼各有個性：紅鬼直接追、粉鬼堵前面、青鬼跟紅鬼包夾、橘鬼靠太近就跑開，會輪流「散開」與「追擊」；吃大力丸後鬼變藍會逃跑，這時可以吃鬼（200 → 400 → 800 → 1600），快恢復前會閃白，被吃掉的鬼剩眼睛跑回鬼屋復活。吃掉一些豆子後鬼屋下方會出現水果（🍒🍓🍊🍎🍈🚀🔔🔑，關卡越後面越值錢）。關卡無限，越後面小精靈與鬼越快、變藍時間越短。兩種難度：🎖️ 經典（3 條命、一萬分加一條命）與 🌱 輕鬆（5 條命、鬼比較慢、變藍時間比較長）；各自記住最高分。操作：十字鍵或直接在迷宮上滑動，可以先按好方向、走到路口自動轉彎；電腦可用方向鍵／W A S D，P／Esc 暫停，切到背景會自動暫停
- 復古雷電 — 直向捲軸射擊遊戲（只沿用街機雷電系列的玩法，關卡、音效為原創；飛機與地形圖使用 Kenney 的「Pixel Shmup」素材，CC0 授權，見
public/raiden/LICENSE-kenney.txt）。畫面是 240×320 低解析度直接放大，整個是像素風，空中的飛機會在地面投下影子、上方有雲飄過。三關：草原前線（道路、村莊、田地）、海上艦隊（島嶼）、敵軍要塞（沙地與水道），每關最後有放大兩倍的大魔王轟炸機，大魔王血量越少彈幕越兇，上方有血條，出場前會響警報。主武器有三種，打掉運輸機掉出會變色的武器球：紅色散彈（範圍廣）、藍色雷射（直線威力強）、紫色電漿（光束自動追著最近的敵人打），同色升級、最多 8 級；另有綠色追蹤飛彈與黃色核子飛彈（最多 4 級）、炸彈（全畫面爆炸、消掉敵彈、放的時候無敵）與勳章（500 分）。敵人有小飛鏢、戰鬥機、運輸機、戰車（海上是砲艇）、砲台、重裝戰機。兩種難度：🎖️ 經典（3 條命、死掉武器退回 1 級、飛彈消失）與 🌱 輕鬆（5 條命、敵彈比較少比較慢、死掉只掉 2 級並保留飛彈）；各自記住最高分與最遠關卡，可以從已到過的關卡開始。操作：左下角的搖桿往上下左右推就能移動（類比搖桿，推越遠飛越快、可以斜著飛），也可以在畫面任何地方按住拖曳（相對位移，手指不會擋住飛機），一直自動射擊，右下角 💣 放炸彈；電腦可用方向鍵／W A S D 移動、X／K／空白鍵放炸彈、P／Esc 暫停，切到背景會自動暫停
技術架構
| 項目 | 技術 |
|---|
| 框架 | Next.js 16 (App Router) |
| PWA | Serwist (@serwist/next) + 手動 SW 註冊 |
| 樣式 | Tailwind CSS v4 |
| 音效 | Web Audio API 合成 + .wav 檔案 |
| 動畫 | CSS Animations + Canvas 粒子特效 |
| 圖形 | Inline SVG React 元件 |
| 狀態 | React Context + useState |
| 觸控 | Pointer Events API（統一觸控與滑鼠） |
專案結構
src/
├── app/ # Next.js App Router 頁面
│ ├── baby/ # 寶寶模式（選單）
│ │ ├── balloons/ # 氣球點點樂
│ │ ├── piano/ # 寶寶鋼琴
│ │ ├── peekaboo/ # 躲貓貓
│ │ ├── hatch/ # 敲敲蛋
│ │ ├── wipe/ # 擦窗戶
│ │ └── animals/ # 動物鍵盤
│ ├── toddler/ # 幼兒模式
│ │ ├── drawing/ # 畫畫板
│ │ ├── memory/ # 記憶翻牌
│ │ ├── counting/ # 數一數
│ │ ├── racing/ # 賽車
│ │ ├── sand/ # 玩沙沙
│ │ ├── fishing/ # 釣魚
│ │ ├── pinball/ # 太空彈珠台
│ │ ├── night-market/ # 夜市彈珠台
│ │ ├── rhythm/ # 動物樂團
│ │ ├── puzzle/ # 拼圖（恐龍 / 魚類）
│ │ └── kitchen/ # 小小廚房
│ ├── retro/ # 懷舊遊戲（選單）
│ │ ├── tank/ # 坦克大戰
│ │ ├── pacman/ # 小精靈
│ │ └── raiden/ # 復古雷電
│ ├── ~offline/ # 離線 fallback
│ ├── sw.ts # Service Worker
│ └── manifest.ts # PWA Manifest
├── components/
│ ├── baby/ # 氣球遊戲 + 粒子 Canvas / 寶寶鋼琴 / 動物鍵盤 / 躲貓貓 / 擦窗戶 / 敲敲蛋（EggArt 蛋與鳥巢的 SVG 圖）
│ ├── toddler/ # 畫畫板 / 記憶翻牌 / 數數 / 賽車 / 玩沙沙 / 釣魚 / 太空彈珠台 / 夜市彈珠台 / 動物樂團 / 恐龍拼圖與魚類拼圖（PuzzleGame 共用玩法、puzzleThemes 各自的圖與音效；dino/ 十二隻恐龍、fish/ 六種魚的 SVG 圖）/ 小小廚房（kitchen/ 料理與配料的 SVG 圖）
│ ├── retro/ # 坦克大戰、小精靈、復古雷電（遊戲主體、canvas 繪圖、素材載入、紅白機手把）
│ ├── svg/ # SVG 圖形 (shapes/animals/fruits)
│ └── ui/ # BigButton / BackButton / ParentSettings / TimerOverlay / RegisterSW
├── lib/
│ ├── audio/ # AudioManager (singleton) + synth.ts (合成音效) + chiptune.ts (紅白機風格音效)
│ ├── particles/ # Canvas 粒子引擎
│ ├── sand/ # 格子沙物理（純函式，含 node --test 測試）
│ ├── fishing/ # 釣魚遊戲邏輯（魚種、游動、戳魚、收線圈數、圖鑑、任務、場景、特效與天氣，含測試）
│ ├── pinball/ # 彈珠台物理（牆、彈射器、擋板、發射軌道、落靶、蟲洞、坡道、任務，含測試）；夜市彈珠台物理（釘子、格子、落定，含測試）
│ ├── piano/ # 寶寶鋼琴與動物鍵盤的鍵盤配置、自動彈奏時間表（含測試）
│ ├── peekaboo/ # 躲貓貓的藏身處與輪流躲藏的動物（含測試）
│ ├── wipe/ # 擦窗戶的擦拭格子與完成比例（含測試）
│ ├── hatch/ # 敲敲蛋的蛋花色、會孵出的動物、裂蛋與換蛋規則（含測試）
│ ├── dino/ # 恐龍拼圖的恐龍清單、切片、版面配置與吸附判斷（魚類拼圖共用，含測試）
│ ├── fish-puzzle/ # 魚類拼圖的魚清單（含測試）
│ ├── kitchen/ # 小小廚房的料理、配料、擺放位置與生日快樂歌（含測試）
│ ├── rhythm/ # 動物樂團節奏遊戲邏輯（旋律解析、兒歌、譜面、判定計分、畫面換算，含測試）
│ ├── tank/ # 坦克大戰邏輯（10 關地圖、地形碰撞、移動、敵人 AI、道具、固定步長模擬、計分，可重現亂數，含測試）
│ ├── pacman/ # 小精靈邏輯（迷宮、各關速度與變藍時間、四隻鬼的追擊 AI、固定步長模擬，可重現亂數，含測試）
│ ├── raiden/ # 復古雷電邏輯（三關出場表、敵人路線與彈幕、大魔王階段、武器與道具、背景地圖拼接、固定步長模擬，可重現亂數，含測試）
│ ├── templates/ # 描繪圖線模板 (小馬/兔子/迷你豬)
│ ├── settings/ # SettingsContext + localStorage
│ └── utils/ # 顏色、隨機數工具
├── public/
│ ├── icons/ # PWA 圖示 (192/512/maskable/apple-touch)
│ └── sounds/ # 音效檔案 (動物/語音/回饋)
└── scripts/
└── generate-sounds.mjs # 音效產生腳本
開始使用
# 安裝依賴
npm install
# 開發模式
npm run dev
# 單元測試（沙子物理模組，使用 Node 內建 test runner）
npm test
# 建置
npm run build
# 預覽 production（PWA 安裝需在此模式測試）
npm start
注意：因 Serwist 尚未支援 Turbopack，dev 和 build script 已內建 --webpack 旗標。
PWA 安裝測試
- 執行
npm run build && npm start
- Chrome 開啟
http://localhost:3000
- 網址列右邊出現安裝圖示，或到
⋮ → 安裝 TinyTap 兒童樂園
- DevTools → Application → Service Worker 確認已註冊
- 斷網後重新整理，確認可正常遊玩
- Android Chrome 點選「新增到主畫面」可安裝為獨立 App
音效來源
public/sounds/animals/ 的動物叫聲已剪成 1～2 秒、統一響度後轉成 mp3。牛、獅子、貓來自 ElevenLabs 音效庫，免費方案需註明來源 elevenlabs.io（動物鍵盤畫面底部已標註）；其餘為 CC0 或公有領域錄音，不需標註：
