德文名詞拔河遊戲 AI生成指令
學德文最困難就是要背德文名詞性別！今天要跟大家分享如何透過Google AI Studio建立德文名詞性別拔河遊戲：
Google AI Studio: https://aistudio.google.com/apps
生成指令：
請幫我開發一款名為「Der Die Das Tug-of-War」的德文名詞性別拔河遊戲。
請扮演一位資深的前端工程師與 UI/UX 設計師，寫出高品質、具備流暢動畫且支援手機版單螢幕完美顯示的程式碼。
【遊戲概述】
這是一個幫助學習者記憶德文名詞性別 (der, die, das) 的雙人/單人拔河遊戲。
畫面上方顯示雙方分數，中間是拔河動畫，下方是題目與作答區。
最先答對 10 題的隊伍獲勝。
【核心功能與邏輯】
1. 遊戲模式 (Game Mode)：
- 1 Player (vs AI)：玩家控制 Team 1，系統 AI 控制 Team 2。
- 2 Players：兩位玩家在同一台裝置上對戰。
2. 難度分級 (Levels: A1, A2, B1, B2, C1)：
- 內建題庫需依照這五個 CEFR 等級分類，每個等級至少提供 15~30 個德文單字（包含 word, gender, translation）。
- 在 AI 對戰模式下，難度會同時影響題庫難度與 AI 的強度：
* A1: 反應慢 (2.5s-4.5s)，答對率 50%
* C1: 反應極快 (0.4s-1.0s)，答對率 95%
3. PDF 單字萃取 (Vocabulary Source)：
- 允許玩家上傳 PDF 檔案。
- 使用 FileReader 將 PDF 轉為 Base64，並呼叫 Gemini API (gemini-3-flash-preview)。
- Prompt: "Extract 20 German nouns from this document. Return a JSON array of objects with 'word' (the German noun, capitalized), 'gender' ('der', 'die', or 'das'), and 'translation' (English translation)."
- 使用 responseSchema 強制回傳 JSON 陣列格式。
4. 遊戲機制：
- 題目出現後，玩家需點擊或按下對應的 der/die/das 按鈕。
- 答對：得 1 分，拔河繩子與人物往該隊移動，並在 1 秒後切換下一題。
- 答錯：該隊伍進入 1.5 秒的冷卻懲罰（按鈕變灰且無法點擊）。
- 防重複機制：每次遊戲開始時，將題庫陣列打亂 (Shuffle)，並用 pop() 依序抽出單字，確保單局遊戲內單字絕對不重複。
5. 控制方式：
- 支援畫面按鈕點擊。
- 支援鍵盤快捷鍵：Team 1 (A=der, S=die, D=das)；Team 2 (J=der, K=die, L=das)。
【UI 與視覺設計】
1. 整體風格：
- 深色背景 (Dark mode)，帶有科技感與霓虹發光效果。
- Team 1 使用青色 (Cyan)，Team 2 使用粉紅色 (Pink)。
2. 響應式佈局 (Mobile Optimization)：
- 必須使用 min-h-[100dvh] 與 Flex/Grid 佈局，確保在手機上「分數、拔河動畫、題目、雙方按鈕」全部塞在同一個畫面中，遊戲進行時絕對不需要上下滑動。
- 手機版時，Team 1 與 Team 2 的作答按鈕需左右並排顯示，方便兩人共用一台手機對戰。
3. 拔河動畫區塊：
- 畫面中間有一條發光的繩子。
- 左邊是 Team 1 人物 (🧑🚀)，右邊是 Team 2 人物 (🥷)，中間有一個標記物。
- 使用 Framer Motion 的 animate={{ x: (team2Score - team1Score) * 5% }} 讓整個群組根據分數差左右平滑移動。
- 答對時，該隊伍人物要有跳躍動畫，並飄出 "+1" 的文字。
4. 遊戲畫面流程：
- Idle (主選單)：顯示遊戲標題，提供模式、難度、單字來源的設定選項，並有「Start Game」按鈕。若內容過多可允許此區塊垂直滾動 (`overflow-y-auto`)。
- Playing (遊戲中)：顯示拔河主畫面。
- Game Over (結算畫面)：顯示哪一隊獲勝，並提供「PLAY AGAIN (再玩一次)」與「MAIN MENU (返回主選單)」兩個按鈕。
