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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* ฝั่งซ้าย: แผนที่ดาวอังคาร */
    .loop-left-panel { flex: 1; min-width: 300px; background: #0f3460; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; align-items: center; }
    .loop-left-panel h3 { margin: 0 0 10px 0; color: #f39c12; font-size: 18px; }
    .loop-grid-map { display: grid; grid-template-columns: repeat(5, 50px); grid-template-rows: repeat(5, 50px); gap: 2px; background-color: #333; border: 5px solid #555; border-radius: 8px; margin-top: 10px; }
    .loop-cell { background-color: #e67e22; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 24px; position: relative; }
    .loop-rover { position: absolute; font-size: 30px; transition: all 0.4s ease-in-out; z-index: 10; }
    .loop-feedback { font-weight: bold; font-size: 16px; margin-top: 20px; min-height: 50px; color: #fff; text-align: center; }

/* ฝั่งขวา: โค้ดดิ้ง */
    .loop-right-panel { flex: 1.5; min-width: 300px; display: flex; flex-direction: column; gap: 15px; }
    .loop-right-panel h3 { margin: 0 0 10px 0; color: #61afef; font-size: 18px; }
    
    .loop-code-editor { background: #282c34; color: #abb2bf; padding: 20px; border-radius: 8px; font-family: monospace; font-size: 18px; line-height: 2; border-left: 5px solid #c678dd; text-align: left; }
    .loop-keyword { color: #c678dd; font-weight: bold; }
    .loop-slot { display: inline-block; background: #3e4451; border: 2px dashed #61afef; color: white; padding: 2px 10px; border-radius: 5px; min-width: 100px; text-align: center; cursor: pointer; }
    .loop-slot.filled { border-style: solid; background: #61afef; color: #282c34; font-weight: bold; }
    
    .loop-options-container { display: flex; flex-wrap: wrap; gap: 10px; background: #0f3460; padding: 15px; border-radius: 8px; }
    .loop-option-btn { background-color: #1a1a2e; color: white; border: 2px solid #e94560; padding: 8px 15px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.2s; }
    .loop-option-btn:hover { background-color: #e94560; }

.loop-controls { display: flex; gap: 10px; margin-top: auto; }
    .loop-btn { flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; color: white; font-family: 'Prompt', sans-serif;}
    .loop-btn-run { background-color: #59c059; }
    .loop-btn-reset { background-color: #e94560; }
    .loop-btn-next { background-color: #f39c12; display: none; }
</style>

<div class="wsst-loop-wrapper">
    <div class="loop-container">
        <div class="loop-header">
            <h1>🚀 Space Rover (การทำซ้ำ - Loop)</h1>
            <p>ภารกิจโซนปราบเซียน: ใช้คำสั่ง "ทำซ้ำ (Loop)" เพื่อเก็บแร่ให้ครบด้วยโค้ดที่สั้นที่สุด!</p>
        </div>

<div class="loop-body">
            <div class="loop-left-panel">
                <h3>ภารกิจ: <span id="loop-level-desc" style="color: #f39c12;">เก็บแร่ให้ครบ</span></h3>
                <div class="loop-grid-map" id="loop-grid-map">
                    </div>
                <div class="loop-feedback" id="loop-feedback-text">พร้อมรับคำสั่งครับกัปตัน!</div>
            </div>

<div class="loop-right-panel">
                <div class="loop-code-editor">
                    <span class="loop-keyword">ทำซ้ำ</span> <span class="loop-slot" id="loop-slot-count" onclick="focusLoopSlot('count')">[รอบ]</span> <span class="loop-keyword">รอบ</span> { <br>
                        คำสั่งที่ 1: <span class="loop-slot" id="loop-slot-cmd1" onclick="focusLoopSlot('cmd1')">[เลือกคำสั่ง]</span> <br>
                        คำสั่งที่ 2: <span class="loop-slot" id="loop-slot-cmd2" onclick="focusLoopSlot('cmd2')">[เลือกคำสั่ง]</span> <br>
                    }
                </div>

<div id="loop-options-panel">
                    <h3>👇 เลือกคำสั่งเพื่อเติมลงในช่อง</h3>
                    <div class="loop-options-container" id="loop-options-box">
                        </div>
                </div>

<div class="loop-controls">
                    <button class="loop-btn loop-btn-reset" onclick="initLoopLevel()">🔄 เริ่มใหม่</button>
                    <button class="loop-btn loop-btn-run" id="loop-btn-run" onclick="runLoopProgram()">🚀 รันโปรแกรม</button>
                    <button class="loop-btn loop-btn-next" id="loop-btn-next" onclick="nextLoopLevel()">⏭️ ด่านต่อไป</button>
                </div>
            </div>
        </div>
    </div>
</div>

// 2. ตัวเลือกคำสั่ง
    const optCounts = [
        { id: '2', text: '2' }, { id: '3', text: '3' }, { id: '4', text: '4' }
    ];
    const optCmds = [
        { id: 'forward', text: 'เดินหน้า ⬆️' },
        { id: 'right', text: 'เลี้ยวขวา ⤵️' },
        { id: 'left', text: 'เลี้ยวซ้าย ⤴️' },
        { id: 'none', text: '(เว้นว่าง)' }
    ];

let currentLoopLevel = 0;
    let rover = { x: 0, y: 0, dir: 90 };
    let rocksCollected = 0;
    let activeRocks = [];
    
    let loopSlots = { count: null, cmd1: null, cmd2: null };
    let currentLoopFocus = 'count';

// สร้างแผนที่
    function initLoopLevel() {
        const lvl = loopLevels[currentLoopLevel];
        document.getElementById('loop-level-desc').innerText = lvl.desc;
        
        rover.x = lvl.start.x;
        rover.y = lvl.start.y;
        rover.dir = lvl.start.dir;
        rocksCollected = 0;
        activeRocks = JSON.parse(JSON.stringify(lvl.rocks));

renderLoopGrid();
        resetLoopSlots();
        focusLoopSlot('count');
        
        document.getElementById('loop-btn-run').disabled = false;
        document.getElementById('loop-btn-next').style.display = 'none';
        updateLoopFeedback("พร้อมรับคำสั่งครับกัปตัน!");
    }

function updateLoopRoverPosition() {
        // ลบยานออกจากจุดเดิม
        const oldRover = document.getElementById('loop-rover-element');
        if (oldRover) oldRover.remove();

// วางยานในจุดใหม่
        const targetCell = document.getElementById(`loop-cell-${rover.x}-${rover.y}`);
        if (targetCell) {
            const rEl = document.createElement('div');
            rEl.id = 'loop-rover-element';
            rEl.className = 'loop-rover';
            rEl.innerHTML = '🚀';
            rEl.style.transform = `rotate(${rover.dir}deg)`;
            targetCell.appendChild(rEl);
        }
    }

// ระบบเลือกโค้ด
    function resetLoopSlots() {
        loopSlots = { count: null, cmd1: null, cmd2: null };
        document.getElementById('loop-slot-count').innerText = "[รอบ]";
        document.getElementById('loop-slot-cmd1').innerText = "[เลือกคำสั่ง]";
        document.getElementById('loop-slot-cmd2').innerText = "[เลือกคำสั่ง]";
        document.querySelectorAll('.loop-slot').forEach(el => el.classList.remove('filled'));
    }

function focusLoopSlot(slotName) {
        currentLoopFocus = slotName;
        document.querySelectorAll('.loop-slot').forEach(el => el.style.borderColor = '#61afef');
        document.getElementById(`loop-slot-${slotName}`).style.borderColor = '#e94560';
        renderLoopOptions();
    }

function renderLoopOptions() {
        const box = document.getElementById('loop-options-box');
        box.innerHTML = '';
        const opts = (currentLoopFocus === 'count') ? optCounts : optCmds;

opts.forEach(opt => {
            const btn = document.createElement('button');
            btn.className = 'loop-option-btn';
            btn.innerText = opt.text;
            btn.onclick = () => selectLoopOption(opt);
            box.appendChild(btn);
        });
    }

function selectLoopOption(opt) {
        loopSlots[currentLoopFocus] = opt;
        const slotEl = document.getElementById(`loop-slot-${currentLoopFocus}`);
        slotEl.innerText = opt.text;
        slotEl.classList.add('filled');
        
        // Auto Next Focus
        if(currentLoopFocus === 'count') focusLoopSlot('cmd1');
        else if(currentLoopFocus === 'cmd1') focusLoopSlot('cmd2');
        else renderLoopOptions();
    }

// ฟังก์ชันหน่วงเวลา (สำหรับแอนิเมชัน)
    const delayLoop = ms => new Promise(res => setTimeout(res, ms));

// รันโปรแกรม (แอนิเมชันทีละสเต็ป)
    async function runLoopProgram() {
        if (!loopSlots.count || !loopSlots.cmd1) {
            updateLoopFeedback("⚠️ กรุณาใส่คำสั่งให้ครบถ้วนก่อนรัน!");
            return;
        }

document.getElementById('loop-btn-run').disabled = true;
        let loopCount = parseInt(loopSlots.count.id);
        let commands = [loopSlots.cmd1.id];
        if (loopSlots.cmd2 && loopSlots.cmd2.id !== 'none') commands.push(loopSlots.cmd2.id);

updateLoopFeedback("กำลังเดินเครื่องยานสำรวจ... 🚀");

let crashed = false;

for (let i = 0; i < loopCount; i++) {
            for (let cmd of commands) {
                if (crashed) break;

// ประมวลผลคำสั่ง
                if (cmd === 'forward') {
                    if (rover.dir === 0) rover.y--;        // ขึ้น
                    else if (rover.dir === 90) rover.x++;  // ขวา
                    else if (rover.dir === 180) rover.y++; // ลง
                    else if (rover.dir === 270) rover.x--; // ซ้าย
                } else if (cmd === 'right') {
                    rover.dir = (rover.dir + 90) % 360;
                } else if (cmd === 'left') {
                    rover.dir = (rover.dir - 90 + 360) % 360;
                }

// เช็คขอบแผนที่
                if (rover.x < 0 || rover.x > 4 || rover.y < 0 || rover.y > 4) {
                    crashed = true;
                    updateLoopFeedback("💥 ชนขอบแผนที่! ยานพังเสียหาย กรุณาเริ่มใหม่ (Bug)");
                    break;
                }

// ขยับยานบนจอ
                updateLoopRoverPosition();

// เช็คการเก็บแร่
                const rockIdx = activeRocks.findIndex(r => r.x === rover.x && r.y === rover.y);
                if (rockIdx > -1) {
                    activeRocks.splice(rockIdx, 1);
                    rocksCollected++;
                    document.getElementById(`loop-cell-${rover.x}-${rover.y}`).innerHTML = '';
                    updateLoopRoverPosition(); // วางยานทับใหม่
                }

await delayLoop(600); // หน่วงเวลาให้เด็กเห็นการทำงาน
            }
        }

if (!crashed) {
            if (rocksCollected === loopLevels[currentLoopLevel].expectedRocks) {
                updateLoopFeedback("🎉 ยอดเยี่ยม! เก็บแร่ครบถ้วน โค้ดทำงานสมบูรณ์แบบ!");
                if (currentLoopLevel < loopLevels.length - 1) {
                    document.getElementById('loop-btn-next').style.display = 'block';
                }
            } else {
                updateLoopFeedback("❌ ทำงานจบแล้ว แต่เก็บแร่ไม่ครบ! ลองเปลี่ยนคำสั่งใหม่ดูนะ (Debugging)");
                document.getElementById('loop-btn-run').disabled = false;
            }
        }
    }

function updateLoopFeedback(txt) {
        document.getElementById('loop-feedback-text').innerText = txt;
    }

function nextLoopLevel() {
        currentLoopLevel++;
        initLoopLevel();
    }

// โหลดเกม
    setTimeout(initLoopLevel, 300);
</script>