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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;600;800&family=Fira+Code:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="pc-wrapper" id="pc-game-container">
    
    
    <div id="pc-screen-start" class="pc-screen pc-active">
        <div style="font-size: 70px; margin-bottom: 10px; animation: pcFloat 2s ease-in-out infinite;">🧩💻</div>
        <h1 class="pc-title">Pseudo Code Builder</h1>
        <p class="pc-subtitle">ภารกิจประกอบร่างรหัสลำลอง</p>
        
        <div class="pc-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>ลาก (Drag)</strong> บล็อกคำสั่งจากคลัง ไปวางในช่องว่างทางขวา</li>
                <li>เรียงลำดับตรรกะให้ถูกต้องตั้งแต่ <strong>Start</strong> ถึง <strong>End</strong></li>
                <li>ระวัง! ในด่านหลังๆ จะมี <strong>"บล็อกหลอก"</strong> ปะปนมาด้วย</li>
                <li>มีภารกิจ 10 ด่าน และหัวใจ 3 ดวง ❤️❤️❤️</li>
            </ul>
        </div>
        
        <button class="pc-btn pc-btn-primary" onclick="pc_promptName()">เริ่มเขียนโค้ด 🚀</button>
    </div>

<div id="pc-screen-game" class="pc-screen" style="padding: 20px;">
        <div class="pc-hud">
            <div class="pc-hud-item">
                <span class="pc-hud-label">ผู้เล่น</span><br>
                <strong id="pc-ui-name" style="color: #E63946; font-size: 16px;">-</strong>
            </div>
            <div class="pc-hud-item" style="text-align: center;">
                <span class="pc-hud-label">ภารกิจที่</span><br>
                <strong style="color: #780016; font-size: 20px;"><span id="pc-ui-level">1</span>/10</strong>
            </div>
            <div class="pc-hud-item" style="text-align: right;">
                <span class="pc-hud-label">พลังชีวิต</span><br>
                <span id="pc-ui-lives" style="font-size: 16px;">❤️❤️❤️</span>
            </div>
        </div>

<div class="pc-game-area">
            
            <div class="pc-narrative-panel">
                <div class="pc-panel-header">📝 ภาษาบรรยาย (โจทย์)</div>
                <div class="pc-narrative-content" id="pc-narrative-text">
                    
                </div>
            </div>

<div class="pc-editor-panel">
                <div class="pc-panel-header" style="background: #4A000D; color: #FFCDD2;">💻 รหัสลำลอง (Pseudo Code)</div>
                <div class="pc-editor-content">
                    <div class="pc-block-static">Start</div>
                    <div id="pc-slots-container">
                        
                    </div>
                    <div class="pc-block-static">End</div>
                </div>
            </div>
        </div>

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

<div style="text-align: center; margin-top: 15px;">
            <button class="pc-btn pc-btn-success" onclick="pc_checkAnswer()">ตรวจสอบโค้ด (Run) ▶️</button>
        </div>
    </div>

<div id="pc-screen-result" class="pc-screen">
        <div id="pc-res-icon" style="font-size: 80px; margin-bottom: 10px; animation: pcPop 1s infinite alternate;">🏆✨</div>
        <h1 class="pc-title" id="pc-result-title" style="color: #E63946;">คอมไพล์สำเร็จ!</h1>
        <p class="pc-subtitle" id="pc-result-desc" style="color: #780016;">สุดยอดนักออกแบบตรรกะ</p>
        
        <div class="pc-rules-box" style="text-align: center; border-color: #E63946; background: #780016;">
            <p style="margin: 0; font-size: 18px; color: #FFF;">โปรแกรมเมอร์: <strong id="pc-result-name" style="color: #FFCDD2; font-size: 22px;">-</strong></p>
            <p style="margin: 10px 0 0 0; font-size: 15px; color: #FFEBEE;" id="pc-result-msg">คุณสามารถเรียงลำดับความคิดได้อย่างเป็นระบบ เยี่ยมมาก!</p>
        </div>
        
        <button class="pc-btn pc-btn-primary" onclick="pc_restartGame()">เล่นอีกครั้ง 🔄</button>
    </div>

</div>

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

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

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

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

.pc-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);
    }

/* 3D Buttons */
    .pc-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;
    }
    .pc-btn-primary { background: #780016; color: #FFFFFF; box-shadow: 0 6px 0 #4A000D; }
    .pc-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #4A000D; }
    
    .pc-btn-success { background: #E63946; color: #FFFFFF; box-shadow: 0 6px 0 #B31222; width: 100%; max-width: 300px; }
    .pc-btn-success:active { transform: translateY(6px); box-shadow: 0 0px 0 #B31222; }

/* HUD */
    .pc-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);
    }
    .pc-hud-item { flex: 1; text-align: left; line-height: 1.2; }
    .pc-hud-label { font-size: 12px; color: #78909C; font-weight: bold; }

/* Game Layout */
    .pc-game-area { display: flex; gap: 15px; margin-bottom: 15px; flex-direction: column; }
    @media (min-width: 700px) { .pc-game-area { flex-direction: row; } }

.pc-narrative-panel, .pc-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;
    }

.pc-panel-header { background: #780016; color: #FFF; padding: 10px 15px; font-weight: bold; font-size: 15px; text-align: center; }
    
    .pc-narrative-content { padding: 15px; font-size: 15px; line-height: 1.8; color: #333; }
    
    .pc-editor-content { padding: 15px; display: flex; flex-direction: column; gap: 8px; background: #F5F7FA; flex: 1; }

/* Slots and Blocks */
    .pc-block-static {
        background: #2B2D42; color: #FFF; padding: 10px 15px; border-radius: 8px;
        font-family: 'Fira Code', 'Prompt', monospace; font-weight: bold; text-align: center;
        box-shadow: 0 3px 0 #141521; font-size: 15px;
    }

#pc-slots-container { display: flex; flex-direction: column; gap: 8px; }

.pc-slot {
        background: #FFEBEE; border: 2px dashed #EF9A9A; border-radius: 8px;
        min-height: 48px; display: flex; align-items: center; justify-content: center;
        transition: all 0.2s; position: relative;
    }
    .pc-slot-text { color: #E57373; font-size: 13px; pointer-events: none; }
    .pc-slot.pc-drag-over { background: #FFCDD2; border-color: #E63946; transform: scale(1.02); }

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

.pc-draggable {
        background: #780016; color: #FFF; padding: 10px 18px; border-radius: 8px;
        font-family: 'Fira Code', 'Prompt', monospace; font-size: 14px; font-weight: 500;
        cursor: grab; box-shadow: 0 4px 0 #4A000D; transition: transform 0.1s;
        display: flex; align-items: center; justify-content: center; z-index: 5;
        border: 1px solid #E63946;
    }
    .pc-draggable:active { cursor: grabbing; }
    .pc-draggable.pc-dragging { opacity: 0.8; transform: scale(1.05); box-shadow: 0 8px 15px rgba(120,0,22,0.4); z-index: 10; }

/* Slots override for draggables inside them */
    .pc-slot .pc-draggable { width: 100%; box-shadow: 0 3px 0 #4A000D; margin: 0; }

/* Touch Ghost */
    .pc-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 */
    .pc-swal-popup { background: #FFFFFF !important; border: 3px solid #780016 !important; border-radius: 15px !important; font-family: 'Prompt', sans-serif !important; }
    .pc-swal-title { color: #780016 !important; font-size: 22px !important; font-weight: 800 !important; }
    .pc-swal-html { color: #333 !important; font-size: 15px !important; }
    .pc-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 pc_playerName = "";
    let pc_currentLevel = 0;
    let pc_lives = 3;
    let pc_audioCtx = null;
    let pc_draggedItem = null;
    let pc_touchGhost = null;

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

function pc_playSound(type) {
        if (!pc_audioCtx) return;
        try {
            const osc = pc_audioCtx.createOscillator();
            const gain = pc_audioCtx.createGain();
            osc.connect(gain); gain.connect(pc_audioCtx.destination);
            const now = pc_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);
            } else if (type === 'win') {
                osc.type = 'sine'; [523.25, 659.25, 783.99, 1046.50].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.15)));
                gain.gain.setValueAtTime(0.2, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.8);
                osc.start(now); osc.stop(now + 0.8);
            } else if (type === 'lose') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(300, now); osc.frequency.exponentialRampToValueAtTime(50, now + 1);
                gain.gain.setValueAtTime(0.2, now); gain.gain.linearRampToValueAtTime(0.01, now + 1);
                osc.start(now); osc.stop(now + 1);
            }
        } catch (e) { console.error(e); }
    }

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

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

/* --- Game Logic --- */
    function pc_startGame() {
        pc_playSound('click');
        pc_currentLevel = 0;
        pc_lives = 3;
        
        document.getElementById('pc-ui-name').innerText = pc_playerName;
        document.getElementById('pc-result-name').innerText = pc_playerName;
        
        pc_loadLevel();
        pc_showScreen('pc-screen-game');
    }

function pc_updateHUD() {
        document.getElementById('pc-ui-level').innerText = pc_currentLevel + 1;
        let hearts = "";
        for(let i=0; i<3; i++) hearts += (i < pc_lives) ? "❤️" : "🖤";
        document.getElementById('pc-ui-lives').innerText = hearts;
    }

function pc_loadLevel() {
        pc_updateHUD();
        const levelData = pc_missionsData[pc_currentLevel];
        
        // 1. Set Narrative
        document.getElementById('pc-narrative-text').innerHTML = levelData.narrative;

// 2. Setup Slots based on expected length
        const slotsContainer = document.getElementById('pc-slots-container');
        slotsContainer.innerHTML = '';
        for (let i = 0; i < levelData.expected.length; i++) {
            const slot = document.createElement('div');
            slot.className = 'pc-slot';
            slot.dataset.index = i;
            slot.innerHTML = `<span class="pc-slot-text">วางบล็อกที่ ${i+1}</span>`;
            
            // Events for Drop Zone
            slot.addEventListener('dragover', pc_handleDragOver);
            slot.addEventListener('dragleave', pc_handleDragLeave);
            slot.addEventListener('drop', pc_handleDrop);
            
            slotsContainer.appendChild(slot);
        }

// 3. Setup Bank with shuffled blocks (expected + distractors)
        const bank = document.getElementById('pc-inventory');
        bank.innerHTML = '';
        let allBlocks = [...levelData.expected, ...levelData.distractors];
        allBlocks = pc_shuffle(allBlocks);

allBlocks.forEach((text, index) => {
            const div = document.createElement('div');
            div.className = 'pc-draggable';
            div.draggable = true;
            div.innerText = text;
            div.dataset.value = text;
            
            // Mouse Events
            div.addEventListener('dragstart', pc_handleDragStart);
            div.addEventListener('dragend', pc_handleDragEnd);
            // Touch Events
            div.addEventListener('touchstart', pc_handleTouchStart, {passive: false});
            div.addEventListener('touchmove', pc_handleTouchMove, {passive: false});
            div.addEventListener('touchend', pc_handleTouchEnd);
            
            bank.appendChild(div);
        });

// Add drop event to bank (to return items)
        bank.addEventListener('dragover', pc_handleDragOver);
        bank.addEventListener('dragleave', pc_handleDragLeave);
        bank.addEventListener('drop', pc_handleDrop);
    }

/* --- Drag & Drop Core --- */
    function pc_handleDragStart(e) {
        pc_draggedItem = this;
        setTimeout(() => this.classList.add('pc-dragging'), 0);
        pc_playSound('drag');
    }
    function pc_handleDragEnd(e) { this.classList.remove('pc-dragging'); pc_draggedItem = null; }
    function pc_handleDragOver(e) { e.preventDefault(); this.classList.add('pc-drag-over'); }
    function pc_handleDragLeave(e) { this.classList.remove('pc-drag-over'); }
    function pc_handleDrop(e) {
        e.preventDefault();
        this.classList.remove('pc-drag-over');
        if (pc_draggedItem) pc_processDrop(this, pc_draggedItem);
    }

/* --- Touch Core --- */
    function pc_handleTouchStart(e) {
        pc_playSound('drag');
        pc_draggedItem = e.target;
        pc_draggedItem.classList.add('pc-dragging');

pc_touchGhost = pc_draggedItem.cloneNode(true);
        pc_touchGhost.classList.add('pc-touch-ghost');
        pc_touchGhost.style.width = pc_draggedItem.offsetWidth + 'px';
        document.body.appendChild(pc_touchGhost);
        pc_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function pc_handleTouchMove(e) {
        if (!pc_touchGhost) return;
        e.preventDefault();
        pc_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function pc_handleTouchEnd(e) {
        if (!pc_touchGhost) return;
        pc_draggedItem.classList.remove('pc-dragging');
        pc_touchGhost.style.display = 'none';
        
        const changedTouch = e.changedTouches[0];
        const elemBelow = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
        pc_touchGhost.remove();
        pc_touchGhost = null;

const zone = elemBelow ? elemBelow.closest('.pc-slot, .pc-bank-container') : null;
        if (zone) pc_processDrop(zone, pc_draggedItem);
        else pc_playSound('drop');
        
        pc_draggedItem = null;
    }
    function pc_moveGhost(x, y) {
        pc_touchGhost.style.left = x + 'px';
        pc_touchGhost.style.top = y + 'px';
    }

// Restore placeholder texts for empty slots
        document.querySelectorAll('.pc-slot').forEach(s => {
            if (!s.querySelector('.pc-draggable')) {
                const span = s.querySelector('.pc-slot-text');
                if (span) span.style.display = 'block';
            }
        });
    }

/* --- Logic Verification --- */
    function pc_checkAnswer() {
        const levelData = pc_missionsData[pc_currentLevel];
        const slots = document.querySelectorAll('.pc-slot');
        let userSequence = [];
        let isFull = true;

slots.forEach(slot => {
            const item = slot.querySelector('.pc-draggable');
            if (item) {
                userSequence.push(item.dataset.value);
            } else {
                isFull = false;
            }
        });

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

// Check Sequence
        let isCorrect = true;
        for (let i = 0; i < levelData.expected.length; i++) {
            if (userSequence[i] !== levelData.expected[i]) {
                isCorrect = false;
                break;
            }
        }

if (isCorrect) {
            pc_playSound('correct');
            Swal.fire({
                title: 'คอมไพล์ผ่าน! ✅', text: 'ตรรกะถูกต้องยอดเยี่ยม!', icon: 'success',
                timer: 1500, showConfirmButton: false, customClass: { popup: 'pc-swal-popup', title: 'pc-swal-title' }
            }).then(() => {
                pc_currentLevel++;
                if (pc_currentLevel < pc_missionsData.length) {
                    pc_loadLevel();
                } else {
                    pc_endGame(true);
                }
            });
        } else {
            pc_playSound('wrong');
            pc_lives--;
            pc_updateHUD();
            Swal.fire({
                title: 'พบข้อผิดพลาด (Syntax Error) 🐛', text: 'ลำดับคำสั่งยังไม่ถูกต้อง ลองตรวจสอบการทำงานอีกครั้งนะ', icon: 'error',
                confirmButtonText: 'แก้ไขโค้ด', customClass: { popup: 'pc-swal-popup', title: 'pc-swal-title', confirmButton: 'pc-swal-confirm' }
            }).then(() => {
                if (pc_lives <= 0) pc_endGame(false);
            });
        }
    }

function pc_restartGame() {
        pc_playSound('click');
        pc_showScreen('pc-screen-start');
    }
</script>