เกม

ตัวอย่าง Promprt :  ทำหน้าที่เป็นโปรแกรมเมอร์ผู้เชี่ยวชาญด้านการสร้างสื่อการสอนActive Learning และ Web Game ช่วยเขียนโค้ดเกมAR (Augmented Reality) ผ่านเว็บไซต์ โดยมีรายละเอียดดังนี้ ข้อมูลรายวิชา (ปรับแต่งตามต้องการ): ชื่อวิชา: การประยุกต์ใช้เทคโนโลยีดิจิทัลเพื่ออาชีพ ระดับชั้นที่สอน: ปวส. ธีมการออกแบบ: [ใส่สไตล์ที่อยากได้ เช่น ไอคอนสีสันสดใสน่ารัก, อวกาศ, ใต้ทะเล] คอนเซปต์และกติกาของเกม (ห้ามลบส่วนนี้): รูปแบบเกม: เป็นเกม "ยิงลูกโป่งคำถาม" โดยใช้กล้อง Webcam และไลบรารี MediaPipe Hands เพื่อให้ผู้เล่นใช้ "ปลายนิ้วชี้" แตะลูกโป่งที่ลอยขึ้นมาบนหน้าจอ การแสดงผล: เขียนด้วย HTML, Tailwind CSS, และ JavaScript รวมอยู่ในไฟล์เดียว (.html) ระบบกล้อง: ภาพวิดีโอจากกล้องต้องสะท้อนซ้าย-ขวา (Mirror) เพื่อให้บังคับมือได้ง่าย แต่ตัวหนังสือและ UI บน Canvas ต้องไม่กลับด้าน (อ่านได้ปกติ) หน้าจอเริ่มเกม: มีหน้าให้ผู้เล่น "กรอกชื่อ" ก่อนกดเริ่มเกม ระบบคำถาม: แสดงคำถามไว้ด้านบนของจอ ลูกโป่งคำตอบ (3-5 ตัวเลือก) จะลอยขึ้นมาจากด้านล่างช้าๆ ให้ผู้เล่นมีเวลาอ่าน ระบบการตอบและพลังชีวิต: ผู้เล่นมีพลังชีวิต 3 ดวง (❤️❤️❤️) หาก แตะลูกโป่งที่ถูก: ได้คะแนน +10, มีเอฟเฟกต์พลุ, และเปลี่ยนไปคำถามข้อถัดไป หาก แตะลูกโป่งที่ผิด: พลังชีวิตลดลง 1 ดวง, ลูกโป่งลูกที่ผิดจะแตกและหายไป ให้ผู้เล่นเลือกตอบลูกที่เหลืออยู่ใหม่ไปเรื่อยๆ จนกว่าจะตอบถูก หากพลังชีวิตเหลือ 0: เกมจบลงทันที (Game Over) ระบบเสียง (Web Audio API): ห้ามใช้ไฟล์เสียงภายนอก (.mp3) ให้ใช้ Web Audio API สังเคราะห์เสียงขึ้นมาเองทั้งหมด ประกอบด้วย: เสียง BGM คลอตอนเล่นเกม (สไตล์ 8-bit หรือฟองสบู่) เสียง Effect: ปุ่มกด, ลูกโป่งแตก, ตอบถูก, ตอบผิด หน้าสรุปผล: เมื่อตอบครบทุกข้อ หรือ พลังชีวิตหมด ให้แสดงหน้าสรุปคะแนน พร้อมโชว์ชื่อผู้เล่น และมีปุ่มกดเล่นใหม่อีกครั้ง ชุดคำถาม (โปรดนำข้อมูลนี้ไปแปลงเป็น Arrayในโค้ด): คำถาม: [ใส่คำถามข้อที่ 1] [ตัวเลือกที่ 1] (ถูกต้อง) [ตัวเลือกที่ 2] [ตัวเลือกที่ 3] คำถาม: [ใส่คำถามข้อที่ 2] [ตัวเลือกที่ 1] [ตัวเลือกที่ 2] (ถูกต้อง) [ตัวเลือกที่ 3] [ตัวเลือกที่ 4] คำถาม: [ใส่คำถามข้อที่ 3] [ตัวเลือกที่ 1] [ตัวเลือกที่ 2] [ตัวเลือกที่ 3] (ถูกต้อง) (คุณครูสามารถเพิ่มจำนวนข้อและจำนวนตัวเลือกได้ตามต้องการ) ขอโค้ดที่สมบูรณ์ นำไปรันใช้งานได้ทันที มีการจัดการ Errorอย่างเหมาะสม และมีคอมเมนต์ภาษาไทยอธิบายโค้ดส่วนสำคัญครับ       เขียนโค้ดเกมAR (Augmented Reality) สำหรับเรียนคอมพิวเตอร์ โดยใช้ HTML, CSS (Tailwind) และJavaScriptให้อยู่ในไฟล์index.htmlไฟล์เดียวจบ โดยใช้ไลบรารี MediaPipe Hands สำหรับการตรวจจับมือ รายละเอียดของเกม: คอนเซปต์เกม: เป็นเกมเลือกคำตอบ ผู้เล่นจะต้องใช้มือติ๊กคำตอบผ่านกล้องเว็บแคม โดยมีรายละเอียดดังนี้ 1 เป็นเกมที่มีความรู้เนื้อหาในเรื่อง การประยุกต์ใช้เทคโนโลยีดิจิทัลเพื่ออาชีพ 2 เหมาะสำหรับนักเรียนชั้น ปวส. 3 มีชุดคำถาม10 ข้อให้เหมาะสมกับรายวิชา คำตอบมี4 ตัวเลือก แต่ละข้อให้ใช้สีสันสดใสที่แตกกต่างกัน ส่วนคำตอบแบล็กกราวให้สัญลักษณ์เป็นรูปดอกทานตะวัน 4 คำตอบ4ตัวเลือกแนวกราฟิกเป็น icon ให้เป็นรูปภาพ สีสันสดใสน่ารักล้อเลียนตัวการ์ตูน คำตอบที่ถูกให้ใช้โทนสดใสกว่าข้ออื่น 5 มีการใส่ชื่อผู้เล่นในหน้าแรกก่อนจะเริ่มเกม 6 เมื่อเล่นเกมเสร็จ มีหน้าสรุปผลการเล่นของผู้เล่นโดยมีเอฟเฟ็กแสดงความยินดี 7 มีเสียงขณะเล่นเกม และมีเสียง Effectต่างๆ  คำถามและคำตอบให้พอดีกับจอภาพ  สีพื้นหลังโทนอบอุ่นเหมาะสม  ขอโค้ดที่สมบูรณ์ นำไปรันใช้งานได้ทันที มีการจัดการ Error อย่างเหมาะสม และมีคอมเมนต์ภาษาไทยอธิบายโค้ดส่วนสำคัญ