Game

ช่วยเขียนโค้ดเกมแบบ AR (Augmented Reality) สำหรับเป็นสื่อการสอนแบบ Active Learning ในรูปแบบไฟล์ HTML ไฟล์เดียว (รวม CSS และ JS ไว้ในไฟล์เลย) โดยใช้ Tailwind CSS สำหรับความสวยงาม และไลบรารี MediaPipe Hands สำหรับตรวจจับมือผ่านกล้องเว็บแคม ข้อมูลสำหรับรายวิชาของฉัน: ●      ชื่อวิชา/หัวข้อ: [นักล่าซามูไร] ●      ธีมกราฟิกที่ต้องการ: [ป่าบรรกาศญี่ปุ่น เช่น หิมะ, ป่าดงดิบ, บ้านญี่ปุ่นโบราร, หรือ โคมไฟ] รายละเอียดระบบของเกม: 1.       รูปแบบเกมหลัก: ซามูไร ที่ผู้เล่นต้องปัดมือขึ้นมาหน้ากล้องเว็บแคม และใช้ "ปลายนิ้วชี้" เป็นเคอร์เซอร์ (Cursor) เพื่อโต้ตอบกับหน้าจอ 2.       การบังคับ (Virtual Joystick): มีปุ่มโปร่งแสง 4 ทิศทาง (บน ล่าง ซ้าย ขวา) อยู่ที่ขอบจอ เมื่อผู้เล่นเอานิ้วไปทับปุ่ม ซามูไรจะเลี้ยวไปทางนั้น 3.       ระบบผู้เล่น: หน้าแรกมีช่องให้กรอกชื่อผู้เล่น ในเกมมีระบบนับคะแนน (Score) และพลังชีวิต 3 ดวง (Lives) 4.       ระบบเวลา (Time Attack): มีเวลานับถอยหลัง 30 วินาทีในการเลื้อยไปกิน "เม็ดพลัง" หากหมดเวลาแล้วยังกินไม่ได้ พลังชีวิตจะลดลง 1 และสุ่มจุดเกิดเม็ดพลังใหม่ พร้อมเริ่มจับเวลาใหม่ 5.       ระบบคำถาม (Quiz System): เมื่อเลื้อยไปกินเม็ดพลังได้สำเร็จ เกมจะหยุดเวลาชั่วคราว แล้วป๊อปอัป "หน้าต่างคำถาม" ขึ้นมาตรงกลางจอ ○      ให้สุ่มคำถามจากชุดคำถามที่กำหนดไว้ ○      ผู้เล่นต้องใช้ "ปลายนิ้วชี้" เลื่อนไปวางแช่ไว้ที่ปุ่มตัวเลือก (แตงโม ทุเรียน มังคุด) ○      ฟีเจอร์สำคัญ: ต้องมี "วงแหวนเซ็นเซอร์ (Loading Ring)" โหลดเปอร์เซ็นต์ที่ปลายนิ้วประมาณ 1 วินาที เพื่อยืนยันคำตอบ (ป้องกันการที่นิ้วกวาดไปโดนโดยไม่ได้ตั้งใจ) ○      หากตอบถูก: แสดงเอฟเฟกต์ตอบถูก, ได้คะแนน, เลือดกระจายสีฟ้า, เวลาและเกมกลับมาเดินต่อ ○      หากตอบผิด: แสดงเฉลยที่ถูกต้อง, พลังชีวิตลด 1 ดวง, ดาบสั้นลง 1 ส่วน (หากพลังชีวิตหมด = Game Over) 6.       ระบบเสียง (Web Audio API): ให้ใช้ Web Audio API สังเคราะห์เสียงทั้งหมดผ่านโค้ด (ห้ามใช้ไฟล์เสียงภายนอก) ได้แก่: ○      เสียงเพลงประกอบแนว [ระบุแนวเพลง เช่น 8-bit เรโทร, ตื่นเต้น] ○      เสียง Effect: ตอนกินไอเทม, เสียงตอนตอบถูก, เสียงตอบผิด/หมดเวลา, และเสียง Game Over 7.       UX/UI: จัดวางให้ปุ่มบังคับอยู่ขอบจอไม่บังพื้นที่เล่นเกม, พื้นที่เล่นเกมเต็มจอ (Fullscreen Responsive), และตัดข้อความรบกวนสมาธิออกให้หมด ชุดคำถามสำหรับวิชานี้ (ช่วยนำไปใส่ในโค้ดให้ด้วย): 1.       ด่านที่ 1 : ซามูไร วิ่งฝาหิมะ ฟันผลไม้ ตัวที่ 1 ตัวที่ 2 ตัวที่ 3 ตัวที่ 4 2.       ด่านที่ 1 : ซามูไร วิ่งฝาน้ำตก ฟันผลไม้ ตัวที่ 1 ตัวที่ 2 ตัวที่ 3 ตัวที่ 4 3.       ด่านที่ 1 : ซามูไร วิ่งฝาสนามรบ ฟันผลไม้ ตัวที่ 1 ตัวที่ 2 ตัวที่ 3 ตัวที่ 4 4.       ด่านที่ 1 : ซามูไร วิ่งฝาฝน ฟันผลไม้ ตัวที่ 1 ตัวที่ 2 ตัวที่ 3 ตัวที่ 4 ขอโค้ดที่สมบูรณ์ คัดลอกไปเซฟเป็นไฟล์ index.html รันบนเบราว์เซอร์แล้วเล่นได้ทันที! เขียนโค้ดเกม AR (Augmented Reality) สำหรับเรียนภาษาอังกฤษ โดยใช้ HTML, CSS (Tailwind) และ JavaScript ให้อยู่ในไฟล์ index.html ไฟล์เดียวจบ โดยใช้ไลบรารี MediaPipe Hands สำหรับการตรวจจับมือ รายละเอียดของเกม: คอนเซปต์เกม: เป็นเกมเลือกคำตอบ ผู้เล่นจะต้องใช้มือผ่านกล้องเว็บแคม โดยมีรายละเอียดดังนี้ 1 เป็นเกมที่มีความรู้เนื้อหาในเรื่องการออกแบบกราฟิกเบื้องต้น 2 เหมาะสำหรับนักเรียนชั้น ปวช. 2 3 มีชุดคำถาม 5 ข้อให้เหมาะสมกับรายวิชา 4 แนวกราฟิกเป็น icon สีสันสดใส 5 มีการใส่ชื่อผู้เล่นในหน้าแรกก่อนจะเริ่มเกม 6 เมื่อเล่นเกมเสร็จ มีหน้าสรุปผลการเล่นของผู้เล่น 7 มีเสียงขณะเล่นเกม และมีเสียง Effectต่างๆ