幼兒園到小一的數學遊戲怎麼設計：湊十消消樂的思路

湊十法是小學低年級加法的基礎技巧：把兩個數字拆開，湊成 10 再加剩下的部分。1+9、2+8、3+7、4+6、5+5，五種組合，建立起來之後，兩位數加法就有了直覺的基礎。

問題是，讓幼兒園到小一的孩子練習這件事，傳統的做法——練習本、閃卡、口頭問答——回饋太慢，孩子很快就失去興趣。

湊十消消樂（make10-swap）把這個練習包裝成一個三消風格的配對遊戲。

核心規則：點兩個格子、數字相加等於十就消除

6×6 的格子，每格是 1 到 9 的數字。點一個格子，再點另一個格子，兩格交換位置。如果交換後有相鄰格子加起來等於 10，自動消除、格子補滿。

設計目標很單純：孩子在操作的過程中，腦子一直在問「這個數字還缺幾才能湊十」，但感覺自己是在玩消除遊戲。

能量系統：讓錯誤有成本，但不懲罰探索

遊戲有三格能量。規則是：

• 相鄰交換、有消除：免費，不扣能量
• 相鄰交換、沒消除：扣 1 格能量
• 跨格交換（非相鄰）：直接扣 1 格能量
• 能量用完：只能做相鄰交換，過關後補滿

這個設計讓孩子可以「試試看」——點一個格子、再點旁邊的格子試試有沒有消。試錯有成本，但成本不大；跨格操作要更確定才值得用能量。

相比直接把操作限制成只有相鄰，這個設計給了更多的探索空間，同時讓孩子自然學到「先找旁邊的」。

提示系統：三段式，不急著告訴你答案

孩子卡住了怎麼辦？提示系統分三段：

1. 5 秒後：其中一個可以消的格子開始發光
2. 8 秒後：那個格子開始抖動（更明顯的提示）
3. 14 秒後：配對的另一個格子也亮起來

不是一開始就把答案給你。讓孩子先有機會自己找，找不到再給線索，線索也是漸進的。

五種組合各有 emoji 故事

1+9、2+8、3+7、4+6、5+5 五種組合，每種配對消除時有獨立的動畫劇情：

• 1+9：鉛筆飛過來刺破氣球，氣球炸掉
• 2+8：雪飄下來，天鵝游向雪人
• 3+7：蝴蝶被蜘蛛網困住，球棒打破蜘蛛網，蝴蝶飛走
• 4+6：漩渦把船吸走
• 5+5：兩隻手掌擊掌

這些故事不是裝飾，是幫助記憶。孩子玩幾次之後，看到 3 和 7 就會想到「蝴蝶和球棒」，多了一個把數字和情境連結的記憶錨點。

連續消除與特效：讓「會玩」的感覺出現

多組同時消除時，有三種強度的特效：

• 同種組合出現 2 對：消除周圍 8 格
• 同種組合出現 3 對：消除十字形一整行一整列
• 同種組合出現 4 對以上：消除盤面上所有屬於這組數字的格子

這個設計讓孩子在盤面布局好的時候，可以觸發連鎖消除和大量特效。那個瞬間有「我做到了」的感覺，比純粹的答對回饋更強烈。

圖鑑收集：進度的可視化

頂部有五張小卡，分別對應五種組合。每消除一對，對應的小卡填一個點，填滿就完成這種組合的收集。

五種都收集完就過關，進下一關。每關需要收集的次數增加（第一關各 2 次，第二關各 3 次，依此類推）。

這個設計讓孩子清楚知道「還差幾個」，有具體的目標感，比單純「得夠多分才過關」的設計更適合這個年齡層——小孩對「還缺 2 個」的掌握感比「還差 30 分」直觀很多。

技術實作的幾個細節

音效用 Web Audio API，不需要音檔。交換音、消除音、收集音、過關音全部用 OscillatorNode 合成，消除的音色會隨連消層數變化（正弦波→三角波→方波）。不需要載入任何音訊資源，減少首次進入的載入時間。

動畫全用 CSS + JavaScript 直接操作 DOM，不依賴任何動畫框架。格子的消除用 CSS animation（squish-pop），掉落用 translateY 過渡，彗星粒子用 fixed 定位 div 加 CSS transition。

棋盤生成保證無初始配對：新棋盤生成時，每個格子在放入數字前先計算哪些數字會讓旁邊的格子立刻湊成 10，排除掉這些數字再隨機選。這樣遊戲開始時不會有立即可消的組合，讓孩子需要思考而不是一開始就看到答案。

---

湊十消消樂（和重力版的湊十派對）是玩樂學最早的兩個遊戲，也是整個平台設計理念的原型：學習的動作包裝在遊戲機制裡，讓錯誤本身變成學習的一部分，而不是讓孩子覺得「我又做錯了」。