0%

🚀 Math Monsters Shooter (數學怪物射手)

Math Monsters Shooter (數學怪物射手) 🚀

✅ Math Monsters Shooter - 國小一年級加減法遊戲練習

這是一個結合數學教育與射擊遊戲的瀏覽器應用程式。玩家駕駛飛船,透過計算數學題目來發射子彈,擊退不斷來襲的數字怪物。目標是提供國小低年級學生一個充滿趣味的計算練習環境。

MathMonstersShooter

🌟 核心特色

  • 🎮 寓教於樂:將枯燥的加減法練習轉化為緊張刺激的射擊遊戲。
  • 高效能渲染:使用 HTML5 Canvas 打造流暢的粒子效果與遊戲畫面。
  • 🌈 視覺美學:採用 Neon Space (霓虹太空) 風格,視覺效果精美。
  • 🔊 零依賴音效:利用 Web Audio API 實現輕量化的音效處理。
  • 📱 響應式設計:完美支援各種螢幕尺寸,隨時隨地都能練習。

🕹️ 立即試玩

🔗 點此進入遊戲:Math Monsters Shooter

🛠️ 技術架構

  • Core Framework: Vue 3 + Vite
  • Rendering: HTML5 Canvas (用於高效能粒子與遊戲渲染)
  • Styling: Vanilla CSS (Neon Space 風格)
  • Audio: Web Audio API
  • State Management: Vue Reactivity API

🏗️ 實作計畫

Phase 1: Initialization & Foundation

  • 初始化 Vue 3 + Vite 專案。
  • 設定基礎 CSS 變數 (Design Tokens) 與全域樣式。

Phase 2: Core Logic Implementation

  • 實作題目生成邏輯 (MathSystem)。
  • 建立遊戲引擎與實體管理 (GameEngine, EntityManager)。

Phase 3: UI & Interaction

  • 整合 Canvas 渲染與 Vue 組件。
  • 實作互動式答題面板與碰撞偵測。

Phase 4: Polish & Effects

  • 加入霓虹發光與粒子爆炸特效。
  • 優化音效回饋與介面轉場動畫。

🏗️ 專案宗旨

Math Monsters Shooter 的開發初衷是為了解決低年級學生在練習數學時容易感到乏味的問題。透過「答題即攻擊」的直覺機制,讓學生在追求遊戲高分的過程中,不知不覺地提升了心算的反應速度。

我的 Github 專案

🔗 我的 Github 專案: Math-Monsters-Shooter
✅ 歡迎 Star 🌟 並提供建議,讓我們一起為教育娛樂化出一份力!