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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="wsst-claw-wrapper">
    <div class="game-wrapper">
        <div id="screen-start" class="game-screen active">
            <div class="start-banner">
                <h1>🌐 ตู้คีบคำศัพท์ไซเบอร์</h1>
                <p>ตะลุยเครือข่ายอินเทอร์เน็ต ป.5</p>
            </div>
            <div class="start-intro-box">
                <p><strong>กติกาการเล่นตู้คีบ:</strong></p>
                <p>1. อ่านคำถามภารกิจด้านบนให้เข้าใจ</p>
                <p>2. <strong>คลิกเลือกแคปซูล</strong> ที่มีคำตอบถูกต้องที่สุดเพื่อให้ที่คีบจับขึ้นมา</p>
                <p>3. มีภารกิจทั้งหมด 10 ข้อ (ข้อละ 10 คะแนน) เวลาข้อละ 10 วินาที</p>
                <p>4. พลังชีวิต 3 หัวใจ 🧡 ระวังคีบผิดลูกล่ะ!</p>
            </div>
            <button class="btn-3d" onclick="startClawGame()">🕹️ หยอดเหรียญเริ่มเกม</button>
        </div>

<div id="screen-game" class="game-screen">
            <div class="hud-bar">
                <div class="hud-item" style="color: #E65100;">ภารกิจ: <span id="hud-mission">1/10</span></div>
                <div class="hud-item">🏆 <span id="hud-score" style="color:#4CAF50; font-size:22px;">0</span>/100</div>
                <div class="hud-item">🧡 <span id="hud-hearts">🧡🧡🧡</span></div>
            </div>

<div class="question-box" id="current-question">โหลดข้อมูลภารกิจ...</div>
            <div class="progress-container"><div class="progress-bar" id="timer-bar"></div></div>

<div id="screen-result" class="game-screen">
            <h1>🎉 สรุปผลภารกิจ! 🎉</h1>
            <div class="result-box">
                <p style="font-size: 20px; color:#555; margin-bottom: 10px;">คะแนนที่ทำได้</p>
                <p style="font-size: 50px; font-weight: 800; color: #4CAF50; margin: 0; line-height: 1;"><span id="result-score">0</span></p>
                <p style="font-size: 20px; color: #0D47A1; margin-top: 5px; font-weight: bold;">จาก 100 คะแนนเต็ม</p>
                <div style="font-size: 22px; font-weight: 800; color: #E65100; margin-top: 20px;" id="result-rank">ประเมินผล: -</div>
            </div>
            <button class="btn-3d" onclick="resetClawGame()">🔄 เล่นใหม่อีกครั้ง</button>
        </div>
    </div>
</div>

let currentMissionIdx=0, score=0, hearts=3, gameTimer=null, timeRemaining=100, isClawing=false;
    let audioCtx=null;

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

function startClawGame() { 
        initAudio(); playClawSound('start');
        score=0; hearts=3; currentMissionIdx=0; isClawing=false; 
        document.getElementById('hud-score').innerText = score; 
        updateHeartsUI(); 
        showScreen('screen-game'); 
        loadMission(); 
    }

function updateHeartsUI() { 
        document.getElementById('hud-hearts').innerHTML = Array.from({length: 3}, (_, i) => i < hearts ? "🧡" : "🖤").join(''); 
    }

function loadMission() {
        if (currentMissionIdx >= questionPool.length) return endClawGame();
        isClawing = false;
        
        document.getElementById('hud-mission').innerText = `${currentMissionIdx + 1}/10`;
        const qData = questionPool[currentMissionIdx];
        document.getElementById('current-question').innerText = qData.q;
        
        const claw = document.getElementById('the-claw');
        claw.style.top = '-20px'; claw.style.left = '50%'; claw.innerText = '🏗️';

function dropClaw(index, selectedText, correctText) {
        if (isClawing) return;
        isClawing = true; clearInterval(gameTimer); playClawSound('claw');

function nextMission() { hearts <= 0 ? endClawGame() : (currentMissionIdx++, loadMission()); }