利用 Poe Canvas App 設計打字遊戲學生字
8Create a comprehensive typing challenge game called "Galaxy Typing Challenge" with the following specifications:
*Core Game Mechanics:*
Words fall from the sky slowly and students type them to destroy/explode them
3 lives system (lose life when words reach bottom screen)
Three difficulty levels: Beginner (3-second intervals, 0.5px fall speed), Proficient (2.2-second intervals, 0.7px fall speed), Expert (1.6-second intervals, 1.0px fall speed)
Scoring system: award points based on difficulty level (10 × level name length)
Real-time statistics: score, words typed, accuracy percentage, remaining lives
*Visual Design:*
Galaxy/space theme with animated starfield background (100 twinkling stars + 3 shooting stars)
Use Orbitron font for sci-fi aesthetic
Color scheme: neon green (#00ff88) for UI, falling words start green and turn red when typed
Responsive design supporting both mobile and desktop
Words have neon glow effects and explosion animations when destroyed
*Audio & Language Features:*
Use browser's built-in speech synthesis (not external APIs) to pronounce words when correctly typed
Display Traditional Chinese translations in large golden text (24px) that appears above English words with fade-in-up animation when typed correctly
Support both light and dark modes
*Vocabulary:*
Use these 100 HKEdcity curriculum-based technology terms with their Traditional Chinese translations:
computer (電腦), windows (視窗), notebook (筆記型電腦), power (電源), password (密碼), login (登入), incognito (無痕), browser (瀏覽器), screenshot (螢幕截圖), keyboard (鍵盤), mouse (滑鼠), click (點擊), drag (拖拉), copy (複製), paste (貼上), chat (聊天), google (谷歌), camera (相機), photos (照片), ipad (平板電腦), markup (標記), pdf (PDF文件), jpg (JPG圖片), screen (螢幕), recording (錄影), microphone (麥克風), control (控制), ai (人工智慧), chatgpt (ChatGPT), prompt (提示), context (語境), coding (編程), scratch (Scratch), block (積木), programming (程式設計), algorithm (演算法), variable (變數), loop (迴圈), nested (巢狀), sprite (角色), function (函數), digital (數位), literacy (素養), steam (STEAM), science (科學), technology (科技), engineering (工程), mathematics (數學), computational (運算), geometry (幾何), drawing (繪圖), shapes (形狀), triangle (三角形), rectangle (長方形), square (正方形), circle (圓形), polygon (多邊形), hexagon (六邊形), pentagon (五邊形), symmetry (對稱), pattern (圖案), angle (角度), rotation (旋轉), game (遊戲), controls (控制), audio (音頻), sound (聲音), video (影片), upload (上傳), download (下載), file (檔案), image (圖像), meme (梗圖), canva (Canva), generate (生成), vision (視覺), neural (神經), network (網路), machine (機器), learning (學習), data (資料), training (訓練), prediction (預測), recognition (辨識), facial (面部), security (安全), sensors (感測器), autonomous (自主), driverless (無人駕駛), database (資料庫), system (系統), interface (介面), application (應用程式), software (軟體), hardware (硬體), monitor (顯示器), pixel (像素), resolution (解析度), graphics (圖形), processing (處理), troubleshooting (故障排除), privacy (隱私), canvas (畫布), student (學生), assignment (作業), classroom (教室), geometric (幾何的), trapezium (梯形), parallelogram (平行四邊形), rhombus (菱形), polygons (多邊形), equations (方程式), solve (解決), explanation (解釋), mistakes (錯誤)
*User Interface:*
Level selection screen with three neon-styled buttons
Game screen with HUD showing all statistics
Input field with minimum 16px font size for mobile compatibility
Pause/Resume and End Game controls
Game over screen displaying final statistics
Smooth animations and transitions throughout
*Technical Requirements:*
Use HTML5, CSS3, JavaScript with TailwindCSS
60fps smooth animations
Support for touch and mouse input
Custom modal dialogs (never use alert/confirm/prompt methods)
Responsive design that works on narrow mobile screens
Browser speech synthesis with English voice selection and 0.8x speed for clarity