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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="der-wrapper" id="der-game-container">
    
    <div id="der-screen-start" class="der-screen der-active">
        <div class="der-icon-large" style="animation: derPulse 2s infinite;">🔐</div>
        <h1 class="der-title">DATA ESCAPE ROOM</h1>
        <p class="der-subtitle">ภารกิจไขรหัสลับ 10 ประตูกล</p>
        
        <div class="der-rules-box">
            <h3 style="color: #69F0AE; margin-top: 0;">📜 คำสั่งจากผู้คุมกฎ</h3>
            <p style="margin: 0; font-size: 15px; color: #E8F5E9; line-height: 1.6; text-align: left;">
                คุณติดอยู่ในศูนย์ข้อมูล (Data Center)! ทางเดียวที่จะหนีออกไปได้คือต้องไขรหัสประตูกลทั้ง <strong>10 บาน</strong> ให้สำเร็จ โดยใช้ความรู้เรื่อง "การประมวลผลข้อมูล" หากตอบผิด ประตูจะล็อกทันที! พร้อมที่จะหนีแล้วหรือยัง?
            </p>
        </div>
        
        <button class="der-btn der-btn-primary" onclick="der_initGame()">เริ่มไขรหัสลับ 🚀</button>
    </div>

<div id="der-screen-game" class="der-screen">
        <div class="der-hud">
            <div>สถานะ: <span style="color: #FFC107;">กำลังแฮกระบบ... 💻</span></div>
            <div>ประตูที่: <span id="der-ui-level" style="color: #69F0AE; font-size: 18px;">1/10</span></div>
        </div>

<div class="der-quiz-panel">
            <div class="der-question-box">
                <span style="color: #69F0AE; font-size: 14px; font-weight: bold;">ภารกิจปลดล็อก:</span>
                <div id="der-question-text" class="der-question-text">คำถามจะแสดงที่นี่...</div>
            </div>
            
            <div class="der-choices-container" id="der-choices-container">
                </div>
        </div>
    </div>

<div id="der-screen-result" class="der-screen">
        <div class="der-icon-large" style="animation: derBounce 2s infinite;">🚪✨</div>
        <h1 class="der-title" style="color: #69F0AE;">ESCAPED SUCCESSFULLY!</h1>
        <p class="der-subtitle" style="color: #FFC107;">แหกคุกข้อมูลได้สำเร็จ</p>
        
        <div class="der-rules-box" style="text-align: center;">
            <h2 style="color: #FFF; margin: 10px 0;">คุณคือสุดยอดนักเจาะรหัส!</h2>
            <p style="margin: 0; font-size: 15px; color: #69F0AE;">"ประตูทั้ง 10 บานถูกเปิดออกแล้ว ความรู้เรื่อง Data Processing ของคุณยอดเยี่ยมมาก!"</p>
        </div>
        
        <button class="der-btn der-btn-primary" onclick="der_restartGame()">เล่นอีกครั้ง 🔄</button>
    </div>

</div>

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

.der-screen { display: none; padding: 35px 25px; animation: derFadeIn 0.5s ease-out forwards; }
    .der-screen.der-active { display: block; }

@keyframes derFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes derPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(105, 240, 174, 0.5)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(105, 240, 174, 0.8)); } }
    @keyframes derBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.der-icon-large { font-size: 70px; margin-bottom: 15px; }
    .der-title { font-family: 'Press Start 2P', 'Prompt', cursive; font-size: 26px; color: #69F0AE; margin: 0 0 10px 0; text-shadow: 2px 2px 0px #00251A; line-height: 1.4; }
    .der-subtitle { font-size: 18px; color: #FFC107; font-weight: 600; margin: 0 0 25px 0; }

.der-rules-box {
        background: rgba(0, 0, 0, 0.5); border: 2px solid #00897B;
        padding: 20px; border-radius: 12px; margin: 0 auto 25px auto; max-width: 550px;
        box-shadow: inset 0 0 15px rgba(0, 137, 123, 0.3);
    }

/* Buttons */
    .der-btn {
        display: inline-block; padding: 15px 40px; font-size: 18px; font-weight: 800;
        border: none; border-radius: 10px; cursor: pointer; transition: all 0.1s;
        font-family: 'Prompt', sans-serif; text-transform: uppercase;
    }
    .der-btn-primary {
        background: #00897B; color: #FFF;
        box-shadow: 0 6px 0 #004D40, 0 0 15px rgba(0, 137, 123, 0.4);
    }
    .der-btn-primary:hover { background: #26A69A; }
    .der-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #004D40; }

/* HUD */
    .der-hud {
        display: flex; justify-content: space-between; align-items: center;
        background: rgba(0, 0, 0, 0.6); padding: 12px 20px; border-radius: 10px;
        margin-bottom: 20px; border: 1px solid #00897B; font-size: 16px; font-weight: bold;
    }

/* Progress Doors Track */
    .der-progress-container {
        background: rgba(0, 0, 0, 0.3); padding: 15px 10px; border-radius: 10px;
        margin-bottom: 25px; overflow-x: auto; white-space: nowrap;
        border: 1px solid #004D40;
    }
    .der-doors-track {
        display: flex; justify-content: space-between; align-items: center; gap: 8px;
        min-width: max-content;
    }
    .der-door-icon {
        width: 35px; height: 45px; background: #333; border: 2px solid #555;
        border-radius: 5px 5px 0 0; display: flex; justify-content: center; align-items: center;
        font-size: 16px; transition: all 0.3s; position: relative;
    }
    .der-door-icon::after { content: ''; position: absolute; right: 5px; top: 50%; width: 4px; height: 4px; background: #FFC107; border-radius: 50%; }
    
    .der-door-icon.der-locked { opacity: 0.6; }
    .der-door-icon.der-current { border-color: #FFC107; background: #FF8F00; box-shadow: 0 0 10px rgba(255,193,7,0.5); transform: scale(1.1); }
    .der-door-icon.der-unlocked { border-color: #69F0AE; background: #004D40; color: #69F0AE; }
    .der-door-icon.der-unlocked::after { display: none; } /* ซ่อนลูกบิดเมื่อเปิดแล้ว */

/* Quiz Panel */
    .der-quiz-panel {
        background: rgba(255, 255, 255, 0.05); padding: 25px; border-radius: 15px;
        border: 2px solid #00897B;
    }
    .der-question-box {
        background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 10px;
        margin-bottom: 20px; border-left: 5px solid #FFC107; text-align: left;
    }
    .der-question-text {
        font-size: 18px; font-weight: bold; color: #FFF; margin-top: 10px; line-height: 1.5;
    }
    
    .der-choices-container { display: flex; flex-direction: column; gap: 12px; }
    
    .der-choice-btn {
        background: #004D40; border: 2px solid #00897B; padding: 15px 20px;
        border-radius: 10px; font-size: 16px; font-weight: 600; color: #E8F5E9;
        text-align: left; cursor: pointer; transition: all 0.2s; font-family: 'Prompt', sans-serif;
    }
    .der-choice-btn:hover { background: #00695C; transform: translateX(5px); border-color: #69F0AE; }
    .der-choice-btn:active { transform: translateX(2px) scale(0.98); }

/* SweetAlert Override */
    .der-swal-popup { background: #00332B !important; border: 2px solid #69F0AE !important; border-radius: 15px !important; color: #FFF !important; font-family: 'Prompt', sans-serif !important; box-shadow: 0 0 25px rgba(105, 240, 174, 0.2) !important; }
    .der-swal-popup .swal2-title { color: #FFC107 !important; font-size: 22px !important; margin-bottom: 10px !important;}
    .der-swal-popup .swal2-html-container { color: #E8F5E9 !important; font-size: 15px !important; }
    .der-swal-confirm { background: #00897B !important; color: #FFF !important; font-weight: bold !important; border-radius: 10px !important; box-shadow: 0 4px 0 #004D40 !important; }

@media (max-width: 600px) {
        .der-title { font-size: 20px; }
        .der-question-text { font-size: 16px; }
        .der-choice-btn { font-size: 14px; padding: 12px 15px; }
    }
</style>

let der_currentLevel = 0;
    let der_audioCtx = null;

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

function der_playSound(type) {
        if (!der_audioCtx) return;
        try {
            const osc = der_audioCtx.createOscillator();
            const gain = der_audioCtx.createGain();
            osc.connect(gain); gain.connect(der_audioCtx.destination);
            const now = der_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 === 'unlock') {
                osc.type = 'square'; osc.frequency.setValueAtTime(400, now); osc.frequency.setValueAtTime(600, now + 0.1); osc.frequency.setValueAtTime(800, now + 0.2);
                gain.gain.setValueAtTime(0.15, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.4);
                osc.start(now); osc.stop(now + 0.4);
            } else if (type === 'error') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, now); osc.frequency.linearRampToValueAtTime(100, now + 0.3);
                gain.gain.setValueAtTime(0.2, 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, 1318.51].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.15)));
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.8);
                osc.start(now); osc.stop(now + 0.8);
            }
        } catch (e) { console.error("Audio Error:", e); }
    }

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

/* --- Game Logic --- */
    function der_initGame() {
        der_initAudio(); der_playSound('click');
        der_currentLevel = 0;
        
        // สร้าง Track ประตู 10 บาน
        const track = document.getElementById('der-doors-track');
        track.innerHTML = '';
        for(let i=0; i<10; i++) {
            const door = document.createElement('div');
            door.id = `der-door-${i}`;
            door.className = 'der-door-icon der-locked';
            door.innerText = i + 1;
            track.appendChild(door);
        }
        
        der_loadQuestion();
        der_showScreen('der-screen-game');
    }

function der_loadQuestion() {
        if (der_currentLevel >= der_questions.length) {
            setTimeout(() => {
                der_playSound('win');
                der_showScreen('der-screen-result');
            }, 500);
            return;
        }

der_updateDoors();
        document.getElementById('der-ui-level').innerText = `${der_currentLevel + 1}/10`;

const qData = der_questions[der_currentLevel];
        document.getElementById('der-question-text').innerText = qData.q;
        
        const choicesBox = document.getElementById('der-choices-container');
        choicesBox.innerHTML = '';
        
        qData.choices.forEach((choice, index) => {
            const btn = document.createElement('button');
            btn.className = 'der-choice-btn';
            btn.innerText = choice;
            btn.onclick = () => der_checkAnswer(index);
            choicesBox.appendChild(btn);
        });
    }

function der_restartGame() {
        der_playSound('click');
        der_showScreen('der-screen-start');
    }
</script>