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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="comm-wrapper" id="comm-game-container">
    
    <div id="comm-start-screen" class="comm-screen active">
        <div class="comm-logo-icon">📡</div>
        <h1 class="comm-title">CommDecoder</h1>
        <p class="comm-subtitle">ภารกิจถอดรหัสองค์ประกอบการสื่อสาร</p>
        
        <div class="comm-intro-box">
            <p style="color: #1565C0; font-weight: 800; margin-bottom: 10px; font-size: 18px;">> หน้าที่ของคุณ: นักวิเคราะห์เครือข่าย</p>
            <p style="font-size: 15px; color: #475569; line-height: 1.6; margin: 0;">
                อ่านสถานการณ์ที่กำหนดให้ แล้ว <strong>"ลากป้ายข้อความ"</strong> ด้านบน <br>
                มาวางในช่อง <strong>"องค์ประกอบทั้ง 5"</strong> ให้ถูกต้องสมบูรณ์!
            </p>
        </div>
        
        <button class="comm-btn-main" onclick="comm_startGame()">เริ่มภารกิจ 🚀</button>
    </div>

<div class="comm-scenario-box">
            <strong style="color: #0D47A1; font-size: 18px;">สถานการณ์:</strong> <br>
            <span id="comm-scenario-text" style="font-size: 16px;">...</span>
        </div>
        
        <p style="font-weight: 600; color: #334155; margin-bottom: 10px; font-size: 14px;">👉 ลากข้อความด้านล่างนี้ ไปวางในช่ององค์ประกอบให้ถูกต้อง</p>
        <div class="comm-inventory" id="comm-inventory-zone">
            </div>

<div class="comm-drop-container">
            <div class="comm-drop-col">
                <div class="comm-drop-label">1. ผู้ส่ง (Sender)</div>
                <div class="comm-slot" id="comm-slot-sender" data-type="sender">วางที่นี่</div>
            </div>
            <div class="comm-drop-col">
                <div class="comm-drop-label">2. ข้อมูล (Message)</div>
                <div class="comm-slot" id="comm-slot-data" data-type="data">วางที่นี่</div>
            </div>
            <div class="comm-drop-col">
                <div class="comm-drop-label">3. สื่อกลาง (Medium)</div>
                <div class="comm-slot" id="comm-slot-medium" data-type="medium">วางที่นี่</div>
            </div>
            <div class="comm-drop-col">
                <div class="comm-drop-label">4. ผู้รับ (Receiver)</div>
                <div class="comm-slot" id="comm-slot-receiver" data-type="receiver">วางที่นี่</div>
            </div>
            <div class="comm-drop-col">
                <div class="comm-drop-label">5. โปรโตคอล (Protocol)</div>
                <div class="comm-slot" id="comm-slot-protocol" data-type="protocol">วางที่นี่</div>
            </div>
        </div>

<button class="comm-btn-action" onclick="comm_checkAnswer()">✅ ตรวจสอบความถูกต้อง</button>
    </div>

<div id="comm-result-screen" class="comm-screen">
        <div style="font-size: 60px; margin-bottom: 10px;">🏆</div>
        <h1 class="comm-title" style="color: #10b981; font-size: 36px;">MISSION COMPLETE!</h1>
        <h2 style="color: #475569; margin-bottom: 20px; font-size: 18px;">คุณถอดรหัสการสื่อสารได้ครบถ้วน</h2>
        
        <div class="comm-intro-box" style="text-align: center; border-left-color: #10b981;">
            <p style="font-size: 18px; color:#64748b;">สุดยอดนักวิเคราะห์: <strong id="comm-result-name" style="color:#1E88E5; font-size: 22px;">-</strong></p>
            <div class="comm-rank-badge">🌟 Master of Communication</div>
        </div>

<button class="comm-btn-main" onclick="comm_resetGame()">เล่นใหม่อีกครั้ง 🔄</button>
    </div>

</div>

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

.comm-screen { 
        display: none; 
        padding: 30px; 
        text-align: center; 
        animation: commFadeIn 0.4s ease-out forwards; 
    }
    .comm-screen.active { display: block; }

@keyframes commFadeIn {
        from { opacity: 0; transform: translateY(15px); }
        to { opacity: 1; transform: translateY(0); }
    }

.comm-logo-icon { font-size: 60px; margin-bottom: 10px; animation: commBounce 2s infinite; }
    @keyframes commBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.comm-title { font-size: 32px; color: #0D47A1; margin: 0 0 5px 0; font-weight: 800; }
    .comm-subtitle { font-size: 18px; color: #1E88E5; font-weight: 700; margin-top: 0; margin-bottom: 25px; }

.comm-intro-box {
        background: #ffffff; padding: 25px; border-radius: 15px; text-align: left;
        border-left: 6px solid #1E88E5; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        max-width: 600px; margin: 0 auto 25px auto;
    }

/* Buttons */
    .comm-btn-main {
        display: inline-block; padding: 15px 40px; font-size: 20px; font-weight: 800;
        color: #fff; background: linear-gradient(135deg, #1E88E5, #1565C0); border: none; border-radius: 50px;
        cursor: pointer; box-shadow: 0 6px 0 #0D47A1, 0 10px 15px rgba(30, 136, 229, 0.3);
        transition: all 0.1s; font-family: 'Prompt', sans-serif;
    }
    .comm-btn-main:active { transform: translateY(6px); box-shadow: none; }

.comm-btn-action {
        display: inline-block; padding: 12px 30px; font-size: 18px; font-weight: 800;
        color: #fff; background: #4CAF50; border: none; border-radius: 50px;
        cursor: pointer; box-shadow: 0 5px 0 #2E7D32; transition: all 0.1s; font-family: 'Prompt', sans-serif;
        margin-top: 25px;
    }
    .comm-btn-action:active { transform: translateY(5px); box-shadow: none; }

/* HUD & Layout */
    .comm-hud {
        display: flex; justify-content: space-between; background: #ffffff;
        padding: 15px 20px; border-radius: 12px; margin-bottom: 20px;
        font-weight: bold; border: 2px solid #E3F2FD; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

.comm-scenario-box {
        background: #E3F2FD; border-left: 6px solid #1565C0; padding: 15px 20px;
        border-radius: 10px; margin-bottom: 20px; text-align: left;
    }

/* Drag & Drop Areas */
    .comm-inventory {
        display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
        background: #ffffff; padding: 15px; border-radius: 12px; border: 2px dashed #90CAF9;
        margin-bottom: 25px; min-height: 80px;
    }

.comm-draggable-item {
        background: #FFF3E0; border: 2px solid #FF9800; padding: 10px 15px;
        border-radius: 8px; font-weight: 600; font-size: 14px; color: #E65100;
        cursor: grab; box-shadow: 0 3px 0 #F57C00; transition: transform 0.1s;
    }
    .comm-draggable-item:active { cursor: grabbing; transform: translateY(2px); box-shadow: 0 1px 0 #F57C00; }
    .comm-draggable-item.dragging { opacity: 0.5; }

.comm-drop-container {
        display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
    }
    .comm-drop-col {
        flex: 1; min-width: 130px; display: flex; flex-direction: column;
    }
    .comm-drop-label {
        background: #1565C0; color: white; padding: 8px; border-radius: 8px 8px 0 0;
        font-size: 12px; font-weight: bold;
    }
    .comm-slot {
        background: #F1F5F9; border: 2px dashed #CBD5E1; border-top: none;
        border-radius: 0 0 8px 8px; height: 80px; display: flex;
        justify-content: center; align-items: center; padding: 5px;
        font-size: 12px; color: #94A3B8; transition: background 0.3s;
    }
    .comm-slot.drag-over { background: #E8F5E9; border-color: #4CAF50; }
    
    /* Result Badge */
    .comm-rank-badge {
        font-size: 18px; font-weight: 800; color: #D97706; margin-top: 15px; 
        background: #FEF3C7; display: inline-block; padding: 10px 25px; border-radius: 15px;
        border: 2px solid #F59E0B;
    }

/* SweetAlert Override */
    .swal-comm { font-family: 'Prompt', sans-serif !important; border-radius: 20px !important; }
    .swal-comm .swal2-confirm { background: #1E88E5 !important; border-radius: 12px !important; box-shadow: 0 4px 0 #1565C0 !important; font-weight: bold !important; }

@media (max-width: 650px) {
        .comm-drop-container { flex-direction: column; }
        .comm-drop-col { width: 100%; }
        .comm-slot { height: 60px; }
    }
</style>

let comm_playerName = "";
    let comm_currentLevel = 0;
    let comm_audioCtx = null;

// ระบบเสียง (Web Audio API)
    function comm_initAudio() { 
        if (!comm_audioCtx) comm_audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
    }

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

if (type === 'click') {
                osc.type = 'sine'; osc.frequency.setValueAtTime(600, now); osc.frequency.exponentialRampToValueAtTime(1200, 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 = 'triangle'; osc.frequency.setValueAtTime(300, now); osc.frequency.exponentialRampToValueAtTime(150, 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 === 'error') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(200, now); osc.frequency.linearRampToValueAtTime(100, now + 0.3);
                gain.gain.setValueAtTime(0.15, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
                osc.start(now); osc.stop(now + 0.3);
            } else if (type === 'success') {
                osc.type = 'sine'; [523.25, 659.25, 783.99, 1046.50].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1)));
                gain.gain.setValueAtTime(0.15, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.5);
                osc.start(now); osc.stop(now + 0.5);
            }
        } catch (e) { console.error(e); }
    }

function comm_showScreen(id) {
        document.querySelectorAll('.comm-screen').forEach(s => s.classList.remove('active'));
        document.getElementById(id).classList.add('active');
    }

// เริ่มเกม & รับชื่อ
    function comm_startGame() {
        comm_initAudio(); comm_playSound('click');
        Swal.fire({
            title: 'ยินดีต้อนรับนักวิเคราะห์',
            input: 'text',
            inputPlaceholder: 'กรุณากรอกชื่อของคุณ...',
            confirmButtonText: 'รับภารกิจ!',
            customClass: { popup: 'swal-comm' },
            inputValidator: (value) => { if (!value.trim()) return 'ใส่ชื่อก่อนเริ่มภารกิจนะ!' }
        }).then((result) => {
            if (result.isConfirmed) {
                comm_playerName = result.value.trim();
                comm_currentLevel = 0;
                document.getElementById('comm-hud-name').innerText = comm_playerName;
                document.getElementById('comm-result-name').innerText = comm_playerName;
                comm_loadLevel();
                comm_showScreen('comm-game-screen');
            }
        });
    }

// โหลดด่าน
    function comm_loadLevel() {
        const levelData = comm_levels[comm_currentLevel];
        document.getElementById('comm-level-indicator').innerText = comm_currentLevel + 1;
        document.getElementById('comm-scenario-text').innerText = levelData.scenario;

const inventory = document.getElementById('comm-inventory-zone');
        inventory.innerHTML = '';
        
        // เคลียร์ Drop zones
        const slots = document.querySelectorAll('.comm-slot');
        slots.forEach(slot => {
            slot.innerHTML = 'วางที่นี่';
            slot.classList.remove('filled');
        });

// สร้าง Item แบบสุ่มลำดับ
        let shuffledItems = [...levelData.items].sort(() => Math.random() - 0.5);
        shuffledItems.forEach(item => {
            const div = document.createElement('div');
            div.className = 'comm-draggable-item';
            div.draggable = true;
            div.innerText = item.text;
            div.dataset.id = item.id;
            div.id = 'comm-item-' + Math.random().toString(36).substr(2, 9);
            
            // Events สำหรับ Drag
            div.addEventListener('dragstart', comm_dragStart);
            div.addEventListener('dragend', comm_dragEnd);
            inventory.appendChild(div);
        });

comm_setupDropZones();
    }

/* --- ระบบ Drag & Drop --- */
    let comm_draggedItem = null;

function comm_dragStart(e) {
        comm_draggedItem = this;
        setTimeout(() => this.classList.add('dragging'), 0);
        comm_playSound('click');
    }

function comm_dragEnd(e) {
        this.classList.remove('dragging');
        comm_draggedItem = null;
    }

// ตรวจสอบคำตอบ
    function comm_checkAnswer() {
        let isAllCorrect = true;
        let isFull = true;

if (!isFull) {
            comm_playSound('error');
            Swal.fire({ title: 'เดี๋ยวก่อน!', text: 'กรุณาวางองค์ประกอบให้ครบทั้ง 5 ช่องนะครับ', icon: 'warning', customClass: { popup: 'swal-comm' }});
            return;
        }

if (isAllCorrect) {
            comm_playSound('success');
            Swal.fire({
                title: 'ถอดรหัสสำเร็จ! 🎉',
                text: 'คุณจัดวางองค์ประกอบได้ถูกต้องทั้งหมด',
                icon: 'success',
                confirmButtonText: 'ไปสถานการณ์ถัดไป',
                customClass: { popup: 'swal-comm' }
            }).then(() => {
                comm_currentLevel++;
                if (comm_currentLevel < comm_levels.length) {
                    comm_loadLevel();
                } else {
                    comm_playSound('success');
                    comm_showScreen('comm-result-screen');
                }
            });
        } else {
            comm_playSound('error');
            Swal.fire({
                title: 'วิเคราะห์พลาดไปนิด ❌',
                text: 'มีบางองค์ประกอบอยู่ผิดตำแหน่ง ลองอ่านสถานการณ์วิเคราะห์ใหม่อีกครั้งนะ!',
                icon: 'error',
                confirmButtonText: 'ลองใหม่',
                customClass: { popup: 'swal-comm' }
            });
        }
    }

function comm_resetGame() {
        comm_playSound('click');
        comm_showScreen('comm-start-screen');
    }
</script>