แจกฟรี! วิธีสร้างเกม “ทายสีผลไม้” นำเข้าสู่บทเรียนด้วย AI ใน 10 นาที (ไม่ต้องเขียนโค้ด)

การดึงความสนใจนักเรียน โดยเฉพาะเด็กปฐมวัยและประถมศึกษาตอนต้นในช่วง 5 นาทีแรกของการเริ่มคลาสเรียน ถือเป็นความท้าทายอย่างมากสำหรับคุณครู วันนี้เว็บไซต์ KruThaiDev ขอแนะนำเทคนิคการนำเทคโนโลยี AI มาช่วยสร้างสื่อการสอนแบบ Interactive หรือ “เกมออนไลน์” แสนสนุก ที่คุณครูสามารถทำเองได้ง่ายๆ ภายใน 10 นาที โดยไม่จำเป็นต้องมีความรู้เรื่องการเขียนโปรแกรมเลยแม้แต่น้อย!

เกมที่เราจะทำกันในวันนี้คือ “เกมทายสีผลไม้ (Fruit Color Guessing Game)” ซึ่งสามารถนำไปประยุกต์ใช้ได้ทั้งวิชาภาษาไทย ภาษาอังกฤษ และวิทยาศาสตร์

สิ่งที่คุณครูต้องเตรียม

1. คอมพิวเตอร์หรือแล็ปท็อป
2. บัญชีสำหรับใช้งาน ChatGPT (ใช้ฟรี)
3. บัญชีสำหรับสร้างรูปภาพด้วย AI เช่น Bing Image Creator หรือ Canva Magic Media (ใช้ฟรี)

ขั้นตอนที่ 1: ใช้ AI สร้างตัวละครผลไม้สุดน่ารัก

เราจะใช้ AI สร้างรูปผลไม้ที่มีพื้นหลังสีขาว เพื่อให้นำไปใช้ในเกมได้ง่ายและดูสะอาดตา ให้คุณครูนำคำสั่ง (Prompt) ด้านล่างนี้ ไปวางในโปรแกรมสร้างรูปภาพได้เลยครับ

คำสั่ง (Prompt) สำหรับคัดลอก:

Cute cartoon style [เปลี่ยนเป็นชื่อผลไม้ที่ต้องการ เช่น Apple, Banana, Grape], dynamic pose, smiling widely, friendly, vibrant colors, isolated on pure white background, kindergarten learning material style –ar 3:2

เมื่อได้รูปผลไม้ที่ต้องการแล้ว ให้ดาวน์โหลดและบันทึกเก็บไว้ในโฟลเดอร์เดียวกัน

💡 เทคนิคเพิ่มเติม: หากคุณครูต้องการอัดคลิปหน้าจอเพื่อทำเป็นวิดีโอสื่อการสอนส่งให้เด็กๆ ดูย้อนหลัง แนะนำให้ใช้ไมโครโฟนไร้สายแบบหนีบปกเสื้อที่มีระบบตัดเสียงรบกวน จะช่วยให้เสียงพูดของคุณครูชัดเจนและน่าฟังยิ่งขึ้นครับ (ดูรีวิวไมค์ช่วยสอนราคาประหยัดที่นี่ – ใส่ลิงก์ Affiliate ของคุณ)

ขั้นตอนที่ 2: ให้ ChatGPT เขียนโค้ดเกมให้ทั้งหมด

ขั้นตอนนี้คือหัวใจสำคัญครับ เราจะให้ AI เขียนโค้ดเกมให้ทั้งหมด คุณครูเพียงแค่เปิด ChatGPT ขึ้นมา แล้วคัดลอกคำสั่งด้านล่างนี้ไปวาง

คำสั่ง (Prompt) สำหรับคัดลอก:

ช่วยเขียนโค้ด HTML, CSS, และ JavaScript ในไฟล์เดียว สำหรับสร้างเกม “ทายสีผลไม้” สำหรับเด็กอนุบาล โดยมีเงื่อนไขดังนี้: 1. มีรูปผลไม้ 1 รูปตรงกลาง (สุ่มแสดง กล้วย, แอปเปิล, องุ่น) 2. มีปุ่มกดสีใหญ่ๆ 3 ปุ่มด้านล่าง (สีเหลือง, สีแดง, สีม่วง) 3. เมื่อเด็กกดปุ่มสี ถ้าถูกให้แสดงข้อความ “เก่งมากจ้า! 🌟” พร้อมปุ่ม “เล่นข้อต่อไป”, ถ้าผิดให้แสดง “ลองใหม่นะจ๊ะ! 😊” 4. ใช้สีสันสดใส ตัวหนังสือใหญ่ อ่านง่าย

โค้ดสำเร็จรูป (สามารถคัดลอกไปใช้ได้ทันที): หากคุณครูไม่สะดวกไปสั่งการใน ChatGPT ทาง KruThaiDev ได้เตรียมโค้ดสำเร็จรูปไว้ให้แล้ว คัดลอกโค้ดในกล่องด้านล่างนี้ได้เลยครับ

HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เกมทายสีผลไม้แสนสนุก</title>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Kanit', sans-serif; background-color: #f0f8ff; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
        .game-container { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); text-align: center; max-width: 500px; width: 90%; }
        h1 { color: #ff6b6b; font-size: 32px; margin-bottom: 10px; }
        p { font-size: 24px; color: #4eca6c; font-weight: bold; margin-bottom: 20px; }
        .fruit-display { font-size: 120px; margin: 20px 0; animation: bounce 2s infinite; }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);} }
        .buttons { display: flex; justify-content: space-around; gap: 15px; margin-top: 30px; }
        .color-btn { padding: 15px 30px; font-size: 22px; border: none; border-radius: 50px; cursor: pointer; color: white; font-weight: bold; font-family: 'Kanit', sans-serif; transition: transform 0.2s; }
        .color-btn:hover { transform: scale(1.1); }
        .btn-yellow { background-color: #feca57; color: #333; }
        .btn-red { background-color: #ff6b6b; }
        .btn-purple { background-color: #9b59b6; }
        #message { margin-top: 30px; font-size: 30px; font-weight: bold; height: 40px; }
        .next-btn { margin-top: 20px; padding: 15px 30px; font-size: 20px; font-family: 'Kanit', sans-serif; background-color: #4eca6c; color: white; border: none; border-radius: 50px; cursor: pointer; display: none; }
    </style>
</head>
<body>
<div class="game-container">
    <h1>เกมทายสีผลไม้</h1>
    <p>ผลไม้นี้สีอะไรเอ่ย?</p>
    <div class="fruit-display" id="fruit">🍎</div>
    <div class="buttons">
        <button class="color-btn btn-yellow" onclick="checkAnswer('yellow')">สีเหลือง</button>
        <button class="color-btn btn-red" onclick="checkAnswer('red')">สีแดง</button>
        <button class="color-btn btn-purple" onclick="checkAnswer('purple')">สีม่วง</button>
    </div>
    <div id="message"></div>
    <button class="next-btn" id="nextBtn" onclick="nextFruit()">เล่นข้อต่อไป ➡️</button>
</div>
<script>
    const fruits = [
        { emoji: '🍌', color: 'yellow' }, { emoji: '🍎', color: 'red' }, { emoji: '🍇', color: 'purple' }
    ];
    let currentFruit = {};
    function nextFruit() {
        const randomIndex = Math.floor(Math.random() * fruits.length);
        currentFruit = fruits[randomIndex];
        document.getElementById('fruit').innerText = currentFruit.emoji;
        document.getElementById('message').innerText = '';
        document.getElementById('nextBtn').style.display = 'none';
        document.querySelectorAll('.color-btn').forEach(btn => btn.disabled = false);
    }
    function checkAnswer(selectedColor) {
        const messageEl = document.getElementById('message');
        if (selectedColor === currentFruit.color) {
            messageEl.innerText = 'เก่งมากจ้า! 🌟'; messageEl.style.color = '#4eca6c';
            document.getElementById('nextBtn').style.display = 'inline-block';
            document.querySelectorAll('.color-btn').forEach(btn => btn.disabled = true);
        } else {
            messageEl.innerText = 'ลองใหม่นะจ๊ะ! 😊'; messageEl.style.color = '#ff6b6b';
        }
    }
    nextFruit();
</script>
</body>
</html>

ขั้นตอนที่ 3: วิธีการนำไปใช้สอน

1. ให้คุณครูเปิดโปรแกรม Notepad (ใน Windows) หรือ TextEdit (ใน Mac)
2. นำโค้ดที่คัดลอกไว้ ไปวางลงในโปรแกรม
3. กด File > Save As…
4. ตั้งชื่อไฟล์ว่า game.html (สำคัญมาก: ต้องมี .html ต่อท้าย) และเลือก Save as type เป็น All Files
5. ดับเบิลคลิกที่ไฟล์ game.html ที่บันทึกไว้ เกมจะถูกเปิดขึ้นมาบนเว็บเบราว์เซอร์ พร้อมนำไปต่อขึ้นโปรเจคเตอร์หรือจอทีวีให้นักเรียนเล่นได้ทันที!

การนำ AI มาช่วยสร้างสื่อการสอนไม่เพียงแต่จะช่วยลดภาระงานของคุณครูเท่านั้น แต่ยังช่วยสร้างประสบการณ์การเรียนรู้ที่แปลกใหม่และน่าจดจำให้กับผู้เรียนอีกด้วย ลองนำไปใช้กันดูนะครับ!

หากคุณครูชื่นชอบเทคนิคดีๆ แบบนี้ อย่าลืมแชร์บทความนี้ไปให้เพื่อนๆ ครูได้อ่านกันนะครับ และสามารถติดตามอัปเดตเครื่องมือ AI สำหรับการศึกษาใหม่ๆ ได้ที่ KruThaiDev.com เป็นประจำทุกสัปดาห์ครับ