แก้ไขเกมการศึกษา

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

Title

Description

Keyword

Detail (HTML Code)

<div class="fc-wrapper" id="fc-game-container">
    
    
    <div id="fc-screen-start" class="fc-screen fc-active">
        <div style="font-size: 70px; margin-bottom: 10px; animation: fcFloat 2s ease-in-out infinite;">🐱🌱</div>
        <h1 class="fc-title">Flowchart Builder</h1>
        <p class="fc-subtitle">ภารกิจ: น้องแมวรดน้ำต้นไม้ (Smart Sprinkler)</p>
        
        <div class="fc-rules-box">
            <h3 style="color: #FFCDD2; margin-top: 0; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">📋 คู่มือจัดผังงาน</h3>
            <ul style="margin: 0; font-size: 15px; color: #FFFFFF; line-height: 1.6; text-align: left; padding-left: 20px;">
                <li>ลาก <strong>"บล็อกคำสั่ง"</strong> จากคลังด้านล่าง ไปวางในช่องว่างของผังงาน</li>
                <li>สังเกต <strong>สีของบล็อก</strong> ให้ตรงกับหมวดหมู่ในโปรแกรม Scratch</li>
                <li>จัดเรียงลำดับตรรกะ <strong>ถ้า...มิฉะนั้น</strong> ให้ถูกต้อง</li>
                <li>ลากสลับไปมาได้จนกว่าจะแน่ใจ แล้วกดปุ่มตรวจสอบ!</li>
            </ul>
        </div>
        
        <button class="fc-btn fc-btn-primary" onclick="fc_promptName()">เริ่มต่อผังงาน 🚀</button>
    </div>

<div id="fc-screen-game" class="fc-screen" style="padding: 20px;">
        <div class="fc-hud">
            <div class="fc-hud-item">
                <span class="fc-hud-label">โปรแกรมเมอร์</span><br>
                <strong id="fc-ui-name" style="color: #E63946; font-size: 16px;">-</strong>
            </div>
            <div class="fc-hud-item" style="text-align: right;">
                <span class="fc-hud-label">สถานะ</span><br>
                <strong style="color: #2E7D32; font-size: 16px;">กำลังออกแบบ...</strong>
            </div>
        </div>

<div class="fc-game-area">
            
            <div class="fc-narrative-panel">
                <div class="fc-panel-header">📝 สถานการณ์ (โจทย์)</div>
                <div class="fc-narrative-content">
                    <strong>เงื่อนไขการทำงาน:</strong><br>
                    ให้นักเรียนเขียนโปรแกรมสั่งงานน้องแมวอัตโนมัติ โดยมีเงื่อนไขดังนี้:
                    <ul style="margin-top: 10px; padding-left: 20px;">
                        <li>ให้แมวรับรู้ความชื้นในดิน</li>
                        <li><strong>ถ้า</strong> ดินแห้ง ➔ ให้รดน้ำต้นไม้</li>
                        <li><strong>มิฉะนั้น</strong> ➔ ให้ไปนอนหลับ</li>
                    </ul>
                    <div style="text-align: center; margin-top: 20px; font-size: 40px;">🐈 💦 🪴</div>
                </div>
            </div>

<div class="fc-editor-panel">
                <div class="fc-panel-header" style="background: #4A000D; color: #FFCDD2;">📋 ผังงาน (Flowchart)</div>
                <div class="fc-editor-content flowchart-bg">
                    
                    <div class="fc-flow-row"><div class="fc-slot" data-expected="start"><span class="fc-slot-text">วางจุดเริ่มต้น</span></div></div>
                    <div class="fc-arrow">⬇</div>
                    <div class="fc-flow-row"><div class="fc-slot" data-expected="input"><span class="fc-slot-text">วางการรับค่า</span></div></div>
                    <div class="fc-arrow">⬇</div>
                    <div class="fc-flow-row"><div class="fc-slot" data-expected="condition"><span class="fc-slot-text">วางเงื่อนไข</span></div></div>
                    
                    <div class="fc-branch">
                        <div class="fc-col">
                            <div class="fc-branch-label fc-true">ใช่ (ดินแห้ง)</div>
                            <div class="fc-arrow">⬇</div>
                            <div class="fc-slot" data-expected="action-true"><span class="fc-slot-text">วางการกระทำ</span></div>
                        </div>
                        <div class="fc-col">
                            <div class="fc-branch-label fc-false">ไม่ใช่ (ดินชุ่มชื้น)</div>
                            <div class="fc-arrow">⬇</div>
                            <div class="fc-slot" data-expected="action-false"><span class="fc-slot-text">วางการกระทำ</span></div>
                        </div>
                    </div>
                    
                    <div class="fc-arrow" style="margin-top: 10px;">⬇</div>
                    <div class="fc-flow-row"><div class="fc-slot" data-expected="end"><span class="fc-slot-text">วางจุดสิ้นสุด</span></div></div>

</div>
            </div>
        </div>

<div class="fc-bank-panel">
            <div style="font-size: 14px; color: #780016; font-weight: bold; margin-bottom: 10px;">📦 คลังบล็อกคำสั่ง (ลากไปวางในช่องว่างด้านบน)</div>
            <div class="fc-bank-container" id="fc-inventory">
                
            </div>
        </div>

<div style="text-align: center; margin-top: 15px;">
            <button class="fc-btn fc-btn-success" onclick="fc_checkAnswer()">ตรวจสอบผังงาน (Run) ▶️</button>
        </div>
    </div>

<div id="fc-screen-result" class="fc-screen">
        <div id="fc-res-icon" style="font-size: 80px; margin-bottom: 10px; animation: fcPop 1s infinite alternate;">🎉✨</div>
        <h1 class="fc-title" style="color: #2E7D32;">ยอดเยี่ยมมาก!</h1>
        <p class="fc-subtitle" style="color: #4CAF50;">อัลกอริทึมของคุณถูกต้องสมบูรณ์</p>
        
        <div class="fc-rules-box" style="text-align: center; border-color: #4CAF50; background: #E8F5E9; max-width: 600px;">
            <h3 style="color: #2E7D32; margin-top: 0;">🎮 ลองทดสอบการทำงานของโปรแกรม</h3>
            <p style="color: #333; font-size: 14px;">ลองคลิกปุ่มด้านล่างเพื่อจำลองการส่งค่าจากเซนเซอร์</p>
            
            <div style="display: flex; justify-content: center; gap: 10px; margin: 15px 0;">
                <button class="fc-btn" style="background: #F6B26B; color: #FFF; padding: 10px 20px; font-size: 15px;" onclick="fc_runSim('dry')">ทดสอบ: ถ้าดินแห้ง 🥀</button>
                <button class="fc-btn" style="background: #9FC5E8; color: #333; padding: 10px 20px; font-size: 15px;" onclick="fc_runSim('wet')">ทดสอบ: ถ้าดินชุ่มชื้น 🌱</button>
            </div>

<div id="fc-sim-result" style="font-size: 20px; font-weight: bold; color: #780016; background: #FFF; padding: 15px; border-radius: 8px; border: 2px dashed #4CAF50;">
                🐱 ...รอคำสั่งจากเซนเซอร์...
            </div>
        </div>
        
        <button class="fc-btn fc-btn-primary" onclick="fc_restartGame()">เริ่มต้นใหม่ 🔄</button>
    </div>

</div>

.fc-wrapper * { box-sizing: border-box; }

.fc-screen { display: none; padding: 40px 30px; animation: fcFadeIn 0.3s ease-out forwards; min-height: 600px; flex-direction: column; justify-content: center; align-items: center; }
    .fc-screen.fc-active { display: flex; }
    #fc-screen-game { display: none; flex-direction: column; justify-content: flex-start; align-items: stretch; }
    #fc-screen-game.fc-active { display: flex; }

@keyframes fcFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes fcPop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.fc-title { font-size: 36px; color: #780016; margin: 0 0 5px 0; font-weight: 800; text-align: center; }
    .fc-subtitle { font-size: 18px; color: #E63946; font-weight: 600; margin: 0 0 25px 0; text-align: center; }

.fc-rules-box {
        background: #780016; border: 3px solid #E63946;
        padding: 25px; border-radius: 15px; margin: 0 auto 30px auto; max-width: 500px;
        box-shadow: 0 8px 15px rgba(230, 57, 70, 0.3);
    }

.fc-btn {
        display: inline-block; padding: 15px 35px; font-size: 18px; font-weight: 800;
        border: none; border-radius: 12px; cursor: pointer; transition: all 0.1s;
        font-family: 'Prompt', sans-serif; text-align: center;
    }
    .fc-btn-primary { background: #780016; color: #FFFFFF; box-shadow: 0 6px 0 #4A000D; }
    .fc-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #4A000D; }
    
    .fc-btn-success { background: #E63946; color: #FFFFFF; box-shadow: 0 6px 0 #B31222; width: 100%; max-width: 300px; }
    .fc-btn-success:active { transform: translateY(6px); box-shadow: 0 0px 0 #B31222; }

.fc-hud {
        display: flex; justify-content: space-between; align-items: center;
        background: #FFFFFF; padding: 10px 20px; border-radius: 12px;
        margin-bottom: 20px; border: 2px solid #780016; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .fc-hud-item { flex: 1; text-align: left; line-height: 1.2; }
    .fc-hud-label { font-size: 12px; color: #78909C; font-weight: bold; }

.fc-game-area { display: flex; gap: 15px; margin-bottom: 15px; flex-direction: column; }
    @media (min-width: 750px) { .fc-game-area { flex-direction: row; } }

.fc-narrative-panel, .fc-editor-panel {
        flex: 1; background: #FFF; border-radius: 12px; border: 2px solid #FFCDD2;
        overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column;
    }

.fc-panel-header { background: #780016; color: #FFF; padding: 10px 15px; font-weight: bold; font-size: 15px; text-align: center; }
    .fc-narrative-content { padding: 15px; font-size: 16px; color: #333; }
    .fc-editor-content { padding: 15px; display: flex; flex-direction: column; align-items: center; background: #FAFAFA; flex: 1; overflow-y: auto; }

/* Flowchart Layout */
    .fc-flow-row { width: 100%; display: flex; justify-content: center; z-index: 2;}
    .fc-arrow { font-size: 20px; font-weight: bold; color: #9E9E9E; margin: -2px 0; z-index: 1;}
    
    .fc-branch { display: flex; justify-content: center; gap: 20px; width: 100%; margin-top: 5px; }
    .fc-col { display: flex; flex-direction: column; align-items: center; width: 50%; }
    .fc-branch-label { font-weight: bold; font-size: 13px; padding: 2px 10px; border-radius: 12px; border: 1px solid;}
    .fc-true { background: #FFF3E0; color: #E65100; border-color: #FFB74D; }
    .fc-false { background: #E8F5E9; color: #1B5E20; border-color: #81C784; }

.fc-slot {
        background: #F0F4C3; border: 2px dashed #C0CA33; border-radius: 8px;
        min-height: 48px; width: 100%; max-width: 180px; display: flex; align-items: center; justify-content: center;
        transition: all 0.2s; position: relative; padding: 4px;
    }
    .fc-slot-text { color: #827717; font-size: 13px; pointer-events: none; text-align: center; }
    .fc-slot.fc-drag-over { background: #FFF9C4; border-color: #F57F17; transform: scale(1.05); z-index: 5;}

.fc-bank-panel { background: #FFF; padding: 15px; border-radius: 12px; border: 2px solid #780016; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
    .fc-bank-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 60px; }

/* รูปร่างบล็อกคำสั่งแบบ Scratch */
    .fc-draggable {
        color: #333; padding: 10px 15px; 
        font-family: 'Prompt', sans-serif; font-size: 14px; font-weight: bold;
        cursor: grab; box-shadow: 0 4px 0 rgba(0,0,0,0.2); transition: transform 0.1s;
        display: flex; align-items: center; justify-content: center; z-index: 10;
        text-align: center; line-height: 1.2; width: 100%; max-width: 170px;
        user-select: none;
    }
    .fc-draggable:active { cursor: grabbing; }
    .fc-draggable.fc-dragging { opacity: 0.9; transform: scale(1.05); box-shadow: 0 8px 15px rgba(0,0,0,0.3); z-index: 100; pointer-events: none;}

.fc-slot .fc-draggable { width: 100%; max-width: none; box-shadow: 0 2px 0 rgba(0,0,0,0.2); margin: 0; }

/* Scratch Colors & Shapes */
    .fc-bg-yellow { background-color: #FFD966; border: 1px solid #F1C232; border-radius: 25px; } /* Events */
    .fc-bg-blue { background-color: #9FC5E8; border: 1px solid #6D9EEB; border-radius: 6px; } /* Sensing */
    .fc-bg-orange { background-color: #F6B26B; border: 1px solid #E69138; border-radius: 0; border-left: 10px solid #E69138; border-right: 10px solid #E69138; } /* Control - Diamond Fake */
    .fc-bg-purple { background-color: #B4A7D6; border: 1px solid #8E7CC3; border-radius: 6px; } /* Looks */

.fc-touch-ghost { position: fixed; pointer-events: none; z-index: 9999; opacity: 0.9; transform: translate(-50%, -50%); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

/* SweetAlert Override */
    .fc-swal-popup { background: #FFFFFF !important; border: 3px solid #780016 !important; border-radius: 15px !important; font-family: 'Prompt', sans-serif !important; }
    .fc-swal-title { color: #780016 !important; font-size: 22px !important; font-weight: 800 !important; }
    .fc-swal-confirm { background: #E63946 !important; color: #FFF !important; font-weight: bold !important; border-radius: 8px !important; box-shadow: 0 4px 0 #B31222 !important; }
</style>

let fc_playerName = "";
    let fc_audioCtx = null;
    let fc_draggedItem = null;
    let fc_touchGhost = null;

/* --- Audio System --- */
    function fc_initAudio() {
        if (!fc_audioCtx) fc_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (fc_audioCtx.state === 'suspended') fc_audioCtx.resume();
    }

function fc_playSound(type) {
        if (!fc_audioCtx) return;
        try {
            const osc = fc_audioCtx.createOscillator();
            const gain = fc_audioCtx.createGain();
            osc.connect(gain); gain.connect(fc_audioCtx.destination);
            const now = fc_audioCtx.currentTime;

if (type === 'click') {
                osc.type = 'sine'; osc.frequency.setValueAtTime(600, now); osc.frequency.exponentialRampToValueAtTime(1000, now + 0.1);
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now); osc.stop(now + 0.1);
            } else if (type === 'drag') {
                osc.type = 'triangle'; osc.frequency.setValueAtTime(400, now); osc.frequency.exponentialRampToValueAtTime(450, now + 0.1);
                gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now); osc.stop(now + 0.1);
            } else if (type === 'drop') {
                osc.type = 'sine'; osc.frequency.setValueAtTime(500, now); osc.frequency.exponentialRampToValueAtTime(300, now + 0.1);
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now); osc.stop(now + 0.1);
            } else if (type === 'correct') {
                osc.type = 'square'; [523.25, 659.25, 783.99].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1)));
                gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4);
                osc.start(now); osc.stop(now + 0.4);
            } else if (type === 'wrong') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(200, now); osc.frequency.linearRampToValueAtTime(120, now + 0.3);
                gain.gain.setValueAtTime(0.15, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.3);
                osc.start(now); osc.stop(now + 0.3);
            }
        } catch (e) { console.error(e); }
    }

/* --- Navigation --- */
    function fc_showScreen(id) {
        document.querySelectorAll('.fc-screen').forEach(s => s.classList.remove('fc-active'));
        document.getElementById(id).classList.add('fc-active');
    }

function fc_shuffle(array) {
        return array.sort(() => Math.random() - 0.5);
    }

/* --- Game Initialization --- */
    function fc_startGame() {
        fc_playSound('click');
        document.getElementById('fc-ui-name').innerText = fc_playerName;
        
        // ล้างช่องว่างเก่า
        document.querySelectorAll('.fc-slot').forEach(zone => {
            if(zone.children.length > 1) zone.lastChild.remove();
            zone.querySelector('.fc-slot-text').style.display = 'block';
        });

// สร้างบล็อกแบบสุ่ม
        const bank = document.getElementById('fc-inventory');
        bank.innerHTML = '';
        
        let shuffledBlocks = fc_shuffle([...fc_blocksData]);

shuffledBlocks.forEach((data) => {
            const div = document.createElement('div');
            div.className = `fc-draggable ${data.class}`;
            div.draggable = true;
            div.innerText = data.text;
            div.dataset.id = data.id;
            
            // Mouse Events
            div.addEventListener('dragstart', fc_handleDragStart);
            div.addEventListener('dragend', fc_handleDragEnd);
            // Touch Events
            div.addEventListener('touchstart', fc_handleTouchStart, {passive: false});
            div.addEventListener('touchmove', fc_handleTouchMove, {passive: false});
            div.addEventListener('touchend', fc_handleTouchEnd);
            
            bank.appendChild(div);
        });

// Setup Dropzones
        document.querySelectorAll('.fc-slot').forEach(slot => {
            slot.addEventListener('dragover', fc_handleDragOver);
            slot.addEventListener('dragleave', fc_handleDragLeave);
            slot.addEventListener('drop', fc_handleDrop);
        });

bank.addEventListener('dragover', fc_handleDragOver);
        bank.addEventListener('dragleave', fc_handleDragLeave);
        bank.addEventListener('drop', fc_handleDrop);

fc_showScreen('fc-screen-game');
    }

/* --- Drag & Drop Core (Mouse) --- */
    function fc_handleDragStart(e) {
        fc_draggedItem = this;
        setTimeout(() => this.classList.add('fc-dragging'), 0);
        fc_playSound('drag');
    }
    function fc_handleDragEnd(e) { this.classList.remove('fc-dragging'); fc_draggedItem = null; }
    function fc_handleDragOver(e) { e.preventDefault(); this.classList.add('fc-drag-over'); }
    function fc_handleDragLeave(e) { this.classList.remove('fc-drag-over'); }
    function fc_handleDrop(e) {
        e.preventDefault();
        this.classList.remove('fc-drag-over');
        if (fc_draggedItem) fc_processDrop(this, fc_draggedItem);
    }

/* --- Touch Core (Mobile/Tablet) --- */
    function fc_handleTouchStart(e) {
        if(e.cancelable) e.preventDefault(); // ป้องกันจอเลื่อน
        fc_playSound('drag');
        fc_draggedItem = e.target;
        fc_draggedItem.classList.add('fc-dragging');

fc_touchGhost = fc_draggedItem.cloneNode(true);
        fc_touchGhost.classList.add('fc-touch-ghost');
        fc_touchGhost.style.width = fc_draggedItem.offsetWidth + 'px';
        document.body.appendChild(fc_touchGhost);
        fc_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function fc_handleTouchMove(e) {
        if (!fc_touchGhost) return;
        if(e.cancelable) e.preventDefault();
        fc_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function fc_handleTouchEnd(e) {
        if (!fc_touchGhost) return;
        fc_draggedItem.classList.remove('fc-dragging');
        fc_touchGhost.style.display = 'none';
        
        const changedTouch = e.changedTouches[0];
        const elemBelow = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
        fc_touchGhost.remove();
        fc_touchGhost = null;

const zone = elemBelow ? elemBelow.closest('.fc-slot, .fc-bank-container') : null;
        if (zone) fc_processDrop(zone, fc_draggedItem);
        else fc_playSound('drop');
        
        fc_draggedItem = null;
    }
    function fc_moveGhost(x, y) {
        fc_touchGhost.style.left = x + 'px';
        fc_touchGhost.style.top = y + 'px';
    }

// คืนค่าข้อความช่องว่างถ้าไม่มีบล็อก
        document.querySelectorAll('.fc-slot').forEach(s => {
            if (!s.querySelector('.fc-draggable')) {
                const span = s.querySelector('.fc-slot-text');
                if (span) span.style.display = 'block';
            }
        });
    }

/* --- Logic Verification --- */
    function fc_checkAnswer() {
        const slots = document.querySelectorAll('.fc-slot');
        let isFull = true;
        let isCorrect = true;

slots.forEach(slot => {
            const expected = slot.dataset.expected;
            const item = slot.querySelector('.fc-draggable');
            
            if (!item) {
                isFull = false;
            } else if (item.dataset.id !== expected) {
                isCorrect = false;
            }
        });

if (!isFull) {
            fc_playSound('wrong');
            Swal.fire({ title: 'เดี๋ยวก่อน!', text: 'คุณยังวางบล็อกในผังงานไม่ครบนะ', icon: 'warning', customClass: { popup: 'fc-swal-popup', title: 'fc-swal-title', confirmButton: 'fc-swal-confirm' } });
            return;
        }

if (isCorrect) {
            fc_playSound('correct');
            Swal.fire({
                title: 'ผังงานถูกต้อง! ✅', text: 'คุณออกแบบอัลกอริทึมได้สมบูรณ์แบบ', icon: 'success',
                timer: 1500, showConfirmButton: false, customClass: { popup: 'fc-swal-popup', title: 'fc-swal-title' }
            }).then(() => {
                document.getElementById('fc-sim-result').innerHTML = '🐱 ...รอคำสั่งจากเซนเซอร์...';
                fc_showScreen('fc-screen-result');
            });
        } else {
            fc_playSound('wrong');
            Swal.fire({
                title: 'ตรรกะผิดพลาด! 🐛', text: 'ลองเช็กดูอีกครั้งว่า สีของบล็อกตรงกับตำแหน่งที่ควรอยู่ไหม?', icon: 'error',
                confirmButtonText: 'กลับไปแก้ไข', customClass: { popup: 'fc-swal-popup', title: 'fc-swal-title', confirmButton: 'fc-swal-confirm' }
            });
        }
    }

/* --- Simulation Result --- */
    function fc_runSim(state) {
        fc_playSound('click');
        const simResult = document.getElementById('fc-sim-result');
        if(state === 'dry') {
            simResult.innerHTML = 'เซนเซอร์แจ้งว่า: <span style="color:#E65100">"ดินแห้ง"</span> ➔ <br>🐱💦 <strong style="color:#780016">รดน้ำต้นไม้เรียบร้อย!</strong>';
            simResult.style.borderColor = "#F6B26B";
        } else {
            simResult.innerHTML = 'เซนเซอร์แจ้งว่า: <span style="color:#1B5E20">"ดินชุ่มชื้น"</span> ➔ <br>🐱💤 <strong style="color:#780016">ไปนอนหลับพักผ่อน zZZ</strong>';
            simResult.style.borderColor = "#9FC5E8";
        }
    }

function fc_restartGame() {
        fc_playSound('click');
        fc_showScreen('fc-screen-start');
    }
</script>