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

Back

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

Title

Description

Keyword

Detail (HTML Code)

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

/* =========================================
           2. SCREENS & ANIMATIONS
           ========================================= */
        .net-screen {
            display: none;
            padding: 40px 30px;
            min-height: 550px;
            animation: netFadeIn 0.5s ease;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

.net-screen.net-active {
            display: flex;
        }

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

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

/* =========================================
           3. TYPOGRAPHY
           ========================================= */
        .net-title {
            font-size: 36px;
            color: #00838F;
            font-weight: 800;
            margin-bottom: 10px;
        }

.net-subtitle {
            font-size: 20px;
            color: #00BFA5; /* Mint Green */
            font-weight: 600;
            margin-bottom: 25px;
        }

/* =========================================
           4. 3D BUTTONS & MICRO-INTERACTIONS
           ========================================= */
        .net-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 40px;
            font-size: 22px;
            font-weight: 800;
            color: #FFF;
            background-color: #26C6DA;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            box-shadow: 0 8px 0 #0097A7, 0 15px 20px rgba(0, 151, 167, 0.3);
            transition: all 0.1s ease;
            font-family: 'Prompt', sans-serif;
            margin-top: 20px;
            outline: none;
        }

.net-btn:hover {
            background-color: #4DD0E1;
        }

.net-btn:active {
            transform: translateY(8px);
            box-shadow: 0 0 0 #0097A7, 0 4px 5px rgba(0, 151, 167, 0.2);
        }

.net-btn-green {
            background-color: #4DB6AC;
            box-shadow: 0 8px 0 #00897B, 0 15px 20px rgba(0, 137, 123, 0.3);
        }
        .net-btn-green:hover { background-color: #80CBC4; }
        .net-btn-green:active {
            transform: translateY(8px);
            box-shadow: 0 0 0 #00897B, 0 4px 5px rgba(0, 137, 123, 0.2);
        }

/* =========================================
           5. GAME INTERFACE (HEADER, CARD, DROP ZONES)
           ========================================= */
        .net-header {
            width: 100%;
            background-color: #FFF;
            padding: 15px 25px;
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.05);
            border: 3px solid #B2EBF2;
        }

.net-player-info {
            font-size: 18px;
            font-weight: 800;
            color: #00838F;
        }

.net-progress {
            font-size: 18px;
            font-weight: 800;
            color: #00BFA5;
            background: #E0F2F1;
            padding: 5px 15px;
            border-radius: 12px;
        }

/* Draggable Card */
        .net-card-container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            min-height: 120px;
        }

.net-card {
            background-color: #FFF;
            border: 4px solid #4DD0E1;
            padding: 25px;
            border-radius: 20px;
            font-size: 20px;
            font-weight: 600;
            color: #006064;
            cursor: grab;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 0 #26C6DA, 0 15px 20px rgba(0,0,0,0.1);
            transition: transform 0.1s;
            user-select: none;
            touch-action: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.net-card:active {
            cursor: grabbing;
        }

.net-card.net-dragging {
            opacity: 0.6;
            transform: scale(1.05);
        }

/* Drop Zones (Baskets) */
        .net-zones {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
        }

@media (min-width: 600px) {
            .net-zones {
                flex-direction: row;
                justify-content: center;
            }
        }

.net-zone {
            flex: 1;
            border-radius: 20px;
            padding: 30px 20px;
            font-size: 24px;
            font-weight: 800;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            border: 4px dashed;
        }

.net-zone-good {
            background-color: #E8F5E9;
            border-color: #81C784;
            color: #2E7D32;
        }
        .net-zone-good.net-drag-over {
            background-color: #C8E6C9;
            border-style: solid;
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(76, 175, 80, 0.2);
        }

.net-zone-bad {
            background-color: #FFEBEE;
            border-color: #E57373;
            color: #C62828;
        }
        .net-zone-bad.net-drag-over {
            background-color: #FFCDD2;
            border-style: solid;
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(244, 67, 54, 0.2);
        }

.net-zone-icon {
            font-size: 50px;
            margin-bottom: 10px;
            pointer-events: none;
        }

.net-zone-text {
            pointer-events: none;
        }

/* Ghost element for touch dragging */
        .net-touch-ghost {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.9;
            box-shadow: 0 15px 25px rgba(0,0,0,0.3);
            transform: translate(-50%, -50%);
        }

/* =========================================
           6. SWEETALERT CUSTOMIZATION
           ========================================= */
        .net-swal-popup {
            font-family: 'Prompt', sans-serif !important;
            border-radius: 24px !important;
            border: 4px solid #80DEEA !important;
        }
        .net-swal-title { color: #00838F !important; font-weight: 800 !important; }
        .net-swal-confirm { 
            background-color: #26C6DA !important; 
            border-radius: 15px !important; 
            font-weight: 800 !important;
            box-shadow: 0 6px 0 #0097A7 !important;
        }
        .net-swal-confirm:active { transform: translateY(6px) !important; box-shadow: none !important; }
        .net-swal-input {
            border-radius: 12px !important;
            text-align: center !important;
            font-size: 18px !important;
        }

</style>

<div class="net-wrapper" id="net-game-container">
    
    <div id="net-screen-start" class="net-screen net-active">
        <div style="font-size: 80px; margin-bottom: 10px; animation: netPop 2s infinite;">🌟📱🌟</div>
        <h1 class="net-title">Netiquette Hero</h1>
        <h2 class="net-subtitle">ฮีโร่มารยาทชาวเน็ต!</h2>
        
        <div style="background: #FFF; padding: 20px; border-radius: 20px; border: 3px dashed #4DD0E1; max-width: 500px; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
            <strong style="color: #00838F; font-size: 18px;">💡 กติกาการเล่น:</strong>
            <ul style="margin-top: 10px; color: #006064; font-size: 16px; line-height: 1.6; padding-left: 20px;">
                <li>ใช้เมาส์หรือนิ้ว <strong>"ลาก"</strong> กล่องพฤติกรรมที่ปรากฏขึ้นมา</li>
                <li>นำไป <strong>"วาง"</strong> ในตะกร้า "ควรทำ ✅" หรือ "ไม่ควรทำ ❌" ให้ถูกต้อง</li>
                <li>พิชิตภารกิจให้ครบทั้ง 10 ข้อ เพื่อเป็นฮีโร่ไซเบอร์! (ไม่ต้องจับเวลา)</li>
            </ul>
        </div>
        
        <button class="net-btn" id="net-btn-start">กดเพื่อเริ่มเล่นเลย! 🚀</button>
    </div>

<h3 style="color: #00838F; margin-top: 0;">ลากพฤติกรรมนี้ ไปใส่กล่องให้ถูกต้อง! 👇</h3>

<div class="net-zones">
            <div class="net-zone net-zone-good" data-type="good">
                <div class="net-zone-icon">✅</div>
                <div class="net-zone-text">พฤติกรรมน่ารัก<br>(ควรทำ)</div>
            </div>
            <div class="net-zone net-zone-bad" data-type="bad">
                <div class="net-zone-icon">❌</div>
                <div class="net-zone-text">พฤติกรรมไม่น่ารัก<br>(ไม่ควรทำ)</div>
            </div>
        </div>
    </div>

<div id="net-screen-result" class="net-screen">
        <div style="font-size: 90px; margin-bottom: 10px;">👑✨</div>
        <h1 class="net-title" style="font-size: 40px;">ยอดเยี่ยมมาก!</h1>
        <h2 class="net-subtitle" style="color: #00838F; font-size: 24px;">ฮีโร่ <span id="net-res-name"></span></h2>
        
        <div style="background: #FFF; padding: 25px; border-radius: 20px; border: 3px solid #4DB6AC; max-width: 500px; margin-bottom: 20px;">
            <p style="font-size: 18px; color: #006064; margin: 0; line-height: 1.6;">
                หนูสามารถแยกแยะพฤติกรรมบนโลกออนไลน์ได้อย่างถูกต้องครบทั้ง 10 ข้อ! อย่าลืมนำ "5 กฎเหล็กไซเบอร์" ไปใช้ในชีวิตจริง เพื่อสร้างสังคมออนไลน์ที่น่าอยู่ด้วยนะ!
            </p>
        </div>
        
        <button class="net-btn net-btn-green" id="net-btn-restart">เล่นอีกครั้ง 🔄</button>
    </div>

</div>

let net_playerName = "";
    let net_currentQuestionIndex = 0;
    let net_gameList = [];
    let net_audioCtx = null;
    
    // Elements
    let net_draggableCard = null;
    let net_zones = null;
    let net_touchGhost = null;

/* =========================================
       2. WEB AUDIO API (SOUND EFFECTS)
       ========================================= */
    function net_initAudio() {
        if (!net_audioCtx) {
            net_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (net_audioCtx.state === 'suspended') {
            net_audioCtx.resume();
        }
    }

/* =========================================
       3. CORE LOGIC & INITIALIZATION
       ========================================= */
    document.addEventListener('DOMContentLoaded', () => {
        // Register Event Listeners (No inline events)
        document.getElementById('net-btn-start').addEventListener('click', net_promptName);
        document.getElementById('net-btn-restart').addEventListener('click', net_startGame);
        
        net_draggableCard = document.getElementById('net-draggable');
        net_zones = document.querySelectorAll('.net-zone');

// Mouse Drag Events
        net_draggableCard.addEventListener('dragstart', net_handleDragStart);
        net_draggableCard.addEventListener('dragend', net_handleDragEnd);

net_zones.forEach(zone => {
            zone.addEventListener('dragover', net_handleDragOver);
            zone.addEventListener('dragleave', net_handleDragLeave);
            zone.addEventListener('drop', net_handleDrop);
        });

// Touch Drag Events (Mobile)
        net_draggableCard.addEventListener('touchstart', net_handleTouchStart, {passive: false});
        net_draggableCard.addEventListener('touchmove', net_handleTouchMove, {passive: false});
        net_draggableCard.addEventListener('touchend', net_handleTouchEnd);
    });

function net_showScreen(screenId) {
        document.querySelectorAll('.net-screen').forEach(s => s.classList.remove('net-active'));
        document.getElementById(screenId).classList.add('net-active');
    }

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

function net_startGame() {
        net_playSound('click');
        net_gameList = net_shuffle([...net_questionsData]);
        net_currentQuestionIndex = 0;
        
        document.getElementById('net-ui-name').innerText = net_playerName;
        document.getElementById('net-res-name').innerText = net_playerName;
        
        net_updateUI();
        net_showScreen('net-screen-game');
    }

function net_checkAnswer(selectedType) {
        const correctType = net_gameList[net_currentQuestionIndex].type;
        
        // ซ่อนการ์ดชั่วคราวขณะแสดงแจ้งเตือน
        net_draggableCard.style.visibility = 'hidden';

if (selectedType === correctType) {
            net_playSound('correct');
            Swal.fire({
                title: 'ถูกต้องเก่งมาก! 🌟',
                text: 'นี่คือพฤติกรรมที่' + (correctType === 'good' ? 'ควรทำ' : 'ไม่ควรทำ'),
                icon: 'success',
                timer: 1500,
                showConfirmButton: false,
                customClass: { popup: 'net-swal-popup', title: 'net-swal-title' }
            }).then(() => {
                net_currentQuestionIndex++;
                net_updateUI();
            });
        } else {
            net_playSound('wrong');
            Swal.fire({
                title: 'อ๊ะ! ลองคิดดูใหม่นะ 🤔',
                icon: 'error',
                timer: 1500,
                showConfirmButton: false,
                customClass: { popup: 'net-swal-popup', title: 'net-swal-title' }
            }).then(() => {
                // คืนค่าการ์ดกลับมาให้ลากใหม่
                net_draggableCard.style.visibility = 'visible';
            });
        }
    }

/* =========================================
       4. DRAG AND DROP (MOUSE)
       ========================================= */
    function net_handleDragStart(e) {
        net_playSound('drag');
        setTimeout(() => this.classList.add('net-dragging'), 0);
    }

function net_handleDragEnd(e) {
        this.classList.remove('net-dragging');
    }

function net_handleDragOver(e) {
        e.preventDefault();
        this.classList.add('net-drag-over');
    }

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

function net_handleDrop(e) {
        e.preventDefault();
        this.classList.remove('net-drag-over');
        net_checkAnswer(this.dataset.type);
    }

/* =========================================
       5. DRAG AND DROP (TOUCH/MOBILE)
       ========================================= */
    function net_handleTouchStart(e) {
        net_playSound('drag');
        net_draggableCard.classList.add('net-dragging');

// สร้าง Ghost element
        net_touchGhost = net_draggableCard.cloneNode(true);
        net_touchGhost.classList.add('net-touch-ghost');
        net_touchGhost.style.width = net_draggableCard.offsetWidth + 'px';
        document.body.appendChild(net_touchGhost);

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

function net_handleTouchMove(e) {
        if (!net_touchGhost) return;
        e.preventDefault(); // กันจอกระตุก
        net_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }

function net_handleTouchEnd(e) {
        if (!net_touchGhost) return;
        
        net_draggableCard.classList.remove('net-dragging');
        net_touchGhost.style.display = 'none'; // ซ่อนเพื่อทะลุไปจับ Element ด้านล่าง
        
        const changedTouch = e.changedTouches[0];
        const elemBelow = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
        
        net_touchGhost.remove();
        net_touchGhost = null;

const zone = elemBelow ? elemBelow.closest('.net-zone') : null;
        if (zone) {
            net_checkAnswer(zone.dataset.type);
        }
    }

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

</script>