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

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="vip-wrapper" id="vip-game-container">
    
    
    <div id="vip-screen-start" class="vip-screen vip-active">
        <div style="font-size: 70px; margin-bottom: 10px; animation: vipFloat 2s ease-in-out infinite;">📦🤖</div>
        <h1 class="vip-title">VIP Mail Sorter</h1>
        <p class="vip-subtitle">ภารกิจคัดแยกอีเมล 2 ค่าย</p>
        
        <div class="vip-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>อ่าน "คุณสมบัติ" ที่ปรากฏขึ้นตรงกลางหน้าจอ</li>
                <li><strong>ลาก (Drag)</strong> กล่องข้อความไปใส่ตะกร้า <strong>Google</strong> หรือ <strong>Microsoft</strong> ให้ถูกค่าย</li>
                <li>คุณมีเวลา <strong>60 วินาที</strong> และหัวใจ <strong>3 ดวง</strong></li>
                <li>คัดแยกให้ถูกต้องครบ 10 ภารกิจเพื่อชนะเกม!</li>
            </ul>
        </div>
        
        <button class="vip-btn vip-btn-primary" onclick="vip_promptName()">เริ่มภารกิจคัดแยก 🚀</button>
    </div>

<div id="vip-screen-game" class="vip-screen">
        <div class="vip-hud">
            <div class="vip-hud-item">
                <span class="vip-hud-label">เจ้าหน้าที่</span><br>
                <strong id="vip-ui-name" style="color: #00E5FF; font-size: 16px;">-</strong>
            </div>
            <div class="vip-hud-item" style="text-align: center;">
                <span class="vip-hud-label">เวลาที่เหลือ</span><br>
                <strong id="vip-ui-time" style="color: #D32F2F; font-size: 22px; text-shadow: 0 0 5px rgba(211,47,47,0.3);">60</strong><span style="font-size: 12px; color: #999;">s</span>
            </div>
            <div class="vip-hud-item" style="text-align: right;">
                <span class="vip-hud-label">ความสำเร็จ / หัวใจ</span><br>
                <strong style="color: #1565C0; font-size: 16px;"><span id="vip-ui-score">0</span>/10</strong> <span id="vip-ui-lives" style="font-size: 14px;">❤️❤️❤️</span>
            </div>
        </div>

<div style="font-size: 14px; color: #B71C1C; font-weight: bold; margin-bottom: 5px;">ลากคุณสมบัตินี้ ไปลงตะกร้าที่ถูกต้อง 👇</div>
        
        <div class="vip-stage" id="vip-stage">
            
        </div>

<div class="vip-baskets">
            <div class="vip-basket vip-basket-google" data-target="google">
                <div class="vip-basket-icon">🇬</div>
                <div class="vip-basket-title">Google Workspace</div>
                <div class="vip-basket-desc">(@wsst.ac.th)</div>
            </div>
            <div class="vip-basket vip-basket-ms" data-target="microsoft">
                <div class="vip-basket-icon">Ⓜ️</div>
                <div class="vip-basket-title">Microsoft Office 365</div>
                <div class="vip-basket-desc">(@ms.wsst.ac.th)</div>
            </div>
        </div>
    </div>

<div id="vip-screen-result" class="vip-screen">
        <div style="font-size: 80px; margin-bottom: 10px; animation: vipPop 1s infinite alternate;">🏅✨</div>
        <h1 class="vip-title" id="vip-result-title" style="color: #00E5FF;">ภารกิจสำเร็จ!</h1>
        <p class="vip-subtitle" id="vip-result-desc" style="color: #E0E0E0;">คุณคือสุดยอดนักคัดแยก</p>
        
        <div class="vip-rules-box" style="text-align: center; border-color: #00E5FF; background: rgba(0, 229, 255, 0.1);">
            <p style="margin: 0; font-size: 18px; color: #FFF;">เจ้าหน้าที่: <strong id="vip-result-name" style="color: #00E5FF; font-size: 22px;">-</strong></p>
            <p style="margin: 10px 0 0 0; font-size: 15px; color: #E0E0E0;" id="vip-result-msg">คุณจำความสามารถของอีเมลโรงเรียนได้แม่นยำมาก!</p>
        </div>
        
        <button class="vip-btn vip-btn-primary" onclick="vip_restartGame()">กลับสู่หน้าหลัก 🔄</button>
    </div>

</div>

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

.vip-screen { display: none; padding: 30px 20px; animation: vipFadeIn 0.3s ease-out forwards; min-height: 600px; }
    .vip-screen.vip-active { display: block; }

@keyframes vipFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
    @keyframes vipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes vipPop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

.vip-title { font-size: 32px; color: #B71C1C; margin: 0 0 5px 0; font-weight: 800; text-shadow: 1px 1px 0px rgba(255,255,255,0.8); }
    .vip-subtitle { font-size: 18px; color: #546E7A; font-weight: 600; margin: 0 0 20px 0; }

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

/* 3D Buttons */
    .vip-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;
    }
    .vip-btn-primary {
        background: #B71C1C; color: #FFF;
        box-shadow: 0 6px 0 #7F0000, 0 8px 15px rgba(183, 28, 28, 0.3);
    }
    .vip-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #7F0000; }

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

/* Current Item to Sort */
    .vip-stage {
        background: rgba(255,255,255,0.6); padding: 20px; border-radius: 15px;
        border: 2px dashed #90A4AE; min-height: 160px; margin-bottom: 30px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
    }

.vip-draggable {
        background: #D32F2F; border: 3px solid #FF5252; padding: 20px;
        border-radius: 12px; font-weight: 800; font-size: 18px; color: #FFF;
        cursor: grab; box-shadow: 0 6px 0 #B71C1C, 0 10px 20px rgba(0,0,0,0.2); 
        transition: transform 0.1s; display: flex; align-items: center; justify-content: center;
        text-align: center; width: 90%; max-width: 400px; position: relative; z-index: 5;
        animation: vipPop 0.3s ease-out;
    }
    .vip-draggable:active { cursor: grabbing; }
    .vip-draggable.vip-dragging { opacity: 0.8; transform: scale(1.05); box-shadow: 0 10px 25px rgba(211,47,47,0.4); z-index: 10; }

/* Baskets (Drop Zones) */
    .vip-baskets {
        display: flex; justify-content: center; gap: 15px; width: 100%;
    }

.vip-basket {
        flex: 1; background: #FFFFFF; border: 4px solid #B0BEC5; border-radius: 15px;
        padding: 20px 10px; display: flex; flex-direction: column; align-items: center;
        justify-content: center; transition: all 0.2s; min-height: 180px;
        box-shadow: 0 8px 15px rgba(0,0,0,0.1); position: relative; overflow: hidden;
    }
    
    .vip-basket-google { border-color: #2196F3; }
    .vip-basket-google .vip-basket-title { color: #1565C0; }
    .vip-basket-google.vip-drag-over { background: #E3F2FD; border-color: #00E5FF; transform: scale(1.03); box-shadow: 0 10px 25px rgba(0,229,255,0.4); }

.vip-basket-ms { border-color: #4CAF50; }
    .vip-basket-ms .vip-basket-title { color: #2E7D32; }
    .vip-basket-ms.vip-drag-over { background: #E8F5E9; border-color: #00E5FF; transform: scale(1.03); box-shadow: 0 10px 25px rgba(0,229,255,0.4); }

.vip-basket-icon { font-size: 45px; margin-bottom: 10px; pointer-events: none; }
    .vip-basket-title { font-size: 18px; font-weight: 800; pointer-events: none; }
    .vip-basket-desc { font-size: 12px; color: #78909C; font-weight: 600; pointer-events: none; margin-top: 5px;}

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

@media (max-width: 500px) {
        .vip-title { font-size: 26px; }
        .vip-baskets { flex-direction: column; }
        .vip-basket { min-height: 120px; padding: 15px 10px; }
        .vip-draggable { font-size: 16px; padding: 15px; }
    }
</style>

let vip_playerName = "";
    let vip_gameList = [];
    let vip_currentIndex = 0;
    let vip_score = 0;
    let vip_lives = 3;
    let vip_timeLeft = 60;
    let vip_timerInt = null;
    let vip_audioCtx = null;
    let vip_draggedItem = null;
    let vip_touchGhost = null;

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

function vip_playSound(type) {
        if (!vip_audioCtx) return;
        try {
            const osc = vip_audioCtx.createOscillator();
            const gain = vip_audioCtx.createGain();
            osc.connect(gain); gain.connect(vip_audioCtx.destination);
            const now = vip_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);
            } 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);
            }
        } catch (e) { console.error(e); }
    }

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

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

/* --- Game Logic --- */
    function vip_startGame() {
        vip_playSound('click');
        vip_gameList = vip_shuffle([...vip_missionsData]);
        vip_currentIndex = 0;
        vip_score = 0;
        vip_lives = 3;
        
        document.getElementById('vip-ui-name').innerText = vip_playerName;
        document.getElementById('vip-result-name').innerText = vip_playerName;
        
        // Setup Baskets Events
        document.querySelectorAll('.vip-basket').forEach(basket => {
            const clone = basket.cloneNode(true);
            basket.parentNode.replaceChild(clone, basket);
            
            clone.addEventListener('dragover', vip_handleDragOver);
            clone.addEventListener('dragleave', vip_handleDragLeave);
            clone.addEventListener('drop', vip_handleDrop);
        });
        
        vip_loadNextItem();
        vip_showScreen('vip-screen-game');

// Reset Timer
        clearInterval(vip_timerInt);
        vip_timeLeft = 60;
        document.getElementById('vip-ui-time').innerText = vip_timeLeft;
        vip_timerInt = setInterval(vip_timerTick, 1000);
    }

function vip_updateHUD() {
        document.getElementById('vip-ui-score').innerText = vip_score;
        let hearts = "";
        for(let i=0; i<3; i++) hearts += (i < vip_lives) ? "❤️" : "🖤";
        document.getElementById('vip-ui-lives').innerText = hearts;
    }

function vip_timerTick() {
        vip_timeLeft--;
        document.getElementById('vip-ui-time').innerText = vip_timeLeft;
        if (vip_timeLeft <= 0) {
            clearInterval(vip_timerInt);
            vip_endGame(false, "หมดเวลา!");
        }
    }

function vip_loadNextItem() {
        vip_updateHUD();
        const stage = document.getElementById('vip-stage');
        stage.innerHTML = '';

if (vip_currentIndex < vip_gameList.length) {
            const currentData = vip_gameList[vip_currentIndex];
            
            const div = document.createElement('div');
            div.className = 'vip-draggable';
            div.draggable = true;
            div.innerText = currentData.text;
            div.dataset.type = currentData.type;
            
            div.addEventListener('dragstart', vip_handleDragStart);
            div.addEventListener('dragend', vip_handleDragEnd);
            div.addEventListener('touchstart', vip_handleTouchStart, {passive: false});
            div.addEventListener('touchmove', vip_handleTouchMove, {passive: false});
            div.addEventListener('touchend', vip_handleTouchEnd);
            
            stage.appendChild(div);
        } else {
            vip_endGame(true, "");
        }
    }

/* --- Drag & Drop (Mouse) --- */
    function vip_handleDragStart(e) {
        vip_draggedItem = this;
        setTimeout(() => this.classList.add('vip-dragging'), 0);
        vip_playSound('drag');
    }
    function vip_handleDragEnd(e) { this.classList.remove('vip-dragging'); vip_draggedItem = null; }
    function vip_handleDragOver(e) { e.preventDefault(); this.classList.add('vip-drag-over'); }
    function vip_handleDragLeave(e) { this.classList.remove('vip-drag-over'); }
    function vip_handleDrop(e) {
        e.preventDefault();
        this.classList.remove('vip-drag-over');
        if (vip_draggedItem) {
            vip_processDrop(this.dataset.target, vip_draggedItem.dataset.type, this);
        }
    }

/* --- Drag & Drop (Touch) --- */
    function vip_handleTouchStart(e) {
        vip_playSound('drag');
        vip_draggedItem = e.target;
        vip_draggedItem.classList.add('vip-dragging');

vip_touchGhost = vip_draggedItem.cloneNode(true);
        vip_touchGhost.classList.add('vip-touch-ghost');
        vip_touchGhost.style.width = vip_draggedItem.offsetWidth + 'px';
        document.body.appendChild(vip_touchGhost);
        vip_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function vip_handleTouchMove(e) {
        if (!vip_touchGhost) return;
        e.preventDefault();
        vip_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function vip_handleTouchEnd(e) {
        if (!vip_touchGhost) return;
        vip_draggedItem.classList.remove('vip-dragging');
        vip_touchGhost.style.display = 'none';
        
        const changedTouch = e.changedTouches[0];
        const elemBelow = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
        vip_touchGhost.remove();
        vip_touchGhost = null;

/* --- Verification --- */
    function vip_processDrop(targetBasket, correctType, basketElement) {
        clearInterval(vip_timerInt);
        const currentData = vip_gameList[vip_currentIndex];
        
        document.querySelector('.vip-draggable').style.display = 'none';

if (targetBasket === correctType) {
            vip_playSound('correct');
            vip_score++;
            basketElement.style.transform = "scale(1.1)";
            setTimeout(() => basketElement.style.transform = "scale(1)", 300);

Swal.fire({
                title: 'ถูกต้อง! 🎉', text: currentData.exp, icon: 'success',
                timer: 2000, showConfirmButton: false, customClass: { popup: 'vip-swal-popup', title:'vip-swal-title', htmlContainer: 'vip-swal-html' }
            }).then(() => {
                vip_currentIndex++;
                vip_loadNextItem();
                if(vip_currentIndex < vip_gameList.length) vip_timerInt = setInterval(vip_timerTick, 1000);
            });
        } else {
            vip_playSound('wrong');
            vip_lives--;
            vip_updateHUD();
            
            basketElement.style.transform = "translateX(10px)";
            setTimeout(() => basketElement.style.transform = "translateX(-10px)", 100);
            setTimeout(() => basketElement.style.transform = "translateX(0)", 200);

Swal.fire({
                title: 'ผิดค่ายแล้ว! 💥', text: currentData.exp, icon: 'error',
                confirmButtonText: 'รับทราบ', customClass: { popup: 'vip-swal-popup', title:'vip-swal-title', htmlContainer: 'vip-swal-html', confirmButton: 'vip-swal-confirm' }
            }).then(() => {
                if (vip_lives <= 0) {
                    vip_endGame(false, "หัวใจหมดแล้ว!");
                } else {
                    vip_currentIndex++;
                    vip_loadNextItem();
                    vip_timerInt = setInterval(vip_timerTick, 1000);
                }
            });
        }
    }

function vip_restartGame() {
        vip_playSound('click');
        vip_showScreen('vip-screen-start');
    }
</script>