สงครามโปรแกรมมอนสเตอร์
ช่วยฉันพัฒนา Prompt นี้ ในลักษณะเกมส์สปีชีส์ ที่เริ่มจากตัวอะมีบาเล็กจิ๋ว ไปสู่ไดโนเสาร์น้ำลึกลับตัวโตเจ้าแห่งท้องทะเล ช่วยเขียนโค้ดเกมแบบ AR (Augmented Reality) สำหรับเป็นสื่อการสอนแบบActive Learning ในรูปแบบไฟล์ HTML ไฟล์เดียว (รวม CSS และ JS ไว้ในไฟล์เลย) โดยใช้ Tailwind CSS สำหรับความสวยงาม และไลบรารี MediaPipe Hands สำหรับตรวจจับมือผ่านกล้องเว็บแคม ข้อมูลสำหรับรายวิชาของฉัน: · ชื่อวิชา/หัวข้อ: [สงครามภาษาคอมพิวเตอร์] · ธีมกราฟิกที่ต้องการ: [ระบุธีม เช่น อวกาศไซไฟ เหมือนอยู่ในโลกแห่งสงครามจริงๆ มี มอนส์เตอร์จริงๆ] รายละเอียดระบบของเกม: 1. รูปแบบเกมหลัก: เกมหลบมอนสเตอร์ (Rocket & Meteors Game) ที่ผู้เล่นต้องชูมือขึ้นมาหน้ากล้องเว็บแคม และใช้ "ปลายนิ้วชี้" เป็นเคอร์เซอร์ (Cursor) เพื่อโต้ตอบกับหน้าจอ เป็นผู้เล่นนั่งบนอะมีบา 2. การบังคับ (Virtual Joystick): มีปุ่มโปร่งแสง4 ทิศทาง (บน ล่าง ซ้าย ขวา) อยู่ที่ขอบจอ เมื่อผู้เล่นเอานิ้วไปทับปุ่ม อะมีบาจะเลี้ยวบินไปทางนั้น 3. ระบบผู้เล่น: หน้าแรกมีช่องให้กรอกชื่อผู้เล่น ในเกมมีระบบนับคะแนน (Score) และพลังชีวิต 5 ดวง (Lives) 4. ระบบเวลา (Time Attack): มีเวลานับถอยหลัง30 วินาทีในการเลื้อยไปกิน "ลูกไฟพลังสีแดง" หากหมดเวลาแล้วยังกินไม่ได้ พลังชีวิตจะลดลง 1 และสุ่มจุดเกิดเม็ดพลังใหม่ พร้อมเริ่มจับเวลาใหม่ 5. ระบบพลังเวทย์มนต์ : มีเวลานับถอยหลัง20 วินาทีในการเลื้อยไปกิน "ลูกไฟเวทย์มนต์สีฟ้า" หากเติมเต็ม 1 หลอดพลัง จะสามารถปล่อยพลังเวทย์มนต์โจมตีมอนส์เตอร์และอุกกาบาตเคลียร์หน้าจอพื้นที่ได้ 1 ครั้ง และสุ่มจุดเกิดเม็ดพลังใหม่ พร้อมเริ่มจับเวลาใหม่ 6. ระบบคำถาม (Quiz System): เมื่อเลื้อยไปกินเม็ดพลังได้สำเร็จ เกมจะหยุดเวลาชั่วคราว แล้วป๊อปอัป "หน้าต่างคำถาม" ขึ้นมาตรงกลางจอ o ให้สุ่มคำถามจากชุดคำถามที่กำหนดไว้ o ผู้เล่นต้องใช้ "ปลายนิ้วชี้" เลื่อนไปวางแช่ไว้ที่ปุ่มตัวเลือก (ก, ข, ค, ง) o ฟีเจอร์สำคัญ: ต้องมี "วงแหวนเซ็นเซอร์ (Loading Ring)" โหลดเปอร์เซ็นต์ที่ปลายนิ้วประมาณ1 วินาที เพื่อยืนยันคำตอบ (ป้องกันการที่นิ้วกวาดไปโดนโดยไม่ได้ตั้งใจ) o หากตอบถูก: แสดงเอฟเฟกต์ตอบถูก, ได้คะแนน, อะมีบาจะโตขึ้น 1 ส่วน, เวลาและเกมกลับมาเดินต่อ o หากตอบผิด: แสดงเฉลยที่ถูกต้อง, พลังชีวิตลด 1 ดวง, อะมีบาจะตัวเล็กลง1 ส่วน (หากพลังชีวิตหมด = Game Over) 7. ระบบเสียง (Web Audio API): ให้ใช้ Web Audio API สังเคราะห์เสียงทั้งหมดผ่านโค้ด (ห้ามใช้ไฟล์เสียงภายนอก) ได้แก่: o เสียงเพลงประกอบแนว [ระบุแนวเพลง เช่น 8-bit เรโทร, ตื่นเต้น] o เสียง Effect: ตอนกินไอเทม, เสียงตอนตอบถูก, เสียงตอบผิด/หมดเวลา, และเสียง Game Over 8. UX/UI: จัดวางให้ปุ่มบังคับอยู่ขอบจอไม่บังพื้นที่เล่นเกม, พื้นที่เล่นเกมเต็มจอ (Fullscreen Responsive), และตัดข้อความรบกวนสมาธิออกให้หมด ชุดคำถามสำหรับวิชานี้ (ช่วยนำไปใส่ในโค้ดให้ด้วย): 1. คำถาม: [ใส่คำถามข้อที่ 1] ก. [ตัวเลือก] ข. [ตัวเลือก] ค. [ตัวเลือก] ง. [ตัวเลือก] เฉลย: [ระบุข้อที่ถูกต้อง เช่น ข.] 2. คำถาม: [ใส่คำถามข้อที่ 2] ก. [ตัวเลือก] ข. [ตัวเลือก] ค. [ตัวเลือก] ง. [ตัวเลือก] เฉลย: [ระบุข้อที่ถูกต้อง](สามารถเพิ่มข้อ3, 4, 5... ได้ตามต้องการ) ขอโค้ดที่สมบูรณ์ คัดลอกไปเซฟเป็นไฟล์ index.html รันบนเบราว์เซอร์แล้วเล่นได้ทันที ปรับเปลี่ยนและพัฒนาให้รวมสมดุล ปรับปรุงรวมกับตัวนี้ (Gameplay Mechanics & Balance) ไอเดียการกินไอเทม: เม็ดพลังงานสีแดง (Red Orb): เปลี่ยนเป็น "คุกกี้ความรู้สีชมพูหัวใจ" เมื่อกินแล้วเกมจะหยุดชั่วคราวเพื่อเข้าสู่หน้าจอ Quiz คำถามคอมพิวเตอร์สุดสนุก เม็ดพลังงานสีฟ้า (Blue Orb): เปลี่ยนเป็น "ดาววิเศษชาร์จพลังเวท" กินเพื่อสะสมเกจพลังเวทมนตร์ครั้งละ 25% ระบบ Quiz หน่วงเวลา 1 วินาที (Hover Confirmation): เมื่อหน้าจอคำถามขึ้นมา ผู้เล่นไม่ต้องกดคลิก แต่ให้เลื่อนปลายนิ้วหรือเมาส์ไป "วางแช่ไว้เหนือตัวเลือก ก, ข, ค, ง เป็นเวลา 1 วินาที" จะมีวงกลมสีชมพูโหลดจนเต็ม 100% เพื่อล็อกคำตอบ (ป้องกันการเผลอไปโดนโดยไม่ตั้งใจ) ปุ่มระเบิดพลังเวทมนตร์สุดฟรุ้งฟริ้ง (Floating Magic Portal): เมื่อชาร์จดาววิเศษจนเต็ม 100% จะมีปุ่มวงกลมสีม่วงพาสเทลเรืองแสงลอยขึ้นมาเด่นๆ ที่กลางล่างหน้าจอ ให้ผู้เล่นเลื่อนนิ้วไป "โฮเวอร์สัมผัสปุ่ม" เพื่อปล่อยคลื่น Shockwave วงแหวนสีรุ้ง เคลียร์น้องมอนสเตอร์เอ๋อออกไปทั้งหน้าจอทันที! ⚖️ 4. การปรับสมดุลความง่ายและความเสถียร (Balancing & Performance) ความเร็วศัตรู (Nerfed Enemy Speed): ปรับให้มอนสเตอร์ว่ายเข้ามาหาผู้เล่นช้าลง 30% เพื่อให้สอดคล้องกับการควบคุมด้วยนิ้วมือ และไม่ทำให้ผู้เล่นรู้สึกโดนรุมจนยากเกินไป ระบบเวลา (Generous Timers): ปรับเกจเวลาถอยหลัง (Timer บีบคั้น) ให้มีความยืดหยุ่น เพิ่มเวลาเป็น 30-40 วินาที เพื่อให้ผู้เล่นมีเวลาคิดและเพลิดเพลินกับภาพ AR จากกล้องหลัง เทคโนโลยีเบื้องหลัง (MediaPipe Optimization): ใช้โมเดลตรวจจับมือแบบความละเอียดต่ำ (modelComplexity: 0) เพื่อลดอาการหน่วงกระตุก ทำให้เล่นบนมือถือหรือคอมพิวเตอร์สเปกต่ำได้อย่างลื่นไหล 60 FPS สิ่งที่เพิ่มและปรับปรุงในเวอร์ชันมหาเสน่ห์นี้: น้องเยลลี่ดวงดาว (Mini Sparkle Pet): สัตว์เลี้ยงตัวน้อยตาแป๋วแก้มป่องที่จะว่ายน้ำโคจรรอบๆ ตัวคุณ มีฟิสิกส์การเลื้อยแบบสปริงยืดหยุ่นดุ๊กดิ๊ก และช่วยชนเก็บไอเทมแทนคุณได้เมื่อน้องว่ายไปโดน ปรับโหมดหน้าตาคิ้วท์ (Cute Entity Redesign): ตัวละครหลักปรับสีเป็นชมพู-ฟ้าพาสเทลเรืองแสง น่ารักน่ากอด มอนสเตอร์กลายเป็น "น้องสไลม์เอ๋อ" (Glitch Slime) สีหวานๆ ที่ว่ายน้ำช้าลง ไม่น่ากลัว ไอเทมกลายเป็น "คุกกี้หัวใจสีชมพู" (Red Orb) และ "ดาวดาวนำโชคพาสเทล" (Blue Orb) ระบบล็อกคำตอบผ่านการโฮเวอร์ 1 วินาทีที่สมบูรณ์แบบ: เมื่อเข้าสู่หน้า Quiz วงแหวนโหลดสีชมพูจะค่อยๆ หมุนรอบนิ้วมือของคุณจนครบ 100% เพื่อความสมูทละมุนสายตา