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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="sys-wrapper" id="sys-game-container">
    
    <div id="sys-screen-start" class="sys-screen active">
        <div style="font-size: 70px; margin-bottom: 15px; text-shadow: 0 0 30px #00d2fc;">💠</div>
        <h1 class="sys-title">5 Elements System Core</h1>
        <p style="color: #00d2fc; font-weight: 700; font-size: 20px; margin-bottom: 25px; margin-top: 0;">ภารกิจคัดแยกแกนกลางระบบ</p>
        
        <div class="sys-intro-box">
            <p style="color: #00ff87; font-weight: 900; margin-bottom: 10px;">> กติกาการเล่น:</p>
            <p style="font-size: 16px; margin-bottom: 8px;">1. ดูคำศัพท์ที่ปรากฏตรงกลางหน้าจอ</p>
            <p style="font-size: 16px; margin-bottom: 8px;">2. กดปุ่มด้านล่างเพื่อจัดหมวดหมู่ให้ถูกต้อง</p>
            <p style="font-size: 16px; margin-bottom: 8px;">3. <strong>มีเวลา 60 วินาที!</strong> จัดเรียงให้ไวที่สุด</p>
            <p style="font-size: 16px; color: #ffde00; margin-bottom: 0;">ตอบถูก +100 | ตอบผิด -50</p>
        </div>
        
        <button class="sys-btn-action" onclick="sys_requestPlayerName()">เริ่มจัดหมวดหมู่ 🚀</button>
    </div>

<div id="sys-screen-game" class="sys-screen">
        <div class="sys-hud-bar">
            <div class="sys-hud-item">👤 <span id="sys-hud-name" style="color:#00d2fc;">Player</span></div>
            <div class="sys-hud-item sys-timer-wrap">⏱️ <span id="sys-time-display">60</span>s</div>
            <div class="sys-hud-item">SCORE: <span class="sys-score-display" id="sys-score-display">0</span></div>
        </div>

<div class="sys-item-display-container" id="sys-item-area">
            <div class="sys-core-item" id="sys-current-item">เตรียมพร้อม...</div>
        </div>

<div class="sys-sorting-grid">
            <button class="sys-sort-btn sys-btn-hw" onclick="sys_checkSort('hw')">
                <span class="sys-icon">🖥️</span>Hardware
            </button>
            <button class="sys-sort-btn sys-btn-sw" onclick="sys_checkSort('sw')">
                <span class="sys-icon">💽</span>Software
            </button>
            <button class="sys-sort-btn sys-btn-data" onclick="sys_checkSort('data')">
                <span class="sys-icon">📊</span>Data
            </button>
            <button class="sys-sort-btn sys-btn-ppl" onclick="sys_checkSort('ppl')">
                <span class="sys-icon">👤</span>Peopleware
            </button>
            <button class="sys-sort-btn sys-btn-proc" onclick="sys_checkSort('proc')">
                <span class="sys-icon">📋</span>Procedure
            </button>
        </div>
    </div>

<div id="sys-screen-result" class="sys-screen">
        <h1 class="sys-title" style="font-size: 45px; color: #ffde00;">TIME'S UP!</h1>
        <h2 style="color: #fff; margin-bottom: 20px; font-weight: 700; font-size: 24px;">การคัดแยกเสร็จสิ้น</h2>
        
        <div class="sys-result-box">
            <p style="font-size: 18px; color:#aaa; margin-bottom: 5px;">ชื่อผู้เล่น: <strong id="sys-result-name" style="color:#00d2fc; font-size: 22px;">-</strong></p>
            <p style="font-size: 20px; margin-top: 15px; color:#fff; margin-bottom: 5px;">คะแนนสุทธิ:</p>
            <p style="font-size: 60px; font-weight: 900; color: #ffde00; text-shadow: 0 0 20px #ffde00; margin: 5px 0;"><span id="sys-result-score">0</span></p>
            <div style="font-size: 22px; font-weight: 900; color: #00ff87; margin-top: 15px;" id="sys-result-rank">RANK: โหลดข้อมูล...</div>
        </div>

<button class="sys-btn-action" onclick="sys_resetGame()">เล่นใหม่อีกครั้ง 🔄</button>
    </div>

</div>

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

.sys-screen { 
        display: none; 
        text-align: center; 
        animation: sysZoomIn 0.3s ease-out forwards; 
        padding: 20px 10px; 
    }
    .sys-screen.active { display: block; }

@keyframes sysZoomIn {
        0% { opacity: 0; transform: scale(0.9); }
        100% { opacity: 1; transform: scale(1); }
    }

.sys-wrapper h1.sys-title { 
        font-size: 36px; 
        color: #fff; 
        margin-top: 0;
        margin-bottom: 10px; 
        font-weight: 900; 
        text-transform: uppercase; 
        text-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    }

.sys-wrapper p { margin-top: 0; }

/* General Button */
    .sys-btn-action {
        display: inline-block; 
        padding: 15px 40px; 
        font-size: 22px; 
        font-weight: 900;
        color: #1a1a2e; 
        background: linear-gradient(135deg, #00ff87, #60efff);
        border: none; 
        border-radius: 50px; 
        cursor: pointer;
        box-shadow: 0 6px 0 #00b35f, 0 10px 20px rgba(0, 255, 135, 0.4);
        transition: all 0.1s; 
        text-transform: uppercase; 
        margin-top: 20px;
        font-family: var(--font-main);
    }
    .sys-btn-action:hover { transform: translateY(2px); box-shadow: 0 4px 0 #00b35f, 0 5px 15px rgba(0, 255, 135, 0.4); }
    .sys-btn-action:active { transform: translateY(6px); box-shadow: none; }

.sys-intro-box {
        background: rgba(0,0,0,0.3); 
        padding: 20px; 
        border-radius: 15px; 
        text-align: left; 
        border: 2px dashed rgba(255,255,255,0.2); 
        max-width: 500px; 
        margin: 0 auto;
    }

/* HUD */
    .sys-hud-bar {
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        background: rgba(0,0,0,0.4); 
        padding: 10px 20px; 
        border-radius: 15px;
        margin-bottom: 20px; 
        border: 2px solid rgba(255,255,255,0.1);
    }
    .sys-hud-item { font-size: 18px; font-weight: 700; color: #fff; }
    .sys-score-display { font-size: 28px; color: var(--cat-data); text-shadow: 0 0 10px var(--cat-data); }
    .sys-timer-wrap { font-size: 24px; color: var(--danger); font-weight: 900; text-shadow: 0 0 10px var(--danger); display: flex; align-items: center; gap: 8px;}

/* Core Item Display */
    .sys-item-display-container {
        height: 200px; 
        display: flex; 
        justify-content: center; 
        align-items: center;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        margin-bottom: 30px; 
        position: relative;
    }
    .sys-core-item {
        background: #fff; 
        color: #1a1a2e; 
        padding: 25px 40px; 
        border-radius: 20px;
        font-size: 28px; 
        font-weight: 900; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        transform: scale(1); 
        transition: transform 0.1s; 
        z-index: 10;
        border: 4px solid #e0e0e0;
    }
    .sys-core-item.sys-pop { animation: sysPopItem 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @keyframes sysPopItem { 
        0% { transform: scale(0); opacity: 0; } 
        100% { transform: scale(1); opacity: 1; } 
    }

/* Floating Score Effect */
    .sys-floating-score {
        position: absolute; 
        font-size: 24px; 
        font-weight: 900; 
        pointer-events: none;
        animation: sysFloatUp 0.8s ease-out forwards; 
        z-index: 20;
    }
    @keyframes sysFloatUp { 
        0% { opacity: 1; transform: translateY(0) scale(1); } 
        100% { opacity: 0; transform: translateY(-50px) scale(1.5); } 
    }

/* Sorting Buttons Grid */
    .sys-sorting-grid { 
        display: grid; 
        grid-template-columns: repeat(5, 1fr); 
        gap: 15px; 
    }
    
    .sys-sort-btn {
        padding: 20px 10px; 
        border-radius: 15px; 
        border: none; 
        font-size: 16px; 
        font-weight: 800;
        cursor: pointer; 
        color: #1a1a2e; 
        transition: all 0.1s; 
        font-family: var(--font-main);
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        gap: 5px;
    }
    .sys-sort-btn .sys-icon { font-size: 32px; }
    
    .sys-btn-hw { background: var(--cat-hw); box-shadow: 0 6px 0 #0099b8; }
    .sys-btn-sw { background: var(--cat-sw); box-shadow: 0 6px 0 #7a25b3; color: #fff;}
    .sys-btn-data { background: var(--cat-data); box-shadow: 0 6px 0 #b39b00; }
    .sys-btn-ppl { background: var(--cat-ppl); box-shadow: 0 6px 0 #00b35f; }
    .sys-btn-proc { background: var(--cat-proc); box-shadow: 0 6px 0 #b34b00; color: #fff;}

.sys-sort-btn:active { transform: translateY(6px); box-shadow: none !important; }

.sys-result-box {
        background: rgba(0,0,0,0.5); 
        border: 3px solid var(--cat-sw); 
        padding: 30px; 
        border-radius: 20px; 
        margin-bottom: 25px;
    }

/* SweetAlert Custom */
    .swal-neon { 
        background: #16213e !important; 
        border: 3px solid #00d2fc !important; 
        color: #fff !important; 
        border-radius: 20px !important; 
        font-family: 'Prompt', sans-serif !important;
    }
    .swal-neon .swal2-title { color: #00d2fc !important; font-weight: 900; }
    .swal-neon .swal2-input { 
        background: #0f172a !important; 
        border: 2px solid #334155 !important; 
        color: #fff !important; 
        text-align: center; 
        font-size: 20px; 
        font-weight: bold;
        font-family: 'Prompt', sans-serif !important;
    }
    .swal-neon .swal2-input:focus { border-color: #00ff87 !important; }
    .swal-neon .swal2-confirm { 
        background: linear-gradient(135deg, #00ff87, #60efff) !important; 
        color: #1a1a2e !important; 
        border-radius: 50px !important; 
        font-weight: 900 !important; 
        font-family: 'Prompt', sans-serif !important;
    }

.sys-shake { animation: sysShake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
    @keyframes sysShake { 
        10%, 90% { transform: translate3d(-4px, 0, 0); } 
        20%, 80% { transform: translate3d(6px, 0, 0); } 
        30%, 50%, 70% { transform: translate3d(-8px, 0, 0); } 
        40%, 60% { transform: translate3d(8px, 0, 0); } 
    }

/* Mobile Responsive */
    @media (max-width: 768px) { 
        .sys-sorting-grid { grid-template-columns: repeat(3, 1fr); } 
        .sys-sorting-grid button:last-child { grid-column: span 3; }
        .sys-core-item { font-size: 22px; padding: 20px; }
        .sys-hud-bar { flex-direction: column; gap: 5px; }
    }
</style>

let sys_playerName = "";
    let sys_score = 0;
    let sys_timeRemaining = 60;
    let sys_gameTimer = null;
    let sys_currentItem = null;
    let sys_audioCtx = null;

function sys_initAudio() { 
        if (!sys_audioCtx) {
            sys_audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
        }
    }

function sys_playSound(type) {
        if (!sys_audioCtx) return;
        try {
            const osc = sys_audioCtx.createOscillator(), gain = sys_audioCtx.createGain();
            osc.connect(gain); gain.connect(sys_audioCtx.destination);
            const now = sys_audioCtx.currentTime;

if (type === 'pop') {
                osc.type = 'sine'; osc.frequency.setValueAtTime(600, now); osc.frequency.exponentialRampToValueAtTime(1200, 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 === 'zap') {
                osc.type = 'square'; osc.frequency.setValueAtTime(880, now); osc.frequency.setValueAtTime(1760, now + 0.1);
                gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
                osc.start(now); osc.stop(now + 0.2);
            } else if (type === 'error') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, now); osc.frequency.linearRampToValueAtTime(80, now + 0.3);
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
                osc.start(now); osc.stop(now + 0.3);
            } else if (type === 'win') {
                osc.type = 'triangle'; [523.25, 659.25, 783.99, 1046.50].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.2)));
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 1);
                osc.start(now); osc.stop(now + 1);
            }
        } catch (e) { console.error(e); }
    }

function sys_showScreen(id) {
        document.querySelectorAll('.sys-screen').forEach(s => s.classList.remove('active'));
        document.getElementById(id).classList.add('active');
    }

function sys_startGame() {
        sys_score = 0; 
        sys_timeRemaining = 60;
        document.getElementById('sys-hud-name').innerText = sys_playerName;
        document.getElementById('sys-score-display').innerText = sys_score;
        document.getElementById('sys-time-display').innerText = sys_timeRemaining;
        
        // Reset timer zoom effect if any
        document.getElementById('sys-time-display').parentElement.style.transform = "scale(1)";
        
        sys_showScreen('sys-screen-game');
        
        clearInterval(sys_gameTimer);
        sys_gameTimer = setInterval(() => {
            sys_timeRemaining--;
            document.getElementById('sys-time-display').innerText = sys_timeRemaining;
            
            if(sys_timeRemaining <= 10) {
                document.getElementById('sys-time-display').parentElement.style.transform = "scale(1.2)";
                document.getElementById('sys-time-display').parentElement.style.transition = "transform 0.3s";
            }
            if(sys_timeRemaining <= 0) sys_endGame();
        }, 1000);

sys_nextItem();
    }

function sys_nextItem() {
        sys_playSound('pop');
        const itemEl = document.getElementById('sys-current-item');
        itemEl.classList.remove('sys-pop');
        void itemEl.offsetWidth; // trigger reflow
        
        sys_currentItem = sys_db[Math.floor(Math.random() * sys_db.length)];
        itemEl.innerText = sys_currentItem.text;
        itemEl.classList.add('sys-pop');
    }

function sys_endGame() {
        clearInterval(sys_gameTimer);
        sys_playSound('win');
        document.getElementById('sys-result-name').innerText = sys_playerName;
        document.getElementById('sys-result-score').innerText = sys_score;
        
        let rank = sys_score >= 2000 ? "🌟 ปรมาจารย์ด้านระบบ" : sys_score >= 1000 ? "🔥 ผู้เชี่ยวชาญไอที" : "🛠️ นักคัดแยกฝึกหัด";
        document.getElementById('sys-result-rank').innerText = rank;
        
        sys_showScreen('sys-screen-result');
    }
    
    function sys_resetGame() {
        sys_showScreen('sys-screen-start');
    }
</script>