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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="dn-wrapper" id="dn-game-container">
    
    <div id="dn-screen-start" class="dn-screen dn-active">
        <div class="dn-icon-large" style="animation: dnFloat 2s ease-in-out infinite;">⚔️📊</div>
        <h1 class="dn-title">DATA NINJA</h1>
        <p class="dn-subtitle">ฟันฉับจับข้อมูล (Google Sheets)</p>
        
        <div class="dn-rules-box">
            <h3 style="color: #0F9D58; margin-top: 0; font-size: 18px;">📋 กติกานินจาข้อมูล</h3>
            <ul style="margin: 0; font-size: 14px; color: #333; line-height: 1.6; text-align: left; padding-left: 20px;">
                <li>อ่านเป้าหมายด้านบนให้ดี ว่าด่านนี้ต้องฟันคำศัพท์หมวดไหน</li>
                <li><strong>คลิก หรือ แตะ</strong> เฉพาะกล่องคำศัพท์ที่ถูกต้องที่ลอยขึ้นมา</li>
                <li>เวลา <strong>30 วินาที/ด่าน</strong> มีหัวใจ <strong>5 ดวง</strong></li>
                <li>ถ้าฟันโดนคำศัพท์ที่ผิด จะถูกหักหัวใจ 1 ดวง!</li>
            </ul>
        </div>
        
        <button class="dn-btn dn-btn-primary" onclick="dn_initGame()">เริ่มการฝึกฝน 🚀</button>
    </div>

<div id="dn-screen-game" class="dn-screen">
        <div class="dn-hud">
            <div class="dn-hud-item">
                <span class="dn-hud-label">คะแนน</span><br>
                <strong id="dn-ui-score" style="color: #0F9D58; font-size: 20px;">0</strong>
            </div>
            <div class="dn-hud-item" style="text-align: center;">
                <span class="dn-hud-label">เวลา</span><br>
                <strong id="dn-ui-time" style="color: #EA4335; font-size: 20px;">30</strong><span style="font-size: 12px;">s</span>
            </div>
            <div class="dn-hud-item" style="text-align: right;">
                <span class="dn-hud-label">พลังชีวิต</span><br>
                <span id="dn-ui-lives" style="font-size: 16px;">❤️❤️❤️❤️❤️</span>
            </div>
        </div>

<div class="dn-mission-box">
            <div style="font-size: 12px; color: #5F6368; font-weight: bold;">ภารกิจปัจจุบัน: ด่าน <span id="dn-ui-level">1</span>/3</div>
            <div id="dn-ui-mission" style="font-size: 18px; color: #0F9D58; font-weight: 800;">ฟันเฉพาะ...</div>
        </div>

<div id="dn-screen-result" class="dn-screen">
        <div class="dn-icon-large">🏆✨</div>
        <h1 class="dn-title" id="dn-result-title" style="color: #0F9D58;">จบการฝึกฝน!</h1>
        <p class="dn-subtitle" id="dn-result-desc">สุดยอดนินจาข้อมูล</p>
        
        <div class="dn-rules-box" style="text-align: center; border-color: #FBBC04;">
            <p style="margin: 0; font-size: 16px; color: #5F6368;">คะแนนรวมของคุณ</p>
            <h2 id="dn-result-score" style="font-size: 45px; color: #0F9D58; margin: 10px 0;">0</h2>
        </div>
        
        <button class="dn-btn dn-btn-primary" onclick="dn_restartGame()">เล่นอีกครั้ง 🔄</button>
    </div>

</div>

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

.dn-screen { display: none; padding: 30px 20px; animation: dnFadeIn 0.3s ease-out forwards; }
    .dn-screen.dn-active { display: block; }

@keyframes dnFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    @keyframes dnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.dn-icon-large { font-size: 60px; margin-bottom: 10px; }
    .dn-title { font-size: 32px; color: #0F9D58; margin: 0 0 5px 0; font-weight: 800; letter-spacing: 1px; }
    .dn-subtitle { font-size: 16px; color: #5F6368; font-weight: 600; margin: 0 0 20px 0; }

.dn-rules-box {
        background: #FFFFFF; border: 2px dashed #0F9D58;
        padding: 20px; border-radius: 15px; margin: 0 auto 25px auto; max-width: 450px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

/* Buttons */
    .dn-btn {
        display: inline-block; padding: 15px 40px; font-size: 18px; font-weight: 800;
        border: none; border-radius: 50px; cursor: pointer; transition: all 0.1s;
        font-family: 'Prompt', sans-serif; text-transform: uppercase;
    }
    .dn-btn-primary {
        background: #0F9D58; color: #FFFFFF;
        box-shadow: 0 6px 0 #0B8043, 0 8px 15px rgba(15, 157, 88, 0.3);
    }
    .dn-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #0B8043; }

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

.dn-mission-box {
        background: #E8F0FE; padding: 15px; border-radius: 12px; margin-bottom: 15px;
        border-left: 5px solid #1A73E8;
    }

/* Game Area (Ninja Physics) */
    .dn-game-area {
        position: relative; width: 100%; height: 350px; 
        background: #FFFFFF; border: 2px solid #DADCE0; border-radius: 15px;
        overflow: hidden; background-image: radial-gradient(#E8F5E9 1px, transparent 1px);
        background-size: 20px 20px; cursor: crosshair;
    }

/* Floating Items */
    .dn-item {
        position: absolute; padding: 10px 15px; font-size: 16px; font-weight: bold;
        background: #FFFFFF; border: 2px solid #0F9D58; border-radius: 8px;
        color: #0F9D58; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        cursor: pointer; transform-origin: center;
        display: flex; align-items: center; justify-content: center;
        /* จะถูกควบคุม X, Y, Rotation ด้วย JS */
    }

/* Visual effect when sliced */
    .dn-item.dn-sliced-correct {
        background: #34A853; color: #FFF; border-color: #34A853;
        transform: scale(1.2) rotate(10deg) !important; opacity: 0; transition: all 0.2s ease-out;
    }
    .dn-item.dn-sliced-wrong {
        background: #EA4335; color: #FFF; border-color: #EA4335;
        transform: scale(0.8) rotate(-10deg) !important; opacity: 0; transition: all 0.2s ease-out;
    }

/* SweetAlert Override */
    .dn-swal-popup { border: 2px solid #0F9D58 !important; border-radius: 15px !important; font-family: 'Prompt', sans-serif !important; }
    .dn-swal-confirm { background: #0F9D58 !important; color: #FFF !important; font-weight: bold !important; border-radius: 50px !important; box-shadow: 0 4px 0 #0B8043 !important; }

@media (max-width: 500px) {
        .dn-title { font-size: 26px; }
        .dn-item { font-size: 13px; padding: 8px 10px; }
        .dn-game-area { height: 300px; }
        .dn-hud { padding: 10px; }
    }
</style>

let dn_score = 0;
    let dn_lives = 5;
    let dn_currentLevel = 0;
    let dn_timeLeft = 30;
    let dn_timerInterval = null;
    let dn_spawnInterval = null;
    let dn_animFrame = null;
    let dn_audioCtx = null;
    let dn_activeItems = []; // เก็บ object ของกล่องที่ลอยอยู่
    let dn_gameArea = null;

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

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

if (type === 'click') {
                osc.type = 'sine'; osc.frequency.setValueAtTime(800, now); osc.frequency.exponentialRampToValueAtTime(1200, 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 === 'slice-correct') {
                osc.type = 'square'; osc.frequency.setValueAtTime(1000, now); osc.frequency.exponentialRampToValueAtTime(1500, now + 0.1);
                gain.gain.setValueAtTime(0.15, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now); osc.stop(now + 0.1);
            } else if (type === 'slice-wrong') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, now); osc.frequency.linearRampToValueAtTime(100, now + 0.3);
                gain.gain.setValueAtTime(0.2, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.3);
                osc.start(now); osc.stop(now + 0.3);
            } else if (type === 'level-up') {
                osc.type = 'sine'; [523.25, 659.25, 783.99, 1046.50].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1)));
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4);
                osc.start(now); osc.stop(now + 0.4);
            }
        } catch (e) { console.error("Audio Error:", e); }
    }

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

/* --- Game Logic --- */
    function dn_initGame() {
        dn_initAudio(); dn_playSound('click');
        dn_score = 0;
        dn_lives = 5;
        dn_currentLevel = 0;
        dn_gameArea = document.getElementById('dn-game-area');
        
        document.getElementById('dn-ui-score').innerText = dn_score;
        dn_updateLives();
        
        dn_startLevel();
        dn_showScreen('dn-screen-game');
    }

function dn_updateLives() {
        let hearts = "";
        for(let i=0; i<5; i++) hearts += (i < dn_lives) ? "❤️" : "🖤";
        document.getElementById('dn-ui-lives').innerText = hearts;
    }

function dn_startLevel() {
        const levelData = dn_levelsData[dn_currentLevel];
        dn_timeLeft = 30;
        
        document.getElementById('dn-ui-time').innerText = dn_timeLeft;
        document.getElementById('dn-ui-level').innerText = dn_currentLevel + 1;
        document.getElementById('dn-ui-mission').innerText = levelData.mission;

// Clear area
        dn_gameArea.innerHTML = '';
        dn_activeItems = [];
        cancelAnimationFrame(dn_animFrame);
        clearInterval(dn_timerInterval);
        clearInterval(dn_spawnInterval);

// Start loops
        dn_timerInterval = setInterval(dn_gameTimer, 1000);
        let spawnRate = 800 - (dn_currentLevel * 150); // เร็วขึ้นตามด่าน
        dn_spawnInterval = setInterval(dn_spawnItem, spawnRate);
        dn_animFrame = requestAnimationFrame(dn_physicsLoop);
    }

function dn_gameTimer() {
        dn_timeLeft--;
        document.getElementById('dn-ui-time').innerText = dn_timeLeft;
        
        if (dn_timeLeft <= 0) {
            dn_endLevel();
        }
    }

/* --- Engine (Physics & Spawning) --- */
    function dn_spawnItem() {
        const levelData = dn_levelsData[dn_currentLevel];
        
        // สุ่มว่าเป็นข้อถูกหรือข้อผิด (สัดส่วน 50:50)
        let isCorrect = Math.random() > 0.5;
        let wordList = isCorrect ? levelData.correct : levelData.wrong;
        let word = wordList[Math.floor(Math.random() * wordList.length)];

// สร้าง DOM Element
        const el = document.createElement('div');
        el.className = 'dn-item';
        el.innerText = word;
        
        // การตั้งค่า Physics
        let areaWidth = dn_gameArea.clientWidth;
        let areaHeight = dn_gameArea.clientHeight;
        
        // สุ่มจุดเริ่ม X ให้อยู่ในช่วง 10% ถึง 90% ของความกว้าง
        let startX = (areaWidth * 0.1) + (Math.random() * (areaWidth * 0.8));
        
        let itemObj = {
            el: el,
            isCorrect: isCorrect,
            sliced: false,
            x: startX,
            y: areaHeight, // เริ่มจากขอบล่าง
            vx: (Math.random() - 0.5) * 4, // ความเร็วแกน X (โยกซ้ายขวา)
            vy: -10 - Math.random() * 5,   // ความเร็วแกน Y (เด้งขึ้น)
            rot: 0,
            vrot: (Math.random() - 0.5) * 10 // ความเร็วหมุน
        };

// Event การฟัน (ใช้ onpointerdown ครอบคลุมทั้งคลิกและทัช)
        el.onpointerdown = (e) => {
            e.preventDefault(); // กันลากคลุม
            dn_sliceItem(itemObj);
        };

dn_activeItems.push(itemObj);
        dn_gameArea.appendChild(el);
    }

function dn_physicsLoop() {
        let areaHeight = dn_gameArea.clientHeight;
        const gravity = 0.3; // แรงโน้มถ่วง

for (let i = dn_activeItems.length - 1; i >= 0; i--) {
            let item = dn_activeItems[i];
            
            if (item.sliced) continue; // ถ้าฟันแล้วปล่อยให้ CSS animation จัดการและไม่ต้องคำนวณฟิสิกส์

item.vy += gravity;
            item.x += item.vx;
            item.y += item.vy;
            item.rot += item.vrot;

// อัปเดต DOM
            item.el.style.transform = `translate(${item.x}px, ${item.y}px) rotate(${item.rot}deg)`;

// ลบออกถ้าตกขอบล่าง
            if (item.y > areaHeight + 50) {
                item.el.remove();
                dn_activeItems.splice(i, 1);
            }
        }
        
        dn_animFrame = requestAnimationFrame(dn_physicsLoop);
    }

function dn_sliceItem(item) {
        if (item.sliced) return;
        item.sliced = true;

if (item.isCorrect) {
            dn_playSound('slice-correct');
            item.el.classList.add('dn-sliced-correct');
            dn_score += 10;
            document.getElementById('dn-ui-score').innerText = dn_score;
        } else {
            dn_playSound('slice-wrong');
            item.el.classList.add('dn-sliced-wrong');
            dn_lives--;
            dn_updateLives();
            
            if (dn_lives <= 0) {
                setTimeout(() => dn_gameOver(false), 300);
            }
        }

// ลบ DOM หลังจากเล่น CSS Effect จบ
        setTimeout(() => {
            if (item.el && item.el.parentNode) {
                item.el.remove();
            }
        }, 200);
    }

/* --- Level Control & Game Over --- */
    function dn_endLevel() {
        clearInterval(dn_timerInterval);
        clearInterval(dn_spawnInterval);
        cancelAnimationFrame(dn_animFrame);
        dn_gameArea.innerHTML = '';
        dn_activeItems = [];

dn_currentLevel++;
        if (dn_currentLevel < dn_levelsData.length) {
            dn_playSound('level-up');
            Swal.fire({
                title: 'สำเร็จ!', text: 'เตรียมพร้อมสำหรับภารกิจต่อไป', icon: 'success',
                timer: 2000, showConfirmButton: false, customClass: { popup: 'dn-swal-popup' }
            }).then(() => {
                dn_startLevel();
            });
        } else {
            dn_gameOver(true);
        }
    }

function dn_restartGame() {
        dn_playSound('click');
        dn_showScreen('dn-screen-start');
    }
</script>