คุณคือผู้เชี่ยวชาญด้านการพัฒนา Creative Web App, UI/UX Designer และผู้เชี่ยวชาญด้าน Computer Vision (MediaPipe)หน้าที่ของคุณคือเขียนโค้ด HTML เพียงไฟล์เดียว (Single-file Mandate) เพื่อสร้างเกม "คณิตคิดเลขเร็ว AR (Kids Edition)" ที่มีความเป็นธรรมชาติ ลื่นไหล สวยสะดุดตาเด็ก และไม่มีปัญหากลุ่มหน้าจอล้นขอบจอเด็ดขาดTechnical Requirements (สเปกทางเทคนิค)เทคโนโลยีที่ต้องใช้ (Libraries):Tailwind CSS (สำหรับตกแต่ง): <script src="https://cdn.tailwindcss.com"></script>MediaPipe Hands & Camera Utils (สำหรับจับภาพและประมวลผลมือ):https://cdn.jsdelivr.net/.../@media.../hands/hands.jsTone.js (สำหรับสังเคราะห์เสียงเอฟเฟกต์): https://cdnjs.cloudflare.com/.../tone/14.8.49/Tone.jsGoogle Fonts: ฟอนต์ 'Mali' เพื่อความน่ารักเป็นมิตรกับเด็กระบบการปฏิสัมพันธ์ (AR Interaction):แสดงภาพพื้นหลังจากกล้องเว็บแคม (แบบ Mirror กลับด้านซ้ายขวา) และวาดเส้นโครงกระดูกมือทับซ้อน (AR overlay)ใช้ ปลายนิ้วชี้ (Landmark เป็นเป้าเล็งสีทอง/ชมพู (รูปดาว )ระบบ Hover-to-Click: เมื่อเป้าเล็งชี้ค้างไว้ที่ปุ่มที่มีคลาส .hand-interact เป็นเวลา 1.2 วินาที จะมีวงแหวน SVG หมุนโหลดจนเต็มแล้วสั่ง Trigger Click Event โดยอัตโนมัติระบบจัดการเสียง (Audio Engine):ใช้ Tone.js สังเคราะห์เสียงทั้งหมดสดๆ (ห้ามดึงไฟล์เสียงจากภายนอก)ครอบระบบเสียงด้วย try-catch block เสมอ เพื่อป้องกันเสียงบล็อกทำให้ JavaScript ค้างUI/UX & Layout Design Principles (ดีไซน์สะกดสายตาเด็ก)สไตล์เยลลี่ 3D (Jelly Soft-Toy Theme):ปุ่มและกล่อง UI ต้องมีขอบมนหนามาก (rounded-[30px]), มีขอบสีขาวเด่นชัด (border-4 border-white) และมีเงาด้านล่างแบบการ์ตูนสามมิติ (Drop Shadow หนาๆ)ปุ่มคำตอบแต่ละปุ่มต้องใช้สีสว่างต่างกันชัดเจน (เหลือง, ฟ้า, ชมพู, ม่วง) เพื่อความง่ายในการแยกแยะการป้องกัน Layout ล้นจอ (Critical Fix - No Overflow):ห้ามให้หน้าจอเกิด Scrollbar แนวนอนหรือแนวตั้ง หรือตกขอบเด็ดขาด โดยเฉพาะในอุปกรณ์พกพาหรือเบราว์เซอร์ขนาดเล็กตั้งค่าหน้าเล่นเกมให้ควบคุมความสูงภายใน 100vh เสมอ บังคับกล่องข้อความและปุ่มคำตอบให้อยู่ในตรรกะ max-h-[90vh] ถึง max-h-[95vh]ควบคุมขนาดกล่องคำถามให้อยู่ในเกณฑ์พอดี (เช่น text-4xl ถึง text-5xl บน Desktop และหดเล็กลงอัตโนมัติเมื่อเป็น Mobile) และความสูงของปุ่มคำตอบต้องไม่สูงเกินไป (ใช้ Padding ที่กระชับ เช่น py-3 ถึง py-4)แอนิเมชันสะกดอารมณ์ (Playful Feedback):เมื่อตอบถูก: ปุ่มต้องเล่นแอนิเมชันเด้งขยายตัว (pop-correct) และมีประกายดาวจิ๋วกระจายตัวรอบทิศทางเมื่อตอบผิด: ปุ่มต้องสั่นดุ๊กดิ๊กด้านข้างแบบกวนๆ (shake-wrong) เพื่อให้ความรู้สึกท้าทายแต่ไม่น่าเบื่อเมื่อจบเกม: ปล่อยเอฟเฟกต์พลุกระดาษร่วงจากฟ้า โดยใช้อีโมจิน่ารักๆ (เช่น , , , , ) และสร้างเสียงเพลงเฉลิมฉลองด้วย Tone.jsGame Logic & Flowสถานะหน้าจอ (Screen States): แบ่งเป็น 4 หน้าจอหลักLoading Screen: กำลังโหลดกล้อง/โมเดล AI แสดงคำแนะนำการอนุญาตกล้องให้เด็กเข้าใจง่ายStart Screen: หน้าเริ่มเกม แสดงชื่อเกมปุ่มเริ่มสีสดใสGame Screen: หน้าคำถาม (แสดงข้อมูลลำดับข้อ คะแนน โจทย์ และปุ่มตัวเลือก 4 ตัวเลือก)Result Screen: หน้าสรุปผล คะแนนรวม และการปล่อย Confetti ฉลองคลังคำถาม (Question Pool):เขียนฟังก์ชัน JavaScript เจนคำถามคณิตศาสตร์ (บวก, ลบ, คูณ, หาร แบบสุ่มไม่ซ้ำกัน) จำนวน 50 ข้อเก็บไว้ใน Array ตั้งแต่เริ่มโหลดหน้าเว็บในแต่ละรอบการเล่น ให้สุ่มคัดเลือกข้อสอบมาเพียง 5 ข้อ และแสดงสถานะ ข้อที่: 1/5 ถึง 5/5Prompt สั่งเขียนโค้ด (กรุณาส่งกลับมาเป็นโค้ด HTML สมบูรณ์เท่านั้น)"ช่วยเขียนโค้ด HTML5 แบบ Full Code (ห้ามตัดทอนโค้ดใดๆ ด้วยปุ่ม ... หรือคำอธิบายประกอบย่อ) สำหรับเกมคณิตคิดเลขเร็ว AR ตามสเปกที่กำหนดด้านบนทั้งหมด โดยใช้ MediaPipe, Tailwind CSS และ Tone.js ปรับแก้ขนาดหน้าจอในหน้าเล่นเกมให้พอดีขอบ viewport ไม่ล้นลงไปข้างล่าง เพื่อสร้างความลื่นไหลสูงสุด และมีเอฟเฟกต์ที่ตื่นเต้นดึงดูดใจเด็กประถม"

เกม AR เจาะเวลาหาคำวิเศษณ์

สร้างเกมการศึกษาแบบ AR Interactive โดยใช้กล้อง (Camera-Based Motion Tracking) สำหรับนักเรียนระดับประถมศึกษา ชื่อเกม "เจาะเวลาหาคำวิเศษณ์" ** สำหรับทำ Web App ด้วย HTML, CSS และ JavaScript (ไฟล์เดียวจบ)

หน้าเริ่มเกม (Start Screen)

ปุ่ม “เริ่มเกม” ขนาดใหญ่ชัดเจน กึ่งกลางด้านล่างตรงหน้าจอ ไม่ต้องใส่ชื่อเกม บนหน้าเริ่มเกม

พื้นหลัง: ใช้ภาพจาก xxxxxxx(ใส่ลิงก์ภาพ)

**แนวคิดเกมนักเรียนใช้มือ เคลื่อนไหวผ่านกล้องแบบ Real-Time โดยระบบ AI ตรวจจับตำแหน่งนิ้วชี้ของผู้เล่น เพื่อใช้เป็นอุปกรณ์เจาะลูกโป่งที่ลอยขึ้นมาจากด้านล่างของหน้าจอ

รูปแบบการเล่น

* เปิดกล้องเว็บแคมหรือกล้องมือถือ

* ระบบ AI ตรวจจับการเคลื่อนไหวของมือและนิ้วชี้แบบ Real-Time

* แสดงวงแหวนหรือเอฟเฟกต์เรืองแสงที่ปลายนิ้วชี้ของผู้เล่น

* ลูกโป่งสีสันสดใสลอยขึ้นจากด้านล่างของหน้าจออย่างต่อเนื่อง

* ภายในลูกโป่งแต่ละลูกมีคำศัพท์ภาษาไทย ทั้งคำวิเศษณ์และคำชนิดอื่นปะปนกัน

โดยมีโจทย์ บอกว่า

ผู้เล่นต้องใช้นิ้วชี้ไปแตะหรือแทงเฉพาะลูกโป่งที่เป็น "คำที่เป็นคำวิเศษณ์"

* เมื่อลูกโป่งถูกเจาะ จะมีเอฟเฟกต์ระเบิด พร้อมเสียงและคะแนนแสดงบนหน้าจอ

### กติกา

* เวลาในการเล่น 60 วินาที

* เจาะลูกโป่งที่เป็น "คำวิเศษณ์ ถูกต้อง +10 คะแนน

* เจาะลูกโป่งผิด -5 คะแนน

> * เมื่อหมดเวลา แสดงคะแนนรวม ระดับความสามารถ และอันดับผู้เล่น

มีปุ่ม “ออกจากเกม” ที่หน้าเล่นเกม เมื่อกดปุ่ม “ออกจากเกม” ให้กลับมาที่หน้าแรกทันที

กำหนดคำวิเศษณ์ ดังนี้

เร็ว

ช้า

มาก

น้อย

บ่อย

เสมอ

นาน

เก่ง

ดัง

เบา

ค่อย

จริง

ไกล

ใกล้

ชัดเจน

ทันที

แน่นอน

รวดเร็ว

บังเอิญ

กะทันหัน

คำที่อื่นๆ ไม่ไม่ใช่คำวิเศษณ์

ดาบ

โล่

เวทมนตร์

วิ่ง

กระโดด

โจมตี

ป้องกัน

มังกร

หมู่บ้าน

หนังสือ

กิน

นอน

เดิน

กุญแจ

หีบสมบัติ

ยา

นักรบ

ปีศาจ

หลบหลีก

ปราสาท

ลูกโป่งสีสดใส ตัวหนังสือชัดเจน เพื่อให้นักเรียนสังเกตและจดจำได้ง่ายขึ้น

#องค์ประกอบของเกม

* ลูกโป่งหลากสี พร้อมตัวอักษรภาษาไทยขนาดใหญ่

* AI Hand Tracking ตรวจจับนิ้วมือแบบ Real-Time

* ระบบคะแนน (Score)

* ระบบจับเวลา (Countdown Timer)

* เสียงเอฟเฟกต์เจาะลูกโป่ง

* เอฟเฟกต์ประกายดาวและแอนิเมชันเมื่อได้คะแนน

* หน้าจอสรุปผลพร้อมเหรียญรางวัล Bronze / Silver / Gold

เทคโนโลยีที่ใช้

* HTML5 + CSS3 + JavaScript

* MediaPipe Hand Tracking หรือ TensorFlow.js Hand Pose Detection

* Canvas API / Three.js สำหรับแอนิเมชัน

* Web Camera API

* รองรับการใช้งานบนคอมพิวเตอร์ โทรศัพท์มือถือ และกระดานอัจฉริยะ (Interactive Whiteboard)

รูปแบบการออกแบบ

* Educational Game

* AR Interactive Learning

* Active Learning

* Gamification

* เหมาะสำหรับนักเรียนประถมศึกษา

* กราฟิกสไตล์ Cartoon 3D สีสันสดใส น่ารัก สนุก และทันสมัย กลับด้านข้อความในลูกโป่งให้ผู้เล่นสามารถอ่านได้ในขณะเล่นเกม

คุณคือผู้เชี่ยวชาญด้าน EdTech และการพัฒนา Web Application ระดับสูง หน้าที่ของคุณคือการเขียนโค้ดสำหรับเกมเว็บเพื่อการเรียนรู้แบบ Single-file HTML (ทุกอย่างรวมอยู่ในไฟล์เดียวทั้ง HTML, CSS, JavaScript และการเชื่อมต่อ API)ชื่อเกม: "AR นักวิทย์น้อย - ภารกิจแยกสารเนื้อผสม"กลุ่มเป้าหมาย: เด็กนักเรียนชั้นประถมศึกษา กรุณาสร้างเกมนี้โดยมีรายละเอียดเงื่อนไขและฟีเจอร์ดังนี้:รายละเอียดการออกแบบ (UI/UX & Visual Design)ธีมของเกม: ห้องทดลองวิทยาศาสตร์ที่สดใสและเป็นมิตรกับเด็กพื้นหลัง (Background): ลายเส้นตารางสมุดกราฟสีฟ้า-ฟ้าอ่อน (#E0F2FE ถึง #BAE6FD) มีสัญลักษณ์วิทยาศาสตร์ (เช่น , , , ) สีขาวจางๆ ลอยขึ้นด้านบนอย่างช้าๆ เป็นฉากหลังฟอนต์ (Fonts): ใช้ฟอนต์ 'Itim' (สำหรับหัวข้อ/กระดานดำ) และ 'Mali' (สำหรับคำศัพท์ทั่วไป) จาก Google Fonts เพื่อความน่ารักและอ่านง่ายหน้าแรก (Start Screen):มีกล่องหลักสไตล์ Glassmorphism (โปร่งแสง ขอบมนขนาดใหญ่) มีเอฟเฟกต์เด้ง (Bounce) นุ่มนวลพาดหัวใหญ่สีขาวคำว่า "AR นักวิทย์น้อย" มีเส้นขอบสีเข้มเด่นชัด และมีกล่องย่อยระบุชื่อตอน "ภารกิจแยกสารเนื้อผสม"มีคำอธิบายกติกาชัดเจน: วิธีการควบคุม (AR และ ทัชสกรีน/เมาส์), วิธีการเล่น (เลือกผลึกสารผสมให้ตรงกับโจทย์บนกระดานดำ) และเกณฑ์คะแนน (ถูก +10, ผิด -5)ปุ่ม "เริ่มการทดลอง!" สไตล์ 3D ไล่สีฟ้า-น้ำเงิน ขยับตามจังหวะชีพจร (Pulse) เพื่อดึงดูดความสนใจหน้าจอเล่นเกม (Gameplay UI):แถบแสดงเวลา (มุมซ้ายบน): แสดงตัวเลขเวลาเริ่มต้น 45 วินาที หากเวลาน้อยกว่า 10 วินาที ตัวเลขจะกระพริบเป็นสีแดง (Flash Red)แถบคะแนนและระบบดาว (มุมขวาบน): แสดงระดับดาว (1-5 ดวงแปรผันตามคะแนน) และตัวเลขคะแนนรวมกระดานดำตั้งโจทย์ (กึ่งกลางบน): ออกแบบกระดานดำขอบไม้สไตล์คลาสสิก (Chalkboard Panel) แสดงชื่อวิธีการแยกสารผสมเป้าหมายที่เป็นโจทย์ เช่น "การหยิบออก ", "การร่อน " ด้วยฟอนต์ชอล์กสีขาว/เหลืองเด่นชัดผลึกสารผสม (Mixture Crystals):ออกแบบเป็นรูปทรงหกเหลี่ยม (Hexagon) เพื่อสื่อถึงโครงสร้างโมเลกุลทางวิทยาศาสตร์ใช้สีพาสเทลไล่เฉดสีสองสีในหนึ่งผลึก (เช่น แดง-เหลือง หรือ ฟ้า-ม่วง) เพื่อแสดงถึง "สารเนื้อผสมสองชนิดที่ปนกันอยู่"มีกล่องสีขาวโค้งมนวางทับตรงกลางเพื่อแสดง "อีโมจิและข้อความคำศัพท์ภาษาไทย" เพื่อให้อ่านง่ายบนทุกพื้นหลังผลึกลอยขึ้นจากขอบจอด้านล่าง ส่ายไปมาเล็กน้อย (Wobble) ด้วยความเร็วและมุมหมุน (Rotation) ที่สุ่มแตกต่างกันเอฟเฟกต์การแยกสาร (Separation VFX & Feedback)เสียงเอฟเฟกต์ (Audio SFX): สังเคราะห์เสียงสดโดยใช้ Web Audio API (ห้ามดึงไฟล์เสียงภายนอก)เสียงแว่นขยายแตะถูกผลึก: เสียง Snap/Pop สั้น ๆเสียงเมื่อตอบถูกต้อง: เสียงคอร์ดเปียโนไล่ระดับใส ๆ (Correct Chime)เสียงเมื่อตอบผิด: เสียงอื้ออึงสั้น ๆ โทนต่ำ (Wrong Buzzer)เอฟเฟกต์พาร์ทิเคิลแยกสาร (Particle Separation VFX):เมื่อผู้เล่นตอบถูก (เช่น ใช้แม่เหล็กดูด "ผงเหล็ก+ทราย"): ผลึกจะแตกตัวออกเป็นละอองสองสี (แยกตามสีของผลึกนั้น ๆ) โดยละอองสีที่หนึ่งจะถูกแรงเหวี่ยงพุ่งไปทางซ้าย และอีกสีจะพุ่งไปทางขวา เพื่อจำลองการ "แยกสารผสมออกจากกันจริง ๆ" พร้อมผลแรงโน้มถ่วง (Gravity) ตกสู่ด้านล่างเมื่อผู้เล่นตอบผิด: ผลึกจะแตกตัวเป็นฝุ่นละอองสีเทาหม่นกระจายรอบตัวข้อความลอยระบุแต้ม (Floating Text): แสดง "+10 (เวลา +2)" สีเขียวเมื่อตอบถูก หรือ "วิธีนี้ไม่ได้ผล! -5" สีแดงเมื่อตอบผิดระบบตรวจจับการเคลื่อนไหว AR (Augmented Reality)ใช้ MediaPipe Hands ผ่าน CDN ลิงก์มาตรฐาน (กำหนด modelComplexity: 0 เพื่อความลื่นไหลระดับสูง)ตรวจจับปลายนิ้วชี้ (Landmark เพื่อเป็นตำแหน่งชี้เป้าแสดง AR Cursor เป็น "แว่นขยายขนาดใหญ่ " มีเอฟเฟกต์เรืองแสง (Glow) ด้านหลัง และมีจุดสีแดงตรงกลางแว่นขยายเพื่อใช้เล็งเป้าหมายได้แม่นยำขึ้นใช้ Low-pass filter (ประมาณ 0.35 - 0.65) เพื่อเกลี่ยให้การขยับของแว่นขยายเคลื่อนที่ตามนิ้วมือได้อย่างนุ่มนวล ไม่สั่นไหวมีระบบรองรับการกด (Fallback): หากกล้องไม่ทำงาน หรือผู้เล่นใช้หน้าจอสัมผัส/เมาส์ ให้คลิกหรือสัมผัสบนจอแทนตัวชี้ AR ได้ทันทีคลังข้อมูลการแยกสารเนื้อผสมที่เป็นของแข็ง (Word Bank)กำหนดข้อมูลในรูปแบบ Array of Objects ประกอบด้วยวิธีแยกสาร และตัวอย่างสารผสมดังนี้:การหยิบออก : มะเขือเทศ+พริก (), ถั่วเขียว+ถั่วแดง (), ก้อนหิน+ใบไม้ (), ลูกอมสีแดง+สีเขียว ()การร่อน : แป้งทำขนม (), กรวด+ทราย (), ผงมัทฉะที่เป็นก้อน (), กากมะพร้าว+น้ำกะทิ ()ใช้แม่เหล็ก : ผงเหล็ก+ทราย (), คลิปหนีบกระดาษ+ยางลบ (), นอต+ดิน (), เข็มหมุด+เศษผ้า ()การฝัด (เป่าลม) : ข้าวเปลือก+แกลบ (), ถั่วลิสง+เปลือกบางๆ (), เมล็ดงา+เศษใบไม้ (), เปลือกกระเทียม+เนื้อ ()โครงสร้างเทคนิค (Technical Implementation)บรรจุโค้ดทั้งหมด (HTML, Tailwind CSS, MediaPipe API, Canvas Rendering และ JavaScript) ไว้ในไฟล์เดี่ยว (Single-file HTML) ชื่อ index.htmlวาดองค์ประกอบเกม แอนิเมชัน พาร์ทิเคิล และตัวชี้ AR ลงบน Canvas ทั้งหมดโดยใช้ requestAnimationFrameรองรับการปรับขนาดหน้าจอ (Resize Event) ให้ทำงานเต็มพื้นที่เบราว์เซอร์อย่างลื่นไหลห้ามใช้ฟังก์ชัน alert() หรือ confirm() ในตัวเกมอย่างเด็ดขาด ให้ใช้หน้าต่าง UI ภายในเกมแทน

จงสร้างเกมการศึกษาเรื่องภัยไซเบอร์และการใช้เทคโนโลยีอย่างปลอดภัย (วิทยาการคำนวณ) สำหรับนักเรียนระดับประถมศึกษา ในรูปแบบเว็บแอปพลิเคชันหน้าเดียว (Single-file HTML5) ที่รวบรวม HTML, CSS และ JavaScript ไว้ด้วยกัน โดยเน้นงานดีไซน์ที่น่ารัก สดใส พาสเทล แคนดี้ (Cute Pastel Candy Theme) เพื่อดึงดูดความสนใจและสร้างประสบการณ์การเรียนรู้ที่สนุกสนาน1. ข้อมูลทั่วไปและสไตล์การออกแบบ (UI/UX Design Style)ภาษาที่ใช้: ภาษาไทยเป็นหลัก ใช้ฟอนต์ 'Kanit' จาก Google Fonts เพื่อความน่ารัก ทันสมัย และอ่านง่ายสำหรับเด็กโทนสีและธีม:เน้นสีพาสเทลสว่างสดใส (Pastel-light Theme) เช่น ชมพูพาสเทล (#fce7f3), ฟ้าพาสเทล (#e0f2fe), ม่วงพาสเทล (#f3e8ff), เขียวมิ้นต์ (#ccfbf1), และเหลืองพาสเทลใช้ดีไซน์ Light Glassmorphism (พื้นหลังโปร่งแสงสีขาวละมุนตา ขอบโค้งมนเด่นชัด มีมิติด้วยแสงและเงาฟุ้งๆ) เพื่อความปลอดภัย สบายตา และดูพรีเมียมมีหน้าเมนูหลัก (Start Screen) ที่สดใส มีแอนิเมชันของ "พี่แมวส้มตัวตลกขยับได้" และดาวดึ๋งๆ ตกแต่งไลบรารีภายนอก (CDN):Tailwind CSS (https://cdn.tailwindcss.com)MediaPipe Hands (camera_utils.js, control_utils.js, drawing_utils.js, hands.js) สำหรับทำ AR ตรวจจับการเคลื่อนไหวของมือTone.js (https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js) สำหรับสร้างเสียงเอฟเฟกต์สังเคราะห์ (Synth) แบบออฟไลน์ทั้งหมด2. ระบบเกมเพลย์หลัก (Core Gameplay Mechanics)แนวเกม: 2D Platformer วิ่งข้ามแท่นกระโดดแบบต่อเนื่องไร้รอยต่อ (Seamless Continuous World)ตัวละครหลัก: พี่แมวส้มน่ารัก (คล้าย Scratch Cat) วาดด้วย Canvas API แบบเวกเตอร์ขยับตามการเคลื่อนที่ (มีขาเดิน, หางโบกพริ้ว, ตาเป็นประกาย และใส่ผ้าพันคอสีฟ้าขยับตามลม)ระบบสิ่งกีดขวางและไอเทม:แท่นกระโดด (Platforms): แยกโทนสีตามหมวดหมู่เนื้อหาภัยไซเบอร์ (เช่น Phishing = ชมพู, Password = ฟ้า, Cyberbully = ม่วง ฯลฯ) พร้อมประดับไอเทมประกายระยิบระยับมอนสเตอร์ตัวร้ายสุดคิ้วต์ (Enemies): ตัวแทนไวรัส มัลแวร์ หรือแมลงไซเบอร์ (เช่น , , ) เดินไปมาบนแท่น หากผู้เล่นกระโดดเหยียบหัวจะได้คะแนนและกำจัดมอนสเตอร์ได้ หากชนด้านข้างพลังชีวิต (System Health) จะลดลงไอเทมช่วยเหลือ (Power-ups): เหรียญ Byte (), โล่แสงดาวอมตะ (), จรวดสายรุ้งวิ่งเร็ว (), ยาเพิ่มพลังใจ ()การ์ดข้อมูล (Data Card - ): ไอเทมหลักที่จะปรากฏท้ายเซกเมนต์ของด่าน เพื่อใช้เปิด "ภารกิจตอบคำถามวิทยาการคำนวณ"3. เนื้อหาและคลังคำถามวิทยาการคำนวณ 20 ข้อ (แบ่งตามหมวดหมู่)ประกอบด้วยคำถามแบบปรนัย (4 ตัวเลือก) และเฉลยที่ถูกต้อง ไล่ระดับความลึกตั้งแต่ข้อ 1 - 20 โดยครอบคลุมหมวดหมู่ดังนี้:Phishing (อีเมล/ลิงก์หลอกลวง): ลิงก์ปลอมแอบอ้างสิทธิ์, โฆษณาป๊อปอัปหลอกรับของรางวัลฟรี [ข้อ 1 - 2]Password (รหัสผ่านที่แข็งแกร่งและการล็อกอิน): โครงสร้างรหัสผ่านที่ปลอดภัย, ประโยชน์และวิธีการใช้ยืนยันตัวตน 2 ชั้น (2FA) [ข้อ 3 - 4]Cyberbullying (การกลั่นแกล้งออนไลน์): วิธีจัดการเมื่อเห็นเพื่อนถูกรังแก, การคิดวิเคราะห์พฤติกรรมก่อนพิมพ์/แชร์ [ข้อ 5 - 6]Malware & Viruses (ภัยคุกคามคอมพิวเตอร์): การติดตั้งโปรแกรมสแกนไวรัส, การป้องกันตนเองจากไวรัสเรียกค่าไถ่ (Ransomware) [ข้อ 7 - 8]Privacy & Digital Footprint (รอยเท้าดิจิทัลและความเป็นส่วนตัว): ข้อมูลที่ไม่ควรแชร์ลงโซเชียล, ความเสี่ยงจากการแชร์ตำแหน่ง real-time (Location), การคุยกับคนแปลกหน้าออนไลน์ [ข้อ 9 - 12]Safe Browsing & Public Wi-Fi (ความปลอดภัยเครือข่าย): อันตรายจากการใช้ Wi-Fi สาธารณะโดยไม่เข้ารหัส, การสังเกตสัญลักษณ์กุญแจล็อก HTTPS [ข้อ 13 - 14]Fake News & Copyright (ข่าวปลอมและลิขสิทธิ์): วิธีการตรวจสอบข่าวแชร์บิดเบือน, การรู้จักพาดหัวล่อให้คลิก (Clickbait), ความเข้าใจเบื้องต้นเรื่องลิขสิทธิ์และการอ้างอิง [ข้อ 15 - 17]Digital Citizenship (พลเมืองดิจิทัลที่ดี): การจัดสรรเวลาหน้าจอ (Screen Time), ประโยชน์ของการอัปเดตระบบปฏิบัติการ, การช่วยเหลือสังคมด้วยการรายงานปัญหา (Report) [ข้อ 18 - 20]4. ระบบแสดงภาพประกอบเวกเตอร์ SVG ไดนามิก (Visual Science Cards)ในหน้าจอควิซข้อสอบ (Quiz Modal) จะต้องสร้างฟังก์ชัน buildVirtualCyberCard และ getIllustration(levelId) เพื่อดึงกราฟิกเวกเตอร์ความละเอียดสูงที่เป็น Inline SVG ทั้งหมด 20 ภาพ (ห้ามใช้ภาพจากลิงก์ภายนอกเด็ดขาดเพื่อป้องกันปัญหาภาพโหลดไม่ขึ้น):ตัวอย่างภาพเวกเตอร์สำหรับคำถามแต่ละหัวข้อ:ด่าน 1 (Phishing): รูปเบ็ดตกปลาสีชมพูกำลังเกี่ยวดึงซองจดหมายขึ้นมาด่าน 3 (Password): กล่องแม่กุญแจพาสเทลเรืองแสงพร้อมข้อความจำลองรหัสผ่าน ***ด่าน 7 (Malware): แมลงตัวกลมสีเขียวสว่างตาโตขี้เล่นกำลังไต่คอมพิวเตอร์ด่าน 13 (Public Wi-Fi): สัญญาณปล่อยคลื่น Wi-Fi สีฟ้าที่มีรัศมีแผ่ขยายลอยอยู่บนเมฆด่าน 18 (Screen Time): นาฬิกาบอกเวลามีสีสันแนวพาสเทลน่ารักคู่กับแท็บเล็ต5. การควบคุมด้วย AR และระบบสำรองแบบยืดหยุ่น (AR Gesture & Touch Inputs)การควบคุมผ่านกล้อง AR (MediaPipe Hands):กำมือ (Fist): เดินไปทางซ้ายกางมือ (Open Hand): เดินไปทางขวาจีบนิ้วชี้กับนิ้วโป้งชนกัน (Pinch): สั่งกระโดดขึ้นต้องแสดงภาพโครงร่างจำลองกระดูกนิ้วมือแบบโปร่งแสงสะท้อนกระจก (Mirror) พร้อมพิมพ์ข้อความสัญลักษณ์บอกสถานะ เช่น " ซ้าย (กำมือ)" ลอยตามมือผู้เล่นเพื่อความตื่นเต้นและใช้งานง่ายระบบควบคุมสำรอง (Fallback Controls):มีปุ่มกดขนาดใหญ่โปร่งแสงรูป ที่มุมซ้ายและขวาล่างของหน้าจอสำหรับสมาร์ตโฟน/แท็บเล็ตรองรับการใช้คีย์บอร์ด ปุ่มลูกศรซ้าย/ขวา และ Spacebar เพื่อความคล่องตัว6. ความเสถียรและ Game Feel (Stability & Sound Feedback)ระบบเสียงสังเคราะห์ (Synth Sounds): มีเสียง Jump ตอนกระโดด, เสียงปิ๊งใสๆ ตอนเก็บเหรียญ, เสียงกระแทกทึมๆ ตอนชนสิ่งกีดขวาง และเสียงดนตรีเฉลิมฉลองคอร์ดเมเจอร์ตอนตอบคำถามถูก โดยใช้ระบบป้องกันเบราว์เซอร์บล็อก (Audio Lock Guardrail) ครอบไว้ด้วย try/catchระบบจุดเกิดใหม่ (Checkpoint System): เมื่อตอบคำถามผ่านด่านในแต่ละเซกเมนต์ ระบบจะย้ายพิกัด Checkpoint ไปยังพิกัดปลอดภัยถัดไป หากผู้เล่นตกเหวหรือ HP หมด จะเกิดใหม่ ณ จุดปลอดภัยล่าสุดทันทีโดยไม่ต้องย้อนกลับไปเริ่มด่าน 1 ใหม่ระบบฟิสิกส์คงที่ (Framerate Independence): คำนวณความเร็วและการตกกระแทกของตัวละครด้วยค่า deltaTime ของบราวเซอร์เพื่อให้เกมเคลื่อนไหวลื่นไหลสม่ำเสมอในทุกหน้าจออุปกรณ์ 

ISOMETRIC BLOCK-CODING PUZZLE GAMEYou are an expert game designer and senior frontend developer. Your task is to generate a fully self-contained, responsive, and highly polished Web-based puzzle game in a single HTML file (HTML5 Canvas + CSS + Vanilla JS) with premium aesthetics and professional design.Game Concept: "Coding Fox: 50 Levels Journey"A 3D Isometric logic puzzle game where players help a cute low-poly orange fox reach a golden pinecone by arranging code blocks (Forward, Turn Right, Turn Left) on a modern coding panel workspace.1. Visual & Graphic Specifications (HTML5 Canvas)Isometric Projection: Render a grid-based isometric map. Each tile has a width of 66px and height of 33px.Visual Depth & Painter's Algorithm: Sort and draw tiles from back to front (top-left to bottom-right) to ensure correct depth sorting.Premium Styling:Path/Soil Tiles: Rich brown colors (#B88655 top, #8A5D33 left, #9E6F40 right) with soft white grid borders.Grass Tiles: Vibrant green (#8EB84D top, #6D9436 left, #7EAB3F right).Low-Poly Pine Trees (Obstacles): Trunk (#654228) and multi-layered foliage with gradient green shades to simulate dynamic lighting.The Fox: Minimalist 3D-box orange fox (#E35F14) with a white chest patch, cute ears, a tail, and a glowing yellow direction pointer so players know where it is facing.Pinecone (Target): Multi-layered golden-orange pinecone (#FF9F43 top).Ambient Shadows: Cast semi-transparent dark ellipses (rgba(0,0,0,0.18)) under the fox, trees, and pinecone on the ground.2. User Interface & Themes (HTML & CSS)Palette: Sky-blue pastel background (#D2EAF4). Modern Midnight Navy theme for the Code Panel (#111324).Layout: Responsive 2-column flexbox design. Left Column holds the Canvas & Camera Controls. Right Column holds the Level Info, Code Panel, and Level Selector.Code Panel:Workspace: A container with slots representing the limit of commands allowed for the level, rendered as sleek dashed boxes (border: 1.5px dashed rgba(255,255,255,0.25)).Command Blocks: Gorgeous tactile buttons with SVG icons (Forward: ➔, Turn Right: ↻, Turn Left: ↺) using bright colors (Blue, Green, Orange) that scale and drop-shadow on hover.Play Button: A clean, modern white-bordered play button with pulse animations indicating it is ready to run.Camera Controls (Bottom-Left): Modern translucent round buttons with SVG icons for Zoom In, Zoom Out, Reset/Recenter View, and Audio Toggle (Mute/Unmute).3. Core Mechanics & Solvability Assurance (The Masterpiece Engine)Strict BFS Pathfinding Solver: - To prevent broken or impossible levels, the game must include a built-in Breadth-First Search (BFS) solver.During generateLevel(), the algorithm simulates all possible command sequences (Forward, Turn Right, and Turn Left) from the start coordinate to the target.If a randomly generated map is unsolvable (e.g., trees blocking the path, or unreachable targets), the engine must automatically slide the RNG seed and generate a new layout until a valid path is found.Dynamic Level Progress: The number of coding slots (maxSlots) must adaptively equal the length of the shortest path solved by the BFS (solution.length). This guarantees a perfectly balanced puzzle.Level Restrictions:Levels 1 to 4 must be solved using only Forward and Turn Right commands. The Left-turn (↺) button must be locked and disabled both in the UI and within the BFS solver simulator during these early levels.Levels 5 to 50 unlock the Turn Left command.4. Audio Effects (Web Audio API)Generate high-quality retro synthesizer sound effects directly from JavaScript code without relying on external .mp3 or .wav files:move: A soft, high-pass triangle wave sweeping upwards.turn: A brief, pleasant sine wave sweep.success: A majestic ascending C-Major chord arpeggio (sine waves).fail: A low-pitched, gritty sawtooth frequency drop representing a crash or out-of-bounds error.5. Epic Victory & Celebration UI (Celebration Overlay)Glassmorphism Overlay: When a level is cleared, display a full-screen blurred modal (backdrop-filter: blur(10px)).Sunburst Effect: Include a beautiful conic-gradient sunburst animation spinning in the background.Responsive Stars System: Animate 3 golden stars bouncing into the viewport one by one based on the efficiency of the player's code.Confetti Canvas: An active, hardware-accelerated 2D canvas that rains colorful rectangular confetti across the entire viewport upon level completion.

จงสร้างเกมการศึกษาเรื่องภัยไซเบอร์และการใช้เทคโนโลยีอย่างปลอดภัย (วิทยาการคำนวณ) สำหรับนักเรียนระดับประถมศึกษา ในรูปแบบเว็บแอปพลิเคชันหน้าเดียว (Single-file HTML5) ที่รวบรวม HTML, CSS และ JavaScript ไว้ด้วยกัน โดยเน้นงานดีไซน์ที่น่ารัก สดใส พาสเทล แคนดี้ (Cute Pastel Candy Theme) เพื่อดึงดูดความสนใจและสร้างประสบการณ์การเรียนรู้ที่สนุกสนาน1. ข้อมูลทั่วไปและสไตล์การออกแบบ (UI/UX Design Style)ภาษาที่ใช้: ภาษาไทยเป็นหลัก ใช้ฟอนต์ 'Kanit' จาก Google Fonts เพื่อความน่ารัก ทันสมัย และอ่านง่ายสำหรับเด็กโทนสีและธีม:เน้นสีพาสเทลสว่างสดใส (Pastel-light Theme) เช่น ชมพูพาสเทล (#fce7f3), ฟ้าพาสเทล (#e0f2fe), ม่วงพาสเทล (#f3e8ff), เขียวมิ้นต์ (#ccfbf1), และเหลืองพาสเทลใช้ดีไซน์ Light Glassmorphism (พื้นหลังโปร่งแสงสีขาวละมุนตา ขอบโค้งมนเด่นชัด มีมิติด้วยแสงและเงาฟุ้งๆ) เพื่อความปลอดภัย สบายตา และดูพรีเมียมมีหน้าเมนูหลัก (Start Screen) ที่สดใส มีแอนิเมชันของ "พี่แมวส้มตัวตลกขยับได้" และดาวดึ๋งๆ ตกแต่งไลบรารีภายนอก (CDN):Tailwind CSS (https://cdn.tailwindcss.com)MediaPipe Hands (camera_utils.js, control_utils.js, drawing_utils.js, hands.js) สำหรับทำ AR ตรวจจับการเคลื่อนไหวของมือTone.js (https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js) สำหรับสร้างเสียงเอฟเฟกต์สังเคราะห์ (Synth) แบบออฟไลน์ทั้งหมด2. ระบบเกมเพลย์หลัก (Core Gameplay Mechanics)แนวเกม: 2D Platformer วิ่งข้ามแท่นกระโดดแบบต่อเนื่องไร้รอยต่อ (Seamless Continuous World)ตัวละครหลัก: พี่แมวส้มน่ารัก (คล้าย Scratch Cat) วาดด้วย Canvas API แบบเวกเตอร์ขยับตามการเคลื่อนที่ (มีขาเดิน, หางโบกพริ้ว, ตาเป็นประกาย และใส่ผ้าพันคอสีฟ้าขยับตามลม)ระบบสิ่งกีดขวางและไอเทม:แท่นกระโดด (Platforms): แยกโทนสีตามหมวดหมู่เนื้อหาภัยไซเบอร์ (เช่น Phishing = ชมพู, Password = ฟ้า, Cyberbully = ม่วง ฯลฯ) พร้อมประดับไอเทมประกายระยิบระยับมอนสเตอร์ตัวร้ายสุดคิ้วต์ (Enemies): ตัวแทนไวรัส มัลแวร์ หรือแมลงไซเบอร์ (เช่น , , ) เดินไปมาบนแท่น หากผู้เล่นกระโดดเหยียบหัวจะได้คะแนนและกำจัดมอนสเตอร์ได้ หากชนด้านข้างพลังชีวิต (System Health) จะลดลงไอเทมช่วยเหลือ (Power-ups): เหรียญ Byte (), โล่แสงดาวอมตะ (), จรวดสายรุ้งวิ่งเร็ว (), ยาเพิ่มพลังใจ ()การ์ดข้อมูล (Data Card - ): ไอเทมหลักที่จะปรากฏท้ายเซกเมนต์ของด่าน เพื่อใช้เปิด "ภารกิจตอบคำถามวิทยาการคำนวณ"3. เนื้อหาและคลังคำถามวิทยาการคำนวณ 20 ข้อ (แบ่งตามหมวดหมู่)ประกอบด้วยคำถามแบบปรนัย (4 ตัวเลือก) และเฉลยที่ถูกต้อง ไล่ระดับความลึกตั้งแต่ข้อ 1 - 20 โดยครอบคลุมหมวดหมู่ดังนี้:Phishing (อีเมล/ลิงก์หลอกลวง): ลิงก์ปลอมแอบอ้างสิทธิ์, โฆษณาป๊อปอัปหลอกรับของรางวัลฟรี [ข้อ 1 - 2]Password (รหัสผ่านที่แข็งแกร่งและการล็อกอิน): โครงสร้างรหัสผ่านที่ปลอดภัย, ประโยชน์และวิธีการใช้ยืนยันตัวตน 2 ชั้น (2FA) [ข้อ 3 - 4]Cyberbullying (การกลั่นแกล้งออนไลน์): วิธีจัดการเมื่อเห็นเพื่อนถูกรังแก, การคิดวิเคราะห์พฤติกรรมก่อนพิมพ์/แชร์ [ข้อ 5 - 6]Malware & Viruses (ภัยคุกคามคอมพิวเตอร์): การติดตั้งโปรแกรมสแกนไวรัส, การป้องกันตนเองจากไวรัสเรียกค่าไถ่ (Ransomware) [ข้อ 7 - 8]Privacy & Digital Footprint (รอยเท้าดิจิทัลและความเป็นส่วนตัว): ข้อมูลที่ไม่ควรแชร์ลงโซเชียล, ความเสี่ยงจากการแชร์ตำแหน่ง real-time (Location), การคุยกับคนแปลกหน้าออนไลน์ [ข้อ 9 - 12]Safe Browsing & Public Wi-Fi (ความปลอดภัยเครือข่าย): อันตรายจากการใช้ Wi-Fi สาธารณะโดยไม่เข้ารหัส, การสังเกตสัญลักษณ์กุญแจล็อก HTTPS [ข้อ 13 - 14]Fake News & Copyright (ข่าวปลอมและลิขสิทธิ์): วิธีการตรวจสอบข่าวแชร์บิดเบือน, การรู้จักพาดหัวล่อให้คลิก (Clickbait), ความเข้าใจเบื้องต้นเรื่องลิขสิทธิ์และการอ้างอิง [ข้อ 15 - 17]Digital Citizenship (พลเมืองดิจิทัลที่ดี): การจัดสรรเวลาหน้าจอ (Screen Time), ประโยชน์ของการอัปเดตระบบปฏิบัติการ, การช่วยเหลือสังคมด้วยการรายงานปัญหา (Report) [ข้อ 18 - 20]4. ระบบแสดงภาพประกอบเวกเตอร์ SVG ไดนามิก (Visual Science Cards)ในหน้าจอควิซข้อสอบ (Quiz Modal) จะต้องสร้างฟังก์ชัน buildVirtualCyberCard และ getIllustration(levelId) เพื่อดึงกราฟิกเวกเตอร์ความละเอียดสูงที่เป็น Inline SVG ทั้งหมด 20 ภาพ (ห้ามใช้ภาพจากลิงก์ภายนอกเด็ดขาดเพื่อป้องกันปัญหาภาพโหลดไม่ขึ้น):ตัวอย่างภาพเวกเตอร์สำหรับคำถามแต่ละหัวข้อ:ด่าน 1 (Phishing): รูปเบ็ดตกปลาสีชมพูกำลังเกี่ยวดึงซองจดหมายขึ้นมาด่าน 3 (Password): กล่องแม่กุญแจพาสเทลเรืองแสงพร้อมข้อความจำลองรหัสผ่าน ***ด่าน 7 (Malware): แมลงตัวกลมสีเขียวสว่างตาโตขี้เล่นกำลังไต่คอมพิวเตอร์ด่าน 13 (Public Wi-Fi): สัญญาณปล่อยคลื่น Wi-Fi สีฟ้าที่มีรัศมีแผ่ขยายลอยอยู่บนเมฆด่าน 18 (Screen Time): นาฬิกาบอกเวลามีสีสันแนวพาสเทลน่ารักคู่กับแท็บเล็ต5. การควบคุมด้วย AR และระบบสำรองแบบยืดหยุ่น (AR Gesture & Touch Inputs)การควบคุมผ่านกล้อง AR (MediaPipe Hands):กำมือ (Fist): เดินไปทางซ้ายกางมือ (Open Hand): เดินไปทางขวาจีบนิ้วชี้กับนิ้วโป้งชนกัน (Pinch): สั่งกระโดดขึ้นต้องแสดงภาพโครงร่างจำลองกระดูกนิ้วมือแบบโปร่งแสงสะท้อนกระจก (Mirror) พร้อมพิมพ์ข้อความสัญลักษณ์บอกสถานะ เช่น " ซ้าย (กำมือ)" ลอยตามมือผู้เล่นเพื่อความตื่นเต้นและใช้งานง่ายระบบควบคุมสำรอง (Fallback Controls):มีปุ่มกดขนาดใหญ่โปร่งแสงรูป ที่มุมซ้ายและขวาล่างของหน้าจอสำหรับสมาร์ตโฟน/แท็บเล็ตรองรับการใช้คีย์บอร์ด ปุ่มลูกศรซ้าย/ขวา และ Spacebar เพื่อความคล่องตัว6. ความเสถียรและ Game Feel (Stability & Sound Feedback)ระบบเสียงสังเคราะห์ (Synth Sounds): มีเสียง Jump ตอนกระโดด, เสียงปิ๊งใสๆ ตอนเก็บเหรียญ, เสียงกระแทกทึมๆ ตอนชนสิ่งกีดขวาง และเสียงดนตรีเฉลิมฉลองคอร์ดเมเจอร์ตอนตอบคำถามถูก โดยใช้ระบบป้องกันเบราว์เซอร์บล็อก (Audio Lock Guardrail) ครอบไว้ด้วย try/catchระบบจุดเกิดใหม่ (Checkpoint System): เมื่อตอบคำถามผ่านด่านในแต่ละเซกเมนต์ ระบบจะย้ายพิกัด Checkpoint ไปยังพิกัดปลอดภัยถัดไป หากผู้เล่นตกเหวหรือ HP หมด จะเกิดใหม่ ณ จุดปลอดภัยล่าสุดทันทีโดยไม่ต้องย้อนกลับไปเริ่มด่าน 1 ใหม่ระบบฟิสิกส์คงที่ (Framerate Independence): คำนวณความเร็วและการตกกระแทกของตัวละครด้วยค่า deltaTime ของบราวเซอร์เพื่อให้เกมเคลื่อนไหวลื่นไหลสม่ำเสมอในทุกหน้าจออุปกรณ์