GAME

เขียนโค้ดเกม AR (Augmented Reality) สำหรับเรียนส่วนประกอบของกล้องถ่ายภาพ DSLR โดยใช้ HTML, CSS (Tailwind) และ JavaScript ให้อยู่ในไฟล์ index.html ไฟล์เดียวจบ โดยใช้ไลบรารี Parts Quiz สำหรับการตรวจจับการบังคับมือของผู้เล่น รายละเอียดของเกม: คอนเซปต์เกม: เป็นเกมเลือกคำตอบ ผู้เล่นจะต้องใช้มือผ่านกล้องเว็บแคม โดยมีรายละเอียดดังนี้ 1 เป็นเกมที่มีความรู้เนื้อหาในเรื่องส่วนประกอบของกล้องถ่ายภาพ DSLR 2 เหมาะสำหรับนักเรียนชั้น ปวช. 1 3 - วิธีการเล่น (กลไกการจิ้มคำตอบ): * บนจอเกมจะแสดงป้ายคำตอบ 3 ตัวเลือกในรูปแบบกล่องนีออน 3D เรืองแสงที่ลอยอยู่ * ผู้เล่นยกนิ้วชี้ขึ้นมาหน้ากล้อง ระบบจะสร้างพอยเตอร์วงแหวนเรืองแสงตามพิกัดปลายนิ้วชี้ * หากต้องการตอบข้อไหน ให้เลื่อนปลายนิ้วชี้ไปแตะที่ปุ่มคำตอบนั้นค้างไว้เป็นเวลา 1.5 วินาที (จะมีเกจสีเขียวหมุนชาร์จพลังรอบพอยเตอร์นิ้วชี้ เมื่อชาร์จเต็มระบบจะทำการส่งคำตอบ เพื่อป้องกันการบังเอิญไปโดน) - ระบบพลังชีวิต: เริ่มต้นที่ 3 ชีวิต หากผู้เล่นตอบผิดให้หน้าจอกระพริบสีแดง และลดหัวใจลง 1 ดวง (ถ้าเหลือ 0 ดวง = Game Over ทันที) - ระบบจับเวลา: มีเวลาจำกัด 60 วินาทีต่อข้อคำถาม - การคิดคะแนน: ตอบถูกเร็วและเวลาเหลือมากกว่าหรือเท่ากับ 30 วินาที ได้ 5 คะแนน, ตอบถูกช้าและเวลาเหลือต่ำกว่า 30 วินาที ได้ 2 คะแนน - หน้าเปลี่ยนด่าน (Transition State): เมื่อตอบถูกจะมีป๊อปอัปน่ารักๆ แสดงข้อความแสดงความยินดีและคะแนนที่ได้ พร้อมนับถอยหลัง 5 วินาทีเพื่อขยับไปคำถามข้อถัดไปอัตโนมัติ (และมีปุ่มให้กดข้ามไปข้อถัดไปได้ทันที) - หน้าสรุปผล (Summary Screen): เมื่อตอบครบ 5 ข้อ หรือเกมโอเวอร์ จะแสดงผลสรุปรายบุคคล (ชื่อผู้เล่น, พลังชีวิตที่เหลือ, คะแนนรวมที่ทำได้, ตราเหรียญเกียรติยศ เช่น ระดับ Professional สำหรับคนคะแนนสูง, ระดับ Intermediate สำหรับคะแนนปานกลาง และระดับ Novice สำหรับผู้เริ่มต้นฝึกฝน) มีปุ่มกดเล่นใหม่อีกครั้ง 4 แนวกราฟิกเป็นสนามแข่งรถ icon สีสันสดใส 5 มีการใส่ชื่อผู้เล่นในหน้าแรกก่อนจะเริ่มเกม 6 เมื่อเล่นเกมเสร็จ มีหน้าสรุปผลการเล่นของผู้เล่น 7 มีเสียงขณะเล่นเกม และมีเสียง Effectต่างๆ