Workshop 10 GAME

Promt : ทำหน้าที่เป็นโปรแกรมเมอร์ผู้เชี่ยวชาญด้านการสร้างสื่อการสอน Active Learning และ Web Game เขียนโค้ดเกม AR (Augmented Reality) สำหรับเรียนองค์ประกอบศิลป์ โดยใช้ HTML, CSS (Tailwind) และ JavaScript ให้อยู่ในไฟล์ index.html ไฟล์เดียวจบ โดยใช้ไลบรารีMediaPipe Hands สำหรับการตรวจจับมือ Pose Landmarkerสำหรับการตรวจจับการเคลื่อนไหวของมือกำปั้น แขน รายละเอียดของเกม: คอนเซปต์เกม: เป็นเกมเลือกคำตอบ ผู้เล่นจะต้องใช้มือผ่านกล้องเว็บแคม โดยมีรายละเอียดดังนี้ 1 เป็นเกมที่มีความรู้เนื้อหาในเรื่อง องค์ประกอบศิลป์ 2 เหมาะสำหรับนักเรียนชั้น ปวช. 1 รูปแบบเกม: เป็นเกม "ตอบถาม"โดยใช้กล้อง Webcam และไลบรารี MediaPipe Hands เพื่อให้ผู้เล่นใช้ "กำปั้นมือ"ชกถังสีบนหน้าจอ หน้าจอเริ่มเกม: มีหน้าให้ผู้เล่น "กรอกชื่อ"ก่อนกดเริ่มเกม ระบบคำถาม: o แสดงคำถามไว้ด้านบนของจอ o คำตอบอยู่ 2 ฝั่งซ้ายและขวา ระบบการตอบ: หาก ชกต่อยที่คำตอบที่ถูก: ได้คะแนน +10, มีเอฟเฟกต์พลุ, และเปลี่ยนไปคำถามข้อถัดไป หาก ชกต่อยที่คำตอบที่ผิด: กล่องคำตอบที่ผิดจะแตกและหายไป ให้ผู้เล่นเลือกตอบลูกที่เหลืออยู่ใหม่ไปเรื่อยๆ จนกว่าจะตอบถูก ประสบการณ์ผู้ใช้และอินเตอร์เฟส : UX UI มีความเสถียรการวางคำตอบที่จับได้ง่าย 3.มีชุดคำถาม 5 ข้อให้เหมาะสมกับรายวิชา 4 แนวกราฟิกเป็น icon สีสันสดใส Modern 5 มีการใส่ชื่อผู้เล่นในหน้าแรกก่อนจะเริ่มเกม ฟอนต์เป็นสีดำมองเห็นชัด 6 เมื่อเล่นเกมเสร็จ มีหน้าสรุปผลการเล่นของผู้เล่น 7 มีเสียงขณะเล่นเกม และมีเสียง Effectต่างๆ ช่วยแก้ไขดังนี้ 1.ปรับ UX UI เพิ่มการแสดงผล ในรูปแบบของ แนวตั้งสำหรับเครื่องมือสื่อสาร ปรับขนาด Layout อัตโนมัติให้พอดีกับหน้าจอได้ด้วย 2.ช่วยแก้ไข UX ในส่วนของความแม่นยำของการตอบคำถาม "หากตอบผิด ให้ข้ามไปข้อถัดไป" 3.เมื่อเล่นเกมถึงข้อสุดท้าย หากตอบผิด ให้สรุปผลตาม ที่ตอบได้ 4.เมื่อเล่นเกมเสร็จ มีหน้าสรุปผลการเล่นของผู้เล่น