เกมส์

🚀ฟรี...สร้างเกมการศึกษาเรื่อง “โครงสร้าง หน้าที่ และการทำงานของหัวใจมนุษย์” เรียนรู้โครงสร้าง หน้าที่ และการทำงานของหัวใจ 💥Cava ai สร้างสื่อการสอน 🌱(ได้ทุกวิชา) 🌱 📌 วิธีทำ 1️⃣ เข้าสู่ระบบที่ https://www.canva.com/ai/code 2️⃣ วาง Prompt ด้านล่าง ลงไปก่อน 3️⃣ กด แผยแพร่ จบว้าวๆ เกม : สร้างด้วย gemini : https://puttawanglap-ctrl.github.io/Heart/ วิธีกดเผยแพร่ : https://www.facebook.com/share/v/1RtqLyE7Jz/ Prompt : คุณคือนักพัฒนาเกม (Game Developer) ระดับ Senior และผู้เชี่ยวชาญด้านสื่อการสอน (EdTech Expert) ที่เก่งการเขียนโค้ดด้วย HTML5, JavaScript และ Tailwind CSS Task: สร้างเกม Web Browser บนมือถือ (Mobile First) แบบ Single-file (HTML ไฟล์เดียวรวม CSS/JS) แนว Interactive Education + Mini Games เรื่อง "โครงสร้าง หน้าที่ และการทำงานของหัวใจมนุษย์" สำหรับนักเรียนระดับชั้น ม.2 🎨 1. Theme & UI/UX Design Style: Sci-Fi, Neon (Cyan, Pink, Blood Red), Glassmorphism (กรอบใสแบบกระจก) Layout: ออกแบบหน้าจอแบบ "Game Dashboard/Hub" มี Top HUD (แสดง HP 100, เหรียญ, เพชร) และ Bottom Navigation Menu Main Visual: ตรงกลางหน้า Dashboard เป็นภาพจำลองหัวใจ 4 ห้อง (ใช้ SVG วาดด้วยโค้ด) พร้อมป้าย Label ชี้บอกหน้าที่ Animations: มีเอฟเฟกต์หัวใจเต้น (Heartbeat Scale), ไอเทมลอยตัว (Float), และแสงกระพริบแนะนำปุ่ม (Pulse Hint) Feedback: มีระบบ Toast Notification เด้งเตือนเมื่อผู้เล่นกดปุ่มฟังก์ชันต่างๆ ⚙️ 2. Tech Stack & Constraints Framework: Vanilla HTML5, CSS3, JavaScript Styling: Tailwind CSS (ผ่าน CDN) พร้อมตั้งค่า config สี Custom ในแท็ก <script> Icons: FontAwesome (ผ่าน CDN) Audio: ห้ามใช้ไฟล์เสียง .mp3 ภายนอก ให้ใช้ Web Audio API (AudioContext) สร้างเสียงสังเคราะห์ (Beep, Sine wave) สำหรับเสียงกดปุ่ม, สำเร็จ, พลาด และทำดาเมจ File: ทุกอย่างต้องจบใน index.html ไฟล์เดียวเท่านั้น 🎮 3. Game System (5 ภารกิจหลัก) เมื่อผู้เล่นกด "เริ่มเกม" จะตัดเข้าสู่ฉากภารกิจ 5 ด่าน ดังนี้: ด่าน 1: ห้องหัวใจทั้ง 4 (Exploration) แตะที่หัวใจแต่ละห้อง (บนขวา, ล่างขวา, บนซ้าย, ล่างซ้าย) เพื่ออ่านหน้าที่ของห้องนั้น ใช้สีน้ำเงินแทนเลือดเสีย (ฝั่งขวา) และสีแดงแทนเลือดดี (ฝั่งซ้าย) ด่าน 2: เส้นทางเลือด (Flow Sequencing) ผู้เล่นต้องกดปุ่มเรียงลำดับการไหลของเลือดให้ถูกต้อง: ร่างกาย -> หัวใจขวา -> ปอด -> หัวใจซ้าย -> ร่างกาย ด่าน 3: ลิ้นหัวใจ (Reflex Mini-game) มีแถบเกจและจุดสีแดงวิ่งไปมา ผู้เล่นต้องกดปุ่ม "เปิดลิ้นหัวใจ" ให้ตรงจังหวะที่จุดแดงวิ่งเข้า "โซนสีเขียว" ให้สำเร็จ 3 ครั้ง ด่าน 4: ปอดแลกเปลี่ยนแก๊ส (Canvas Mini-game) สร้างมินิเกมด้วย HTML5 <canvas> กดยกตัวแบบ Flappy Bird บังคับเม็ดเลือดแดงให้ลอยไปเก็บ ออกซิเจน (O2 สีฟ้า) 5 อัน และหลบหลีก เชื้อโรค (สีเขียว) ด่าน 5: Boss Battle (Quiz System) ตอบคำถามวิทยาศาสตร์ 4-5 ข้อเกี่ยวกับการทำงานของหัวใจเพื่อทำดาเมจใส่รูปบอสเชื้อโรค (SVG) จุดสำคัญ: หากตอบผิด หุ่นยนต์ AI Guide ต้องเด้งขึ้นมา "อธิบายเหตุผล/เฉลย" ให้ผู้เล่นเข้าใจก่อนไปข้อถัดไป 🤖 4. AI Guide & Helpers มีตัวละคร "หุ่นยนต์หมอ AI" โผล่มาด้านล่างหน้าจอเพื่ออธิบายกติกาในทุกๆ ด่านก่อนเริ่มเล่น มีปุ่ม "วิธีเล่น (How to play)" แบบ Modal Popup ที่หน้า Dashboard 💰 5. Progression System ทุกครั้งที่ผ่านด่าน หรือตอบถูก จะได้คะแนน (Score) เด้งแอนิเมชันขึ้นไปที่ Top HUD หากพลาด (ตอบผิด, ชนสิ่งกีดขวาง) HP จะลดลง และหน้าจอจะสั่น (Screen Shake) + แฟลชสีแดง เมื่อเล่นจบ 5 ด่าน จะมีหน้า Victory Screen สรุปคะแนน และปุ่มกลับหน้าหลัก มีปุ่ม "Daily Reward" ที่หน้า Dashboard ให้กดรับเหรียญ 100 เหรียญได้ ข้อควรระวัง: เขียนโค้ดให้สมบูรณ์ ปุ่มทุกปุ่มต้องกดได้ (Wire-up events) ฟังก์ชันเกมเพลย์ต้องเล่นได้จริงจนจบเกม และเขียนคอมเมนต์ภาษาไทยอธิบายโค้ดส่วนสำคัญ