เกมคณิตศาสตร์ "คณิตลูกโป่ง (Math Balloons)"

ทำหน้าที่เป็น Senior Web Developer และ UI/UX Designer สำหรับเด็ก
โปรดเขียนโค้ดสำหรับเกมคณิตศาสตร์ "คณิตลูกโป่ง (Math Balloons)" เพื่อนำไปใช้รันบน **Google Apps Script (GAS) Web App** และบันทึกคะแนนลง **Google Sheets**

ข้อกำหนดสำคัญ: เนื่องจากทำงานบน GAS โค้ดที่สร้างจะต้องประกอบด้วย 2 ส่วนหลักคือ
1. ไฟล์ Code.gs (ฝั่ง Server - ดึงและบันทึกข้อมูลลง Google Sheets)
2. ไฟล์ index.html (ฝั่ง Client - รวม HTML, CSS, Vanilla JavaScript ไว้ในไฟล์เดียว)

--- ส่วนที่ 1: การออกแบบ UI/UX สำหรับเด็ก (Child-Friendly Design) ---
- **สีสัน & ธีม:** ใช้สีพาสเทลสดใส (ฟ้า 하늘, เหลืองทอง, ชมพูพีช) พื้นหลังเป็นท้องฟ้าไล่ระดับสี มีก้อนเมฆลอยเอื่อยๆ (CSS Animation)
- **ตัวอักษร:** ใช้ Font แนวตัวกลมๆ น่ารักอ่านง่าย (เช่น 'Kanit' หรือ 'Mali' จาก Google Fonts) ตัวใหญ่ ชัดเจน
- **ปุ่มกด:** ปุ่มต้องดูเหมือนเยลลี่หรือปุ่มนูนแบบ 3D (ใช้ box-shadow ซ้อนกัน) เมื่อกดให้มีเอฟเฟกต์ยุบตัวลง (Active state)
- **Feedback เชิงบวก:** เมื่อตอบถูก ต้องมีเอฟเฟกต์พลุกระดาษ (Confetti - เขียนด้วย JS สั้นๆ หรือ Canvas) หรือตัวหนังสือ "+10" สีรุ้งเด้งขึ้นมา
- **ตัวละคร/มาสคอต:** มีตัวการ์ตูนง่ายๆ (เช่น นกฮูกใส่แว่น หรือเด็กยิ้ม - ใช้ Emoji 🦉 🧑‍🎓 เป็นตัวแทนได้) คอยให้กำลังใจในหน้าเมนู

--- ส่วนที่ 2: โครงสร้างระบบ (Client-Side - HTML/JS/CSS) ---
ให้เขียน HTML, CSS (อนุญาตให้ใช้ Tailwind ผ่าน CDN เพื่อความรวดเร็ว) และ JavaScript (Vanilla JS)
ระบบต้องมี 4 หน้าจอ (จัดการสลับการแสดงผลด้วย JS):
1. **หน้าเมนูหลัก:** - โลโก้เกม "คณิตลูกโป่ง" เด้งดึ๋ง (Bounce)
- ปุ่มเลือกระดับ 4 ระดับ (ป.1-3, ป.4-6, ม.1-3, ม.4-6) พร้อมสีปุ่มที่ต่างกัน
- ปุ่มดู "ทำเนียบคนเก่ง"
2. **หน้าเล่นเกม:**
- แถบด้านบน: แสดงคะแนนปัจจุบัน และปุ่ม "ออกเกม" ❌
- ตรงกลาง: ป้ายโจทย์คำถามขนาดใหญ่ (เช่น "12 + 5 = ?")
- พื้นที่ด้านล่าง/เต็มจอ: เป็น <canvas> สำหรับวาดลูกโป่งลอยขึ้นไป
3. **หน้าจบเกม:** - แสดงคะแนนที่ได้ พร้อมข้อความชมเชย
- ช่องกรอกชื่อ (บังคับกรอก)
- ปุ่ม "บันทึกคะแนน" (เมื่อกดแล้วต้องเรียกฟังก์ชัน GAS) โชว์ Loading state ระหว่างรอ
4. **หน้าทำเนียบ (Leaderboard):**
- ตารางหรือลิสต์แสดงรายชื่อและคะแนน โหลดข้อมูลมาจาก GAS
- เรียงลำดับคะแนนจากมากไปน้อย 10 อันดับแรก
- มีปุ่มกลับหน้าหลัก

--- ส่วนที่ 3: ระบบเกมเพลย์ (Canvas & Math Logic) ---
- **ตรรกะโจทย์:** เหมือนเดิม 4 ระดับ:
- 1: บวกลบ (1-30) ไม่ติดลบ
- 2: คูณหาร (สูตรคูณ 2-12) ลงตัว
- 3: บวกลบคูณเลขติดลบ, ยกกำลังสอง
- 4: ถอดรูทลงตัว, ลำดับการดำเนินการ (Order of Ops)
- **Canvas:** - ใช้ requestAnimationFrame สร้าง Game Loop
- สุ่มลูกโป่งหลากสี ลอยจากล่างขึ้นบน ความเร็วเพิ่มตามคะแนน
- มีทั้งลูกโป่ง "คำตอบถูก" และ "คำตอบหลอก"
- รองรับการแตะ/คลิก เมื่อโดนลูกโป่ง ให้ลูกโป่งแตก (วาด Particle กระจาย)
- ตอบถูก: เคลียร์จอ ได้โจทย์ใหม่ ได้คะแนน
- ตอบผิด: ลูกโป่งแตกเฉยๆ ไม่เสียแต้ม

--- ส่วนที่ 4: การเชื่อมต่อ Google Apps Script (Server-Side - Code.gs) ---
โปรดสร้างโค้ดสำหรับ Code.gs โดยมีฟังก์ชันดังนี้:
1. `doGet()`: สำหรับ Serve ไฟล์ index.html
2. `saveScore(name, score, level)`: ฟังก์ชันรับค่าไปบันทึกใน Google Sheets โดย Sheet ต้องมีคอลัมน์ (Timestamp, Name, Score, Level)
3. `getTopScores()`: ฟังก์ชันสำหรับดึงข้อมูลคะแนนสูงสุด 10 อันดับแรกจาก Google Sheets คืนค่าเป็น JSON (Array of Objects)

--- รูปแบบผลลัพธ์ที่ต้องการ ---
กรุณาแยกผลลัพธ์เป็น 2 ไฟล์:
1. ไฟล์ Code.gs (โค้ด GAS)
2. ไฟล์ index.html (โค้ดฝั่งหน้าเว็บทั้งหมด)
คอมเมนต์อธิบายโค้ดส่วนสำคัญเป็นภาษาไทย