Game

เขียนโค้ดสำหรับสร้างเกม AR (Augmented Reality) เพื่อการศึกษา โดยใช้ HTML, CSS (Tailwind CSS ผ่าน CDN) และ JavaScript รวมไว้ในไฟล์ index.html เพียงไฟล์เดียวจบ ไม่ต้องเรียกใช้ไฟล์รูปภาพหรือไฟล์เสียงภายนอก (ใช้ FontAwesome สำหรับไอคอน และใช้ Web Audio API สำหรับสร้างเสียง Effect สังเคราะห์)" [เป้าหมายและระบบการเล่น (Gameplay)] กลุ่มเป้าหมาย: นักเรียนระดับชั้น ปวช. ปี 2 เพื่อทบทวนคำศัพท์ภาษาอังกฤษและทฤษฎีการออกแบบกราฟิก ระบบควบคุม AR: ใช้ MediaPipe Hands สำหรับตรวจจับมือผ่านกล้อง Webcam โดยใช้ตำแหน่ง "ปลายนิ้วชี้" (Index Finger Tip) เป็น Pointer แทนเมาส์ การเลือกคำตอบ: เมื่อนำ Pointer ไป Hover (ชี้ค้างไว้) ทับไอคอนคำตอบค้างไว้ 2 วินาที จะถือเป็นการยืนยันคำตอบ (มีแอนิเมชันวงแหวน Progress โหลดรอบนิ้วขณะชี้ค้าง) ระบบจับเวลา: มีแถบจับเวลา (Timer Bar) 15 วินาทีต่อข้อ หากหมดเวลาจะปรับเป็นตอบผิดทันที (Time's Up) ระบบเสียง Effect: เสียงตอน Hover (เสียงติ๊กเบาๆ), เสียงตอบถูก (เสียง Chime ใสๆ), เสียงตอบผิด/หมดเวลา (เสียงทุ้มต่ำ Buzzer) จำนวนตัวเลือก: แต่ละข้อมีตัวเลือกคำตอบทั้งหมด 5 ตัวเลือก (สุ่มสลับตำแหน่งตัวเลือกทุกครั้งที่ขึ้นข้อใหม่) [โครงสร้างหน้าจอ (Screens)] หน้า Start Screen: มีช่อง Input ให้กรอก "ชื่อผู้เล่น", ข้อความอธิบายวิธีเล่นสั้นๆ, ปุ่ม "Start Game" (สำหรับขอสิทธิ์กล้องและเริ่มเล่นเสียง) และข้อความ Loading ขณะเปิดกล้อง หน้า Game Screen: พื้นหลังเป็นวิดีโอจาก Webcam (ส่องกระจก Mirror-Video) ซ้อนทับด้วยองค์ประกอบ UI ด้านบนสุดมีแถบเวลานับถอยหลัง 15 วินาที มีแผงแสดงชื่อผู้เล่น และคะแนนปัจจุบัน (0/5) ตรงกลางมีกล่องข้อความโจทย์ พร้อมกล่องภาพตัวอย่างงาน (ใช้ URL จาก placehold.co) ด้านล่างมีปุ่มคำตอบ 5 ตัวเลือก วางเรียงกันให้พอดีกับหน้าจอ หน้า Feedback Overlay: หน้าจอโปร่งแสงสีดำเด้งขึ้นมา 3.5 วินาทีหลังจากตอบหรือหมดเวลา เพื่อแสดงไอคอนอารมณ์ ข้อความ Correct/Incorrect และรายละเอียดเฉลย (Feedback) ของข้อนั้นๆ หน้า Result Screen: แสดงชื่อผู้เล่น, คะแนนรวม (เช่น You got 4/5 points!), ข้อความ Feedback สรุปผลการเล่นตามระดับคะแนนเพื่อนำไปพัฒนาทักษะต่อ และปุ่ม "Play Again" [ธีมและการออกแบบ UI] "ปรับ UI ให้เป็นสไตล์ Neo-Brutalism (เส้นขอบสีดำหนา border-4 border-black, มีเงาแข็ง box-shadow สีดำไม่มีการเบลอ) แต่ใช้โทนสีแบบ Pastel Palette เน้นสีชมพูละมุน (Soft Pink) และเขียวมิ้นท์สดใส (Mint Green) สลับกับสีพาสเทลอื่นๆ เช่น เหลืองนวล ฟ้าพาสเทล เพื่อให้ดูสบายตา สนุกสนาน และเหมาะกับงานกราฟิกดีไซน์" [ชุดคำถาม 5 ข้อ (Array Object ใน JavaScript)] "เขียนชุดข้อมูลคำถาม 5 ข้อลงใน Array โดยแต่ละข้อประกอบด้วยหัวข้อ (Topic), โจทย์ภาษาอังกฤษ, ภาพตัวอย่าง, และตัวเลือก 5 ตัวเลือก (โดยมี 1 ข้อที่ถูก และ 4 ข้อที่ผิด พร้อมข้อความอธิบาย Feedback รายบุคคล) ดังนี้: ข้อที่ 1: Rule of Thirds โจทย์: "Where should we place the main object?" (ภาพตาราง 9 ช่องขาดจุดสนใจ) -> ถูก: Intersection / ผิด: Center, Corner, Top Edge, Random ข้อที่ 2: Golden Ratio โจทย์: "Which ratio represents the Golden Ratio?" (โครงสร้างสมดุลธรรมชาติ) -> ถูก: 1 : 1.618 / ผิด: 1 : 1, 16 : 9, 4 : 3, 2 : 1 ข้อที่ 3: Typography โจทย์: "How can we improve the text readability?" (หน้าโปสเตอร์ตัวอักษรเท่ากันหมด) -> ถูก: Hierarchy / ผิด: Same Size, All Caps, Many Fonts, Low Contrast ข้อที่ 4: UX/UI Design โจทย์: "What is missing on this UI screen?" (หน้าจอแอปหาปุ่มซื้อไม่เจอ) -> ถูก: Call to Action (CTA) / ผิด: Settings, Footer, Ad Banner, Logout ข้อที่ 5: Logo & Graphic Design โจทย์: "Which concept is best for Logo Design?" (แบรนด์ต้องการโลโก้ใช้งานหลากหลาย) -> ถูก: Simplicity / ผิด: Complexity, 3D Realism, Many Colors, Tiny Details"