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

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&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="eb-wrapper" id="eb-game-container">
    
    
    <div id="eb-screen-start" class="eb-screen eb-active">
        <div class="eb-icon-large" style="animation: ebFloat 2s ease-in-out infinite;">📧🚀</div>
        <h1 class="eb-title">Smart Email Builder</h1>
        <p class="eb-subtitle">ภารกิจประกอบร่างจดหมายจิ๋ว</p>
        
        <div class="eb-rules-box">
            <h3 style="color: #00E5FF; margin-top: 0; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">📋 ภารกิจส่งสารไซเบอร์</h3>
            <ul style="margin: 0; font-size: 14px; color: #E0E0E0; line-height: 1.6; text-align: left; padding-left: 20px;">
                <li>ใช้เมาส์หรือนิ้ว <strong>"ลาก"</strong> ชิ้นส่วนข้อความสีแดงด้านบน</li>
                <li>นำไป <strong>"วาง"</strong> ในช่องอีเมล (ถึง, เรื่อง, ข้อความ) ให้ถูกต้อง</li>
                <li>มีเวลาด่านละ <strong>45 วินาที</strong> และหัวใจ <strong>3 ดวง</strong></li>
                <li>จัดวางให้ถูกตำแหน่งแล้วกด "ส่งอีเมล" เพื่อผ่านด่าน!</li>
            </ul>
        </div>
        
        <button class="eb-btn eb-btn-primary" onclick="eb_promptName()">START MISSION</button>
    </div>

<div id="eb-screen-game" class="eb-screen">
        <div class="eb-hud">
            <div class="eb-hud-item">
                <span class="eb-hud-label">เจ้าหน้าที่</span><br>
                <strong id="eb-ui-name" style="color: #00E5FF; font-size: 16px;">-</strong>
            </div>
            <div class="eb-hud-item" style="text-align: center;">
                <span class="eb-hud-label">เวลา / ด่าน <span id="eb-ui-level">1</span></span><br>
                <strong id="eb-ui-time" style="color: #D32F2F; font-size: 22px; text-shadow: 0 0 5px rgba(211,47,47,0.3);">45</strong><span style="font-size: 12px; color: #999;">s</span>
            </div>
            <div class="eb-hud-item" style="text-align: right;">
                <span class="eb-hud-label">พลังชีวิต</span><br>
                <span id="eb-ui-lives" style="font-size: 16px;">❤️❤️❤️</span>
            </div>
        </div>

<div class="eb-mission-box">
            <div style="font-size: 12px; color: #B71C1C; font-weight: bold;">โจทย์การส่งจดหมาย:</div>
            <div id="eb-ui-mission" style="font-size: 16px; color: #333; font-weight: 600;">...</div>
        </div>

<div class="eb-draggables-container" id="eb-inventory">
            
        </div>

<div class="eb-email-app">
            <div class="eb-email-header">New Message ✉️</div>
            
            <div class="eb-email-row">
                <div class="eb-email-label">ถึง (To):</div>
                <div class="eb-drop-slot" data-type="to" id="eb-slot-to">ลากมาวางที่นี่</div>
            </div>
            
            <div class="eb-email-row">
                <div class="eb-email-label">เรื่อง (Subject):</div>
                <div class="eb-drop-slot" data-type="subject" id="eb-slot-subject">ลากมาวางที่นี่</div>
            </div>
            
            <div class="eb-email-body">
                <div class="eb-drop-slot eb-slot-large" data-type="body" id="eb-slot-body">ลากเนื้อหาจดหมายมาวางที่นี่</div>
            </div>
            
            <div class="eb-email-footer">
                <button class="eb-btn-send" onclick="eb_checkAnswer()">ส่งอีเมล (Send) ✈️</button>
            </div>
        </div>
    </div>

<div id="eb-screen-result" class="eb-screen">
        <div class="eb-icon-large" style="animation: ebPop 1s infinite alternate;">🏆✨</div>
        <h1 class="eb-title" id="eb-result-title" style="color: #00E5FF;">ภารกิจสำเร็จ!</h1>
        <p class="eb-subtitle" id="eb-result-desc" style="color: #E0E0E0;">คุณคือยอดนักสื่อสารไซเบอร์</p>
        
        <div class="eb-rules-box" style="text-align: center; border-color: #00E5FF; background: rgba(0, 229, 255, 0.1);">
            <p style="margin: 0; font-size: 16px; color: #FFF;">เจ้าหน้าที่: <strong id="eb-result-name" style="color: #00E5FF; font-size: 20px;">-</strong></p>
            <p style="margin: 10px 0 0 0; font-size: 14px; color: #E0E0E0;" id="eb-result-msg">เยี่ยมมาก! คุณเขียนอีเมลได้ถูกต้องตามหลักเป๊ะเลย!</p>
        </div>
        
        <button class="eb-btn eb-btn-primary" onclick="eb_restartGame()">เริ่มภารกิจใหม่ 🔄</button>
    </div>

</div>

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

.eb-screen { display: none; padding: 30px 20px; animation: ebFadeIn 0.3s ease-out forwards; min-height: 550px; }
    .eb-screen.eb-active { display: block; }

@keyframes ebFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
    @keyframes ebFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes ebPop { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }

.eb-icon-large { font-size: 60px; margin-bottom: 10px; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.3)); }
    .eb-title { font-size: 30px; color: #B71C1C; margin: 0 0 5px 0; font-weight: 800; letter-spacing: 0.5px; text-shadow: 1px 1px 0px rgba(255,255,255,0.8); }
    .eb-subtitle { font-size: 16px; color: #546E7A; font-weight: 600; margin: 0 0 20px 0; }

.eb-rules-box {
        background: #263238; border: 2px solid #00E5FF;
        padding: 20px; border-radius: 15px; margin: 0 auto 25px auto; max-width: 450px;
        box-shadow: 0 8px 15px rgba(0,229,255,0.15);
    }

/* 3D Buttons */
    .eb-btn {
        display: inline-block; padding: 15px 40px; font-size: 18px; font-weight: 800;
        border: none; border-radius: 12px; cursor: pointer; transition: all 0.1s;
        font-family: 'Prompt', sans-serif; text-transform: uppercase;
    }
    .eb-btn-primary {
        background: #B71C1C; color: #FFF;
        box-shadow: 0 6px 0 #7F0000, 0 8px 15px rgba(183, 28, 28, 0.3);
    }
    .eb-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #7F0000; }

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

.eb-mission-box {
        background: #FFEBEE; padding: 12px 15px; border-radius: 10px; margin-bottom: 15px;
        border-left: 5px solid #D32F2F; text-align: left; box-shadow: inset 0 0 10px rgba(211,47,47,0.05);
    }

/* Drag & Drop Areas */
    .eb-draggables-container {
        display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
        background: rgba(255,255,255,0.6); padding: 15px; border-radius: 12px;
        border: 2px dashed #90A4AE; min-height: 70px; margin-bottom: 20px;
    }

.eb-draggable {
        background: #D32F2F; border: 2px solid #FF5252; padding: 8px 15px;
        border-radius: 8px; font-weight: 600; font-size: 13px; color: #FFF;
        cursor: grab; box-shadow: 0 4px 0 #B71C1C; transition: transform 0.1s;
        display: flex; align-items: center; justify-content: center; text-align: center;
        max-width: 100%; word-break: break-word;
        position: relative; z-index: 5;
    }
    .eb-draggable:active { cursor: grabbing; }
    .eb-draggable.eb-dragging { opacity: 0.8; transform: scale(1.05); box-shadow: 0 8px 15px rgba(211,47,47,0.4); z-index: 10; }

/* Email Mockup */
    .eb-email-app {
        background: #FFFFFF; border-radius: 12px; border: 1px solid #CFD8DC;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden; text-align: left;
    }
    .eb-email-header {
        background: #263238; color: #FFF; padding: 10px 15px; font-size: 14px; font-weight: bold;
        border-bottom: 2px solid #00E5FF;
    }
    .eb-email-row {
        display: flex; align-items: center; border-bottom: 1px solid #ECEFF1; padding: 8px 15px;
        min-height: 50px;
    }
    .eb-email-label { width: 100px; font-size: 13px; font-weight: bold; color: #546E7A; }
    
    .eb-drop-slot {
        flex: 1; background: #F5F7F8; border: 2px dashed #B0BEC5; border-radius: 8px;
        min-height: 36px; display: flex; align-items: center; justify-content: center;
        padding: 5px; font-size: 12px; color: #90A4AE; transition: all 0.2s;
    }
    .eb-email-body { padding: 15px; background: #FAFAFA; }
    .eb-slot-large { min-height: 80px; align-items: flex-start; padding: 10px; }

.eb-drag-over { background: #E0F7FA !important; border-color: #00E5FF !important; color: #00B8D4 !important; }

.eb-email-footer { padding: 15px; border-top: 1px solid #ECEFF1; text-align: right; background: #FFF; }
    .eb-btn-send {
        background: #00B8D4; color: #FFF; border: none; padding: 10px 25px; border-radius: 8px;
        font-family: 'Prompt'; font-weight: bold; font-size: 14px; cursor: pointer;
        box-shadow: 0 4px 0 #00838F; transition: all 0.1s;
    }
    .eb-btn-send:active { transform: translateY(4px); box-shadow: none; }

/* Touch Ghost */
    .eb-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 */
    .eb-swal-popup { background: #263238 !important; border: 2px solid #00E5FF !important; border-radius: 15px !important; color: #FFF !important; font-family: 'Prompt', sans-serif !important; }
    .eb-swal-title { color: #00E5FF !important; font-size: 20px !important;}
    .eb-swal-html { color: #ECEFF1 !important; font-size: 14px !important; }
    .eb-swal-confirm { background: #B71C1C !important; color: #FFF !important; font-weight: bold !important; border-radius: 8px !important; box-shadow: 0 4px 0 #7F0000 !important; }
    .eb-swal-input { text-align: center !important; border-radius: 8px !important; }

@media (max-width: 500px) {
        .eb-title { font-size: 24px; }
        .eb-email-row { flex-direction: column; align-items: flex-start; }
        .eb-email-label { margin-bottom: 5px; }
        .eb-drop-slot { width: 100%; }
    }
</style>

let eb_playerName = "";
    let eb_currentLevel = 0;
    let eb_score = 0;
    let eb_lives = 3;
    let eb_timeLeft = 45;
    let eb_timerInt = null;
    let eb_audioCtx = null;
    let eb_draggedItem = null;
    let eb_touchGhost = null;

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

function eb_playSound(type) {
        if (!eb_audioCtx) return;
        try {
            const osc = eb_audioCtx.createOscillator();
            const gain = eb_audioCtx.createGain();
            osc.connect(gain); gain.connect(eb_audioCtx.destination);
            const now = eb_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(300, now); osc.frequency.exponentialRampToValueAtTime(350, 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(400, now); osc.frequency.exponentialRampToValueAtTime(250, 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(150, now); osc.frequency.linearRampToValueAtTime(100, 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 eb_showScreen(id) {
        document.querySelectorAll('.eb-screen').forEach(s => s.classList.remove('eb-active'));
        document.getElementById(id).classList.add('eb-active');
    }

/* --- Game Logic --- */
    function eb_startGame() {
        eb_playSound('click');
        eb_currentLevel = 0;
        eb_score = 0;
        eb_lives = 3;
        
        document.getElementById('eb-ui-name').innerText = eb_playerName;
        document.getElementById('eb-result-name').innerText = eb_playerName;
        
        eb_loadLevel();
        eb_showScreen('eb-screen-game');
    }

function eb_loadLevel() {
        eb_updateHUD();
        const level = eb_levelsData[eb_currentLevel];
        document.getElementById('eb-ui-mission').innerText = level.mission;

// Reset Slots
        document.querySelectorAll('.eb-drop-slot').forEach(slot => {
            slot.innerHTML = 'ลากมาวางที่นี่';
            if(slot.classList.contains('eb-slot-large')) slot.innerHTML = 'ลากเนื้อหาจดหมายมาวางที่นี่';
        });

// Create Draggables
        const inv = document.getElementById('eb-inventory');
        inv.innerHTML = '';
        
        let items = [
            { text: level.targetTo, type: "to" },
            { text: level.targetSub, type: "subject" },
            { text: level.targetBody, type: "body" }
        ].sort(() => Math.random() - 0.5);

items.forEach((item, index) => {
            const div = document.createElement('div');
            div.className = 'eb-draggable';
            div.draggable = true;
            div.innerText = item.text;
            div.dataset.type = item.type;
            div.id = `eb-drag-${index}`;
            
            // Mouse Events
            div.addEventListener('dragstart', eb_handleDragStart);
            div.addEventListener('dragend', eb_handleDragEnd);
            // Touch Events
            div.addEventListener('touchstart', eb_handleTouchStart, {passive: false});
            div.addEventListener('touchmove', eb_handleTouchMove, {passive: false});
            div.addEventListener('touchend', eb_handleTouchEnd);
            
            inv.appendChild(div);
        });

// Add Drop zone events
        document.querySelectorAll('.eb-drop-slot, .eb-draggables-container').forEach(zone => {
            zone.addEventListener('dragover', eb_handleDragOver);
            zone.addEventListener('dragleave', eb_handleDragLeave);
            zone.addEventListener('drop', eb_handleDrop);
        });

// Reset Timer
        clearInterval(eb_timerInt);
        eb_timeLeft = 45;
        document.getElementById('eb-ui-time').innerText = eb_timeLeft;
        eb_timerInt = setInterval(eb_timerTick, 1000);
    }

function eb_timerTick() {
        eb_timeLeft--;
        document.getElementById('eb-ui-time').innerText = eb_timeLeft;
        if (eb_timeLeft <= 0) {
            clearInterval(eb_timerInt);
            eb_handleMistake("หมดเวลา!", "คุณส่งจดหมายไม่ทันเวลา เสียหัวใจ 1 ดวง");
        }
    }

/* --- Drag & Drop (Mouse) --- */
    function eb_handleDragStart(e) {
        eb_draggedItem = this;
        setTimeout(() => this.classList.add('eb-dragging'), 0);
        eb_playSound('drag');
    }
    function eb_handleDragEnd(e) { this.classList.remove('eb-dragging'); eb_draggedItem = null; }
    function eb_handleDragOver(e) { e.preventDefault(); this.classList.add('eb-drag-over'); }
    function eb_handleDragLeave(e) { this.classList.remove('eb-drag-over'); }
    function eb_handleDrop(e) {
        e.preventDefault();
        this.classList.remove('eb-drag-over');
        if (eb_draggedItem) {
            eb_processDrop(this, eb_draggedItem);
        }
    }

/* --- Drag & Drop (Touch) --- */
    function eb_handleTouchStart(e) {
        eb_playSound('drag');
        eb_draggedItem = e.target;
        eb_draggedItem.classList.add('eb-dragging');

eb_touchGhost = eb_draggedItem.cloneNode(true);
        eb_touchGhost.classList.add('eb-touch-ghost');
        eb_touchGhost.style.width = eb_draggedItem.offsetWidth + 'px';
        document.body.appendChild(eb_touchGhost);
        eb_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function eb_handleTouchMove(e) {
        if (!eb_touchGhost) return;
        e.preventDefault();
        eb_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function eb_handleTouchEnd(e) {
        if (!eb_touchGhost) return;
        eb_draggedItem.classList.remove('eb-dragging');
        eb_touchGhost.style.display = 'none';
        
        const changedTouch = e.changedTouches[0];
        const elemBelow = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
        eb_touchGhost.remove();
        eb_touchGhost = null;

/* --- Validation --- */
    function eb_checkAnswer() {
        clearInterval(eb_timerInt); // Pause timer
        
        // Check if inventory is empty
        const invItems = document.getElementById('eb-inventory').querySelectorAll('.eb-draggable');
        if (invItems.length > 0) {
            eb_playSound('wrong');
            Swal.fire({ title: 'เดี๋ยวก่อน!', text: 'คุณประกอบร่างอีเมลยังไม่ครบเลย ลากไปวางให้ครบก่อนส่งนะ', icon: 'warning', customClass: { popup: 'eb-swal-popup', title:'eb-swal-title', htmlContainer: 'eb-swal-html', confirmButton: 'eb-swal-confirm' } })
            .then(() => { eb_timerInt = setInterval(eb_timerTick, 1000); });
            return;
        }

let isCorrect = true;
        document.querySelectorAll('.eb-drop-slot').forEach(slot => {
            const item = slot.querySelector('.eb-draggable');
            if (!item || item.dataset.type !== slot.dataset.type) {
                isCorrect = false;
            }
        });

if (isCorrect) {
            eb_playSound('correct');
            eb_score++;
            Swal.fire({
                title: 'ส่งสำเร็จ! ✈️', text: 'ข้อมูลครบถ้วน ถูกต้องตามหลักเป๊ะเลย!', icon: 'success',
                timer: 1500, showConfirmButton: false, customClass: { popup: 'eb-swal-popup', title:'eb-swal-title', htmlContainer: 'eb-swal-html' }
            }).then(() => {
                eb_currentLevel++;
                if (eb_currentLevel < eb_levelsData.length) {
                    eb_loadLevel();
                } else {
                    eb_endGame(true);
                }
            });
        } else {
            eb_handleMistake("อ๊ะ! วางสลับช่องนะ", "คุณวางชิ้นส่วนข้อความสลับช่องกัน ลองอ่านแล้วจัดเรียงใหม่ดูนะ!");
        }
    }

function eb_handleMistake(title, text) {
        eb_playSound('wrong');
        eb_lives--;
        eb_updateHUD();

Swal.fire({
            title: title, text: text, icon: 'error',
            confirmButtonText: 'แก้ไขด่วน!', customClass: { popup: 'eb-swal-popup', title:'eb-swal-title', htmlContainer: 'eb-swal-html', confirmButton: 'eb-swal-confirm' }
        }).then(() => {
            if (eb_lives <= 0) {
                eb_endGame(false);
            } else {
                eb_timerInt = setInterval(eb_timerTick, 1000); // Resume timer
            }
        });
    }

function eb_restartGame() {
        eb_playSound('click');
        eb_showScreen('eb-screen-start');
    }
</script>