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

Back

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

Title

Description

Keyword

Detail (HTML Code)

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

/* --- Screens --- */
        .sn-screen {
            display: none;
            padding: 40px 20px;
            min-height: 500px;
            animation: snFadeIn 0.5s ease;
            text-align: center;
        }

.sn-screen.active {
            display: block;
        }

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

/* --- Typography & Colors --- */
        .sn-title {
            font-size: 32px;
            color: #1565C0;
            font-weight: 800;
            margin-bottom: 10px;
        }
        .sn-subtitle {
            font-size: 18px;
            color: #0277BD;
            margin-bottom: 30px;
        }
        .sn-text {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
        }

/* --- 3D Buttons --- */
        .sn-btn {
            display: inline-block;
            padding: 15px 40px;
            font-size: 20px;
            font-weight: 800;
            color: #FFF;
            background-color: #64B5F6;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 6px 0 #1E88E5, 0 10px 15px rgba(0,0,0,0.1);
            transition: all 0.1s ease;
            font-family: 'Prompt', sans-serif;
            margin-top: 20px;
        }
        .sn-btn:active {
            transform: translateY(6px);
            box-shadow: 0 0 0 #1E88E5, 0 4px 5px rgba(0,0,0,0.1);
        }
        .sn-btn-green {
            background-color: #81C784;
            box-shadow: 0 6px 0 #388E3C, 0 10px 15px rgba(0,0,0,0.1);
        }
        .sn-btn-green:active {
            box-shadow: 0 0 0 #388E3C, 0 4px 5px rgba(0,0,0,0.1);
        }

/* --- Game Layout --- */
        .sn-game-header {
            background-color: #E3F2FD;
            padding: 15px 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid #BBDEFB;
        }
        .sn-progress {
            font-size: 20px;
            font-weight: 800;
            color: #1565C0;
        }

.sn-board {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

@media (min-width: 768px) {
            .sn-board {
                flex-direction: row;
            }
        }

.sn-draggables-container, .sn-slots-container {
            flex: 1;
            background: #FFF;
            padding: 20px;
            border-radius: 15px;
            border: 2px dashed #B0BEC5;
            display: flex;
            flex-direction: column;
            gap: 12px;
            height: 600px;
            overflow-y: auto;
        }

.sn-panel-title {
            font-size: 18px;
            font-weight: 800;
            color: #455A64;
            margin-bottom: 10px;
            text-align: left;
        }

/* --- Draggable Items (Situations) --- */
        .sn-draggable {
            background-color: #FFF3E0;
            border: 2px solid #FFCC80;
            color: #E65100;
            padding: 15px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            cursor: grab;
            box-shadow: 0 4px 0 #FFB74D;
            transition: transform 0.1s;
            user-select: none;
            touch-action: none;
            position: relative;
            z-index: 2;
        }
        .sn-draggable:active {
            cursor: grabbing;
        }
        .sn-draggable.dragging {
            opacity: 0.5;
        }

/* --- Drop Slots (Actions) --- */
        .sn-slot {
            background-color: #E8F5E9;
            border: 2px dashed #81C784;
            color: #2E7D32;
            padding: 15px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            min-height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: all 0.2s;
            position: relative;
        }
        .sn-slot-text {
            pointer-events: none;
        }
        .sn-slot.drag-over {
            background-color: #C8E6C9;
            border: 2px solid #4CAF50;
            transform: scale(1.02);
        }

/* เมื่อจับคู่สำเร็จ */
        .sn-slot.matched {
            background-color: #A5D6A7;
            border: 2px solid #388E3C;
            color: #1B5E20;
            box-shadow: 0 4px 0 #4CAF50;
            animation: snPop 0.3s ease;
        }
        .sn-slot.matched .sn-draggable {
            display: none; /* ซ่อนบล็อกที่ลากมา ให้แสดงแค่กล่อง Slot ที่อัปเดตข้อความ */
        }

@keyframes snPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

/* --- Ghost for Touch Dragging --- */
        .sn-touch-ghost {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.8;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            transform: translate(-50%, -50%);
        }

/* --- SweetAlert Customization --- */
        .sn-swal-popup {
            font-family: 'Prompt', sans-serif !important;
            border-radius: 20px !important;
        }
        .sn-swal-success { background-color: #E8F5E9 !important; border: 3px solid #81C784 !important; }
        .sn-swal-error { background-color: #FFEBEE !important; border: 3px solid #E57373 !important; }
        .sn-swal-title { font-size: 20px !important; }

/* Scrollbar styling for panels */
        .sn-draggables-container::-webkit-scrollbar, .sn-slots-container::-webkit-scrollbar {
            width: 8px;
        }
        .sn-draggables-container::-webkit-scrollbar-thumb, .sn-slots-container::-webkit-scrollbar-thumb {
            background-color: #CFD8DC;
            border-radius: 4px;
        }
    </style>

<div class="sn-wrapper" id="sn-game-container">
    
    <div id="sn-screen-start" class="sn-screen active">
        <div style="font-size: 70px; margin-bottom: 10px;">🛡️👀</div>
        <h1 class="sn-title">SafeNet Explorer</h1>
        <h2 class="sn-subtitle">ภารกิจท่องเน็ตปลอดภัย & ถนอมสายตา</h2>
        
        <div style="background: #FFF3E0; padding: 20px; border-radius: 15px; border: 2px dashed #FFB74D; max-width: 500px; margin: 0 auto; text-align: left;">
            <strong style="color: #E65100; font-size: 18px;">💡 กติกาการเล่น:</strong>
            <ul class="sn-text" style="margin-top: 10px; color: #E65100;">
                <li>ใช้เมาส์หรือนิ้ว <strong>"ลาก"</strong> กล่องสถานการณ์สีส้ม</li>
                <li>นำไป <strong>"วาง"</strong> ให้ตรงกับกล่องวิธีปฏิบัติสีเขียว</li>
                <li>จับคู่ให้ถูกต้องครบทั้ง 10 ภารกิจเพื่อชนะเกม!</li>
                <li>ไม่มีจับเวลา เล่นได้สบายๆ เลย!</li>
            </ul>
        </div>
        
        <button class="sn-btn" onclick="sn_startGame()">เริ่มภารกิจเลย! 🚀</button>
    </div>

<div id="sn-screen-game" class="sn-screen">
        <div class="sn-game-header">
            <div style="font-weight: 600; color: #1565C0;">ภารกิจ: จับคู่สถานการณ์กับวิธีปฏิบัติ</div>
            <div class="sn-progress">ความสำเร็จ: <span id="sn-score">0</span> / 10</div>
        </div>

<div class="sn-board">
            <div class="sn-draggables-container" id="sn-draggables">
                <div class="sn-panel-title">🟠 ลากสถานการณ์เหล่านี้:</div>
                </div>

<div class="sn-slots-container" id="sn-slots">
                <div class="sn-panel-title">🟢 วางให้ตรงวิธีที่ถูกต้อง:</div>
                </div>
        </div>
    </div>

<div id="sn-screen-result" class="sn-screen">
        <div style="font-size: 70px; margin-bottom: 10px;">🏆🌟</div>
        <h1 class="sn-title" style="color: #2E7D32;">ภารกิจสำเร็จ!</h1>
        <h2 class="sn-subtitle" style="color: #388E3C;">คุณคือพลเมืองดิจิทัลคุณภาพ</h2>
        
        <p class="sn-text" style="max-width: 500px; margin: 0 auto 30px auto;">
            ยอดเยี่ยมมาก! คุณมีความรู้ในการป้องกันตัวเองจากมิจฉาชีพบนโลกออนไลน์ และรู้จักวิธีถนอมสายตาอย่างถูกต้อง อย่าลืมนำไปใช้ในชีวิตจริงด้วยนะ!
        </p>
        
        <button class="sn-btn sn-btn-green" onclick="sn_resetGame()">เล่นอีกครั้ง 🔄</button>
    </div>

</div>

// 1. Data Array (10 ภารกิจ)
const sn_gameData = [
    { id: 1, sit: "มีคนแปลกหน้าทักแชตมาขอรูปถ่ายส่วนตัว", act: "รีบปรึกษาผู้ใหญ่/คุณพ่อคุณแม่" },
    { id: 2, sit: "เล่นมือถือในห้องนอนตอนปิดไฟมืดสนิท", act: "ดวงตาทำงานหนัก ห้ามทำเด็ดขาด!" },
    { id: 3, sit: "เจอลิงก์แจกเงินฟรีในกลุ่มแชต", act: "ไม่คลิก ไม่ส่งต่อ ระวังมิจฉาชีพ" },
    { id: 4, sit: "ตั้งรหัสผ่านเป็นวันเกิดตัวเอง (123456)", act: "ควรตั้งรหัสผ่านใหม่ให้คาดเดายาก" },
    { id: 5, sit: "ใช้ Wi-Fi ฟรีที่ร้านกาแฟโอนเงิน", act: "อันตราย! แฮกเกอร์อาจดักขโมยข้อมูล" },
    { id: 6, sit: "นั่งจ้องหน้าจอคอมพิวเตอร์ใกล้มากๆ", act: "ถอยออกมาให้อยู่ห่างประมาณ 1 ช่วงแขน" },
    { id: 7, sit: "เห็นเพื่อนโดนบูลลี่ (Bully) บนโซเชียล", act: "ไม่ร่วมผสมโรง และแจ้งผู้ใหญ่ให้ช่วยเหลือ" },
    { id: 8, sit: "อ่าน E-book นานๆ แล้วรู้สึกปวดตา", act: "พักสายตาโดยมองต้นไม้สีเขียวไกลๆ" },
    { id: 9, sit: "โพสต์รูปบัตรประชาชนลง Facebook", act: "ลบทิ้งทันที! ต้องเก็บข้อมูลส่วนตัวให้มิดชิด" },
    { id: 10, sit: "ตัวหนังสือในหน้าจอเล็กมากจนต้องเพ่ง", act: "ปรับขนาดตัวอักษรให้ใหญ่ขึ้นอ่านง่ายๆ" }
];

let sn_matches = 0;
let sn_audioCtx = null;

// 2. Audio System (Web Audio API Synthesizer)
function sn_initAudio() {
    if (!sn_audioCtx) {
        sn_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (sn_audioCtx.state === 'suspended') {
        sn_audioCtx.resume();
    }
}

// 3. Game Navigation & Initialization
function sn_showScreen(id) {
    document.querySelectorAll('.sn-screen').forEach(el => el.classList.remove('active'));
    document.getElementById(id).classList.add('active');
}

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

function sn_startGame() {
    sn_initAudio();
    sn_playSound('click');
    sn_matches = 0;
    document.getElementById('sn-score').innerText = sn_matches;
    
    // สร้าง Array ใหม่สำหรับสุ่ม
    const situations = sn_shuffle([...sn_gameData]);
    const actions = sn_shuffle([...sn_gameData]);

const dragContainer = document.getElementById('sn-draggables');
    const slotContainer = document.getElementById('sn-slots');
    
    // เคลียร์ค่าเดิม
    dragContainer.innerHTML = '<div class="sn-panel-title">🟠 ลากสถานการณ์เหล่านี้:</div>';
    slotContainer.innerHTML = '<div class="sn-panel-title">🟢 วางให้ตรงวิธีที่ถูกต้อง:</div>';

// Render Draggables
    situations.forEach(item => {
        const div = document.createElement('div');
        div.className = 'sn-draggable';
        div.draggable = true;
        div.innerText = item.sit;
        div.dataset.id = item.id;
        
        // Mouse Events
        div.addEventListener('dragstart', sn_handleDragStart);
        div.addEventListener('dragend', sn_handleDragEnd);
        
        // Touch Events
        div.addEventListener('touchstart', sn_handleTouchStart, {passive: false});
        div.addEventListener('touchmove', sn_handleTouchMove, {passive: false});
        div.addEventListener('touchend', sn_handleTouchEnd);

dragContainer.appendChild(div);
    });

// Render Slots
    actions.forEach(item => {
        const div = document.createElement('div');
        div.className = 'sn-slot';
        div.dataset.id = item.id;
        div.innerHTML = `<span class="sn-slot-text">${item.act}</span>`;
        
        // Mouse Events
        div.addEventListener('dragover', sn_handleDragOver);
        div.addEventListener('dragleave', sn_handleDragLeave);
        div.addEventListener('drop', sn_handleDrop);

slotContainer.appendChild(div);
    });

sn_showScreen('sn-screen-game');
}

function sn_resetGame() {
    sn_playSound('click');
    sn_startGame();
}

// 4. Drag & Drop Logic (Mouse)
let sn_draggedElement = null;

function sn_handleDragStart(e) {
    sn_playSound('drag');
    sn_draggedElement = this;
    setTimeout(() => this.classList.add('dragging'), 0);
    e.dataTransfer.setData('text/plain', this.dataset.id);
}

function sn_handleDragEnd(e) {
    this.classList.remove('dragging');
    sn_draggedElement = null;
}

function sn_handleDragOver(e) {
    e.preventDefault();
    if (!this.classList.contains('matched')) {
        this.classList.add('drag-over');
    }
}

function sn_handleDragLeave(e) {
    this.classList.remove('drag-over');
}

function sn_handleDrop(e) {
    e.preventDefault();
    this.classList.remove('drag-over');
    if (this.classList.contains('matched')) return;

sn_playSound('drop');
    const draggedId = e.dataTransfer.getData('text/plain');
    const slotId = this.dataset.id;

sn_checkMatch(draggedId, slotId, sn_draggedElement, this);
}

// 5. Touch Events Logic (Mobile Support)
let sn_touchGhost = null;
let sn_currentTouchId = null;

function sn_handleTouchStart(e) {
    if (e.target.classList.contains('matched')) return;
    sn_playSound('drag');
    sn_draggedElement = e.target;
    sn_currentTouchId = sn_draggedElement.dataset.id;
    sn_draggedElement.classList.add('dragging');

// สร้างตัวผี (Ghost) ลอยตามนิ้ว
    sn_touchGhost = sn_draggedElement.cloneNode(true);
    sn_touchGhost.classList.add('sn-touch-ghost');
    sn_touchGhost.style.width = sn_draggedElement.offsetWidth + 'px';
    document.body.appendChild(sn_touchGhost);

sn_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
}

function sn_handleTouchMove(e) {
    if (!sn_touchGhost) return;
    e.preventDefault(); // ป้องกันการเลื่อนหน้าจอขณะลาก
    sn_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
}

function sn_handleTouchEnd(e) {
    if (!sn_touchGhost) return;
    
    sn_draggedElement.classList.remove('dragging');
    
    // หา Element ที่อยู่ใต้นิ้วตอนปล่อย
    sn_touchGhost.style.display = 'none';
    const changedTouch = e.changedTouches[0];
    const elemBelow = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
    sn_touchGhost.remove();
    sn_touchGhost = null;

sn_playSound('drop');

// หา Slot ที่ใกล้ที่สุด
    const slot = elemBelow ? elemBelow.closest('.sn-slot') : null;
    
    if (slot && !slot.classList.contains('matched')) {
        sn_checkMatch(sn_currentTouchId, slot.dataset.id, sn_draggedElement, slot);
    }
    
    sn_draggedElement = null;
    sn_currentTouchId = null;
}

function sn_moveGhost(x, y) {
    sn_touchGhost.style.left = x + 'px';
    sn_touchGhost.style.top = y + 'px';
}

// 6. Match Verification & Game State
function sn_checkMatch(dragId, slotId, dragEl, slotEl) {
    if (dragId === slotId) {
        // จับคู่ถูกต้อง
        sn_playSound('correct');
        slotEl.classList.add('matched');
        
        // ดึงข้อความรวมกันเพื่อความสมบูรณ์
        const sitText = dragEl.innerText;
        const actText = slotEl.querySelector('.sn-slot-text').innerText;
        slotEl.innerHTML = `<div style="font-size: 12px; color: #388E3C; margin-bottom: 5px;">✅ ${sitText}</div><div>👉 ${actText}</div>`;
        
        dragEl.style.visibility = 'hidden'; // ซ่อนต้นฉบับ
        
        sn_matches++;
        document.getElementById('sn-score').innerText = sn_matches;

// Alert แจ้งเตือนความถูกต้อง (SweetAlert โทนพาสเทล)
        Swal.fire({
            title: 'ยอดเยี่ยม!',
            text: 'คุณจับคู่วิธีปฏิบัติได้ถูกต้อง',
            icon: 'success',
            timer: 1200,
            showConfirmButton: false,
            customClass: { popup: 'sn-swal-popup sn-swal-success', title: 'sn-swal-title' }
        });

// ตรวจสอบชัยชนะ
        if (sn_matches === 10) {
            setTimeout(() => {
                sn_playSound('win');
                sn_showScreen('sn-screen-result');
            }, 1500);
        }

} else {
        // จับคู่ผิด
        sn_playSound('wrong');
        Swal.fire({
            title: 'อ๊ะ! ยังไม่ใช่นะ',
            text: 'ลองอ่านสถานการณ์แล้วจับคู่อีกครั้ง',
            icon: 'error',
            timer: 1500,
            showConfirmButton: false,
            customClass: { popup: 'sn-swal-popup sn-swal-error', title: 'sn-swal-title' }
        });
    }
}
</script>