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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="claw-wrapper" id="claw-game-container">
    
    <div id="claw-screen-start" class="claw-screen claw-active">
        <div class="claw-neon-icon">🕹️</div>
        <h1 class="claw-title">THE CLAW: <br>REPORT MASTER</h1>
        <p class="claw-subtitle">ภารกิจคีบข้อมูลวิเศษ</p>
        
        <div class="claw-rules-box">
            <h3 style="color: #00FFFF; margin-top: 0; font-family: 'Press Start 2P', 'Prompt', cursive; font-size: 14px;">INSERT COIN TO PLAY</h3>
            <p style="margin: 0; font-size: 15px; color: #FFF; line-height: 1.6;">
                ตู้คีบอาร์เคดนี้เต็มไปด้วยความรู้! <br>อ่านคำถามให้ดี แล้วกะจังหวะกดปุ่ม <strong>"คีบเลย!"</strong> ให้ตรงกับไอเทมคำตอบที่ถูกต้อง คุณมีพลังชีวิต ❤️ 3 ดวง หากพร้อมแล้วลุยเลย!
            </p>
        </div>
        
        <button class="claw-btn claw-btn-start" onclick="claw_initGame()">START GAME</button>
    </div>

<div id="claw-screen-game" class="claw-screen">
        <div class="claw-hud">
            <div>ด่าน: <span id="claw-ui-level" style="color: #FF007F;">1/5</span></div>
            <div style="font-family: 'Press Start 2P', cursive; font-size: 12px; color: #FFFF00;">SCORE: <span id="claw-ui-score">0</span></div>
            <div><span id="claw-ui-lives" style="letter-spacing: 2px;">❤️❤️❤️</span></div>
        </div>

<div class="claw-question-box">
            <div style="font-size: 12px; color: #00FFFF; font-weight: bold; margin-bottom: 5px;">QUESTION:</div>
            <div id="claw-question-text" style="font-size: 16px; color: #FFF; font-weight: 600;">โหลดคำถาม...</div>
        </div>

<button class="claw-btn claw-btn-action" id="claw-btn-grab" onclick="claw_grabItem()">คีบเลย! (GRAB)</button>
    </div>

<div id="claw-screen-result" class="claw-screen">
        <div class="claw-neon-icon" style="animation: clawPulse 1s infinite;">🏆</div>
        <h1 class="claw-title" id="claw-result-title" style="color: #FFFF00;">GAME OVER</h1>
        
        <div class="claw-rules-box" style="text-align: center; margin-top: 20px;">
            <p style="margin: 0; font-size: 16px; color: #00FFFF;">YOUR SCORE</p>
            <h2 id="claw-result-score" style="color: #FF007F; font-size: 40px; margin: 10px 0; font-family: 'Press Start 2P', cursive;">0</h2>
            <p id="claw-result-msg" style="margin: 0; font-size: 14px; color: #FFF;">พยายามได้ดีมาก!</p>
        </div>
        
        <button class="claw-btn claw-btn-start" onclick="claw_restartGame()">PLAY AGAIN</button>
    </div>

</div>

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

.claw-screen { display: none; padding: 30px 20px; animation: clawFadeIn 0.5s ease-out; }
    .claw-screen.claw-active { display: block; }

@keyframes clawFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    @keyframes clawPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px #FF007F); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 20px #FF007F); } }

.claw-neon-icon { 
        font-size: 60px; margin-bottom: 15px; 
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }
    
    .claw-title { 
        font-family: 'Press Start 2P', 'Prompt', cursive; 
        font-size: 24px; color: #FF007F; margin: 0 0 10px 0; 
        text-shadow: 2px 2px 0px #00FFFF, -2px -2px 0px #7000FF; 
        line-height: 1.4;
    }
    
    .claw-subtitle { font-size: 16px; color: #00FFFF; font-weight: 600; margin: 0 0 25px 0; letter-spacing: 1px; }

.claw-rules-box {
        background: rgba(20, 0, 40, 0.8); border: 2px solid #FF007F;
        padding: 20px; border-radius: 12px; margin: 0 auto 25px auto; max-width: 450px;
        box-shadow: inset 0 0 15px rgba(255, 0, 127, 0.3);
    }

/* Buttons */
    .claw-btn {
        display: inline-block; padding: 15px 30px; 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;
        position: relative; overflow: hidden;
    }
    .claw-btn-start {
        background: #FFFF00; color: #000;
        box-shadow: 0 6px 0 #B2B200, 0 0 15px rgba(255, 255, 0, 0.5);
    }
    .claw-btn-start:active { transform: translateY(6px); box-shadow: 0 0px 0 #B2B200; }

.claw-btn-action {
        background: #FF007F; color: #FFF; width: 100%; max-width: 300px;
        box-shadow: 0 8px 0 #99004C, 0 0 20px rgba(255, 0, 127, 0.6);
        font-size: 20px; margin-top: 15px; border: 2px solid #FFA6D9;
    }
    .claw-btn-action:active { transform: translateY(8px); box-shadow: 0 0px 0 #99004C; }
    .claw-btn-action:disabled { background: #555; box-shadow: 0 8px 0 #333; cursor: not-allowed; border-color: #777; color: #999; }

/* HUD */
    .claw-hud {
        display: flex; justify-content: space-between; align-items: center;
        background: rgba(0, 0, 0, 0.6); padding: 10px 15px; border-radius: 10px;
        margin-bottom: 15px; border: 1px solid #00FFFF; font-size: 14px; font-weight: bold;
    }

.claw-question-box {
        background: rgba(0, 255, 255, 0.1); padding: 15px; border-radius: 10px;
        margin-bottom: 20px; border-left: 4px solid #00FFFF; text-align: left;
        min-height: 80px; display: flex; flex-direction: column; justify-content: center;
    }

/* Machine Arcade Setup */
    .claw-machine {
        background: #111; border: 4px solid #7000FF; border-radius: 15px;
        height: 250px; position: relative; overflow: hidden;
        box-shadow: inset 0 0 30px #000;
        background-image: linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, 0.05) 25%, rgba(0, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.05) 75%, rgba(0, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, 0.05) 25%, rgba(0, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.05) 75%, rgba(0, 255, 255, 0.05) 76%, transparent 77%, transparent);
        background-size: 30px 30px;
    }

/* Crane Mechanism */
    .claw-crane-track {
        position: absolute; top: 0; left: 10px; right: 10px; height: 10px;
        background: #333; border-bottom: 2px solid #555;
    }
    .claw-crane {
        position: absolute; top: 10px; left: 50%;
        width: 40px; height: 40px; transform: translateX(-50%);
        transition: left 0.1s linear, top 0.5s ease-in-out;
        z-index: 10;
    }
    .claw-line {
        position: absolute; top: -10px; left: 18px; width: 4px; height: 30px;
        background: #999;
    }
    .claw-grip {
        position: absolute; top: 20px; left: 0; width: 40px; height: 20px;
        background: #FF007F; border-radius: 5px 5px 0 0; border: 2px solid #FFA6D9;
    }
    .claw-finger {
        position: absolute; top: 18px; width: 12px; height: 25px;
        background: transparent; border: 4px solid #FFF; border-top: none;
        transition: transform 0.3s;
    }
    .claw-finger.left { left: -2px; border-right: none; border-radius: 0 0 0 10px; transform-origin: top right; transform: rotate(20deg); }
    .claw-finger.right { right: -2px; border-left: none; border-radius: 0 0 10px 0; transform-origin: top left; transform: rotate(-20deg); }
    
    /* When claw drops/grabs */
    .claw-crane.grabbing .claw-finger.left { transform: rotate(0deg); }
    .claw-crane.grabbing .claw-finger.right { transform: rotate(0deg); }

/* Items */
    .claw-items-area {
        position: absolute; bottom: 10px; left: 10px; right: 10px;
        display: flex; justify-content: space-around; align-items: flex-end;
        height: 60px;
    }
    .claw-item-box {
        background: #222; border: 2px solid #00FFFF; border-radius: 10px;
        padding: 10px; font-size: 13px; font-weight: bold; color: #FFF;
        width: 30%; text-align: center; box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
        transition: all 0.3s; word-break: break-word; line-height: 1.2;
        display: flex; align-items: center; justify-content: center;
        min-height: 55px;
    }
    .claw-item-box.grabbed {
        opacity: 0; transform: translateY(-50px) scale(0.5);
    }

/* SweetAlert Override */
    .claw-swal-popup { background: #120428 !important; border: 2px solid #00FFFF !important; border-radius: 15px !important; color: #FFF !important; font-family: 'Prompt', sans-serif !important; box-shadow: 0 0 20px rgba(0,255,255,0.2) !important; }
    .claw-swal-popup .swal2-title { color: #FF007F !important; font-family: 'Press Start 2P', cursive !important; font-size: 16px !important; line-height: 1.5; margin-bottom: 15px;}
    .claw-swal-popup .swal2-html-container { color: #FFF !important; font-size: 15px !important; }
    .claw-swal-confirm { background: #FF007F !important; color: #FFF !important; font-weight: bold !important; border-radius: 50px !important; border: none !important; box-shadow: 0 4px 0 #99004C !important; }

@media (max-width: 500px) {
        .claw-title { font-size: 18px; }
        .claw-item-box { font-size: 11px; padding: 5px; }
        .claw-machine { height: 220px; }
    }
</style>

let claw_currentLevel = 0;
    let claw_score = 0;
    let claw_lives = 3;
    let claw_audioCtx = null;
    
    // Animation Variables
    let claw_pos = 50; // percentage 10 to 90
    let claw_dir = 1; // 1 for right, -1 for left
    let claw_speed = 1.5; // speed multiplier
    let claw_animFrame = null;
    let claw_isMoving = false;
    let claw_isDropping = false;

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

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

if (type === 'start') {
                osc.type = 'square'; [440, 554, 659, 880].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1)));
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.5);
                osc.start(now); osc.stop(now + 0.5);
            } else if (type === 'drop') {
                osc.type = 'triangle'; osc.frequency.setValueAtTime(400, now); osc.frequency.linearRampToValueAtTime(200, now + 0.3);
                gain.gain.setValueAtTime(0.3, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
                osc.start(now); osc.stop(now + 0.3);
            } else if (type === 'grab') {
                osc.type = 'square'; osc.frequency.setValueAtTime(800, now); osc.frequency.setValueAtTime(1200, now + 0.1);
                gain.gain.setValueAtTime(0.2, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.2);
                osc.start(now); osc.stop(now + 0.2);
            } else if (type === 'correct') {
                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.3, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.5);
                osc.start(now); osc.stop(now + 0.5);
            } else if (type === 'wrong') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(200, now); osc.frequency.linearRampToValueAtTime(100, now + 0.4);
                gain.gain.setValueAtTime(0.3, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.4);
                osc.start(now); osc.stop(now + 0.4);
            }
        } catch (e) { console.error("Audio Error:", e); }
    }

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

/* --- Game Logic --- */
    function claw_initGame() {
        claw_initAudio(); 
        claw_playSound('start');
        
        claw_currentLevel = 0;
        claw_score = 0;
        claw_lives = 3;
        
        claw_loadLevel();
        claw_showScreen('claw-screen-game');
    }

function claw_loadLevel() {
        claw_updateHUD();
        
        const qData = claw_questions[claw_currentLevel];
        document.getElementById('claw-question-text').innerText = qData.q;
        
        const container = document.getElementById('claw-items-container');
        container.innerHTML = '';
        
        // สลับตำแหน่งคำตอบ
        let shuffledAnswers = [...qData.answers].sort(() => Math.random() - 0.5);
        
        shuffledAnswers.forEach((ans, index) => {
            const div = document.createElement('div');
            div.className = 'claw-item-box';
            div.id = `claw-item-${index}`;
            div.innerHTML = ans.text;
            div.dataset.correct = ans.correct;
            // คำนวณตำแหน่งช่วงเปอร์เซ็นต์สำหรับเช็กการคีบ (แบ่ง 3 ส่วน)
            // slot 0: 0-33%, slot 1: 34-66%, slot 2: 67-100%
            div.dataset.slot = index; 
            container.appendChild(div);
        });

// เริ่มเคลื่อนที่ตู้คีบ
        const btn = document.getElementById('claw-btn-grab');
        btn.disabled = false;
        btn.innerText = "คีบเลย! (GRAB)";
        
        claw_isDropping = false;
        claw_pos = 50;
        document.getElementById('claw-crane-head').style.top = '10px';
        document.getElementById('claw-crane-head').classList.remove('grabbing');
        
        // ปรับความเร็วตามด่าน
        claw_speed = 1.2 + (claw_currentLevel * 0.3);
        
        // แก้ไขจุดนี้: รีเซ็ตและเรียก Animation ทันที
        claw_isMoving = true;
        cancelAnimationFrame(claw_animFrame);
        claw_animateCrane();
    }

function claw_animateCrane() {
        if (!claw_isMoving || claw_isDropping) return;

claw_pos += claw_speed * claw_dir;
        if (claw_pos >= 90) { claw_pos = 90; claw_dir = -1; }
        if (claw_pos <= 10) { claw_pos = 10; claw_dir = 1; }

document.getElementById('claw-crane-head').style.left = `${claw_pos}%`;
        claw_animFrame = requestAnimationFrame(claw_animateCrane);
    }

function claw_grabItem() {
        if (claw_isDropping) return;
        
        claw_playSound('drop');
        claw_isDropping = true;
        const btn = document.getElementById('claw-btn-grab');
        btn.disabled = true;
        btn.innerText = "กำลังคีบ...";

const crane = document.getElementById('claw-crane-head');
        
        // 1. ปล่อยคีบลง
        crane.style.top = '160px'; // เลื่อนลงมาใกล้กล่อง

setTimeout(() => {
            // 2. จับ
            crane.classList.add('grabbing');
            claw_playSound('grab');
            
            // ตรวจสอบว่าคีบโดนกล่องไหน
            let grabbedSlot = -1;
            if (claw_pos < 33) grabbedSlot = 0;
            else if (claw_pos < 66) grabbedSlot = 1;
            else grabbedSlot = 2;

const targetBox = document.getElementById(`claw-item-${grabbedSlot}`);
            targetBox.classList.add('grabbed'); // ทำให้กล่องหายไปจากพื้น

setTimeout(() => {
                // 3. ดึงกลับขึ้นมา
                crane.style.top = '10px';
                
                setTimeout(() => {
                    // 4. ประมวลผลคำตอบ
                    claw_checkAnswer(targetBox);
                }, 500);
            }, 400);

}, 500); // รอให้แขนลงมาถึงก่อน
    }

function claw_restartGame() {
        claw_playSound('start');
        claw_showScreen('claw-screen-start');
    }
</script>