2025年6月28日

《不等式打擊》3D 網頁數學遊戲

 一個任教數學的朋友給我看了數學學習單,主題是「一元一次不等式」,我就不細講它實際內容是什麼了,大概就是讓學生解很多不等式,然後用這些解來進行某個遊戲。我覺得那個遊戲的設計跟不等式主題的關係太遠,於是動起念頭想要做一個不等式的遊戲。


經過幾天努力,做出了這個《不等式打擊》,是將數學邏輯與策略戰爭相結合的 3D 網頁遊戲。

https://chihhsiangchien.github.io/InequalityStrike/index.html




什麼是《不等式打擊》?

玩家扮演一名飛彈指揮官。你的任務是透過建立一組或多組的數學不等式來定義打擊區域。當你定義的區域成功覆蓋地圖上的目標建築時,你就可以發射飛彈攻擊。


遊戲的主要特色包括:


  • 直觀的 3D 預覽:當你輸入不等式時,目標區域會以紅色高亮度即時顯示在 3D 場景中,讓抽象的數學概念瞬間變得具體可見。

  • 循序漸進的挑戰:遊戲包含多個關卡,從簡單的線性不等式 x > 5,到複雜的環形區域 x^2+y^2 > 9x^2+y^2 < 25,再到拋物線 y > x^2,逐步引導玩家掌握更進階的概念。(不過目前關卡我還要再微調做平衡,如果有興趣提供關卡建議的可以跟我說,不然我應該會懶得再動)

  • 策略性玩法:飛彈數量有限,你必須思考如何用最有效率的不等式組合,一次打擊最多目標,才能獲得高分。



如何遊玩?

1. 建立不等式

在左側的「飛彈瞄準系統」中,你需要組合出一個完整的不等式:


  • 選擇項目:點擊按鈕選擇一個變數表達式,例如 x, y, x+y, 甚至是 x^2+y^2

  • 選擇運算子:選擇一個運算子,如 > (大於), (小於等於), 或 = (等於)。

  • 填寫常數:在輸入框中填入一個數字。




完成後點擊「新增不等式」。你可以新增多個不等式,它們將以 AND 的邏輯組合,共同定義出最終的打擊區域,飛彈的落點都只有整數座標喔。


每當你新增或移除不等式,右側的 3D 場景都會即時更新紅色的預覽區域。這是遊戲核心的學習回饋機制。你可以清楚地看到:


  • x > 5 如何定義出一個垂直的半平面。

  • x^2+y^2 < 16 如何定義出一個以原點為中心的圓形區域。



  • 結合 x > 0y > 0 如何精準地鎖定第一象限。


2.發射飛彈

當紅色的預覽區域成功覆蓋了你的目標建築時,就可以點擊「發射飛彈」或「發射高級飛彈」了!但你需要儘可能縮小你的落點範圍,才能準確攻擊。高級飛彈擁有更大的爆炸半徑,適合用來對付密集的敵群,但數量也更稀少。


在有限的彈藥內摧毀所有目標,即可過關!



教學怎麼用

我沒教數學,但我想像用《不等式打擊》來教不等式的優點有這些

1. 視覺化與具象化

對許多學生來說,y < 1 是符號。但在遊戲中,它立刻變成區域。這種即時的視覺回饋,能幫助學生建立起代數表達式幾何圖形之間的直觀連結。老師可以讓學生自由嘗試,看看改變常數或運算子會對圖形產生什麼影響。

2. 探索式的學習環境

學生可以不斷嘗試不同的不等式組合範圍是什麼?


  • 「如果我把 < 改成 > 會發生什麼?」 → 區域立刻反轉。

  • 「如何只選出一個甜甜圈形狀的區域?」 → 學生會自己摸索出需要兩個 x^2+y^2 不等式,一個大於內圈半徑,一個小於外圈半徑。


透過探索式的學習過程,發現原來不等式可以這樣用,更能激發好奇心與解決問題的能力。

3. 課堂活動

  • 關卡挑戰賽:將學生分組,讓他們挑戰同一個關卡。比賽看哪一組能用最少的飛彈(代表最高效的數學解法)通關,並獲得最高分。

  • 設計關卡:讓學生在方格紙上設計自己的關卡,並寫下通關所需的不等式。這能反向驗證他們是否真正理解了不同不等式所對應的圖形。