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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div id="wsst-screen-start" style="padding: 30px; text-align: center; display: block;">
        <div style="background: #1565C0; color: white; padding: 25px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);">
            <h1 style="margin: 0; font-size: 30px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);">🔀 จิกซอว์ผังงานมหัศจรรย์</h1>
            <p style="margin: 10px 0 0 0; font-size: 18px; color: #BBDEFB; font-weight: bold;">ภารกิจสร้างเครื่องคิดเลข (ป.5)</p>
        </div>
        <div style="background: #F5F5F5; padding: 20px; border-radius: 10px; text-align: left; margin-bottom: 25px; border-left: 6px solid #FFC107; font-size: 16px; color: #333; line-height: 1.6;">
            <b>กติกาการเล่น:</b><br>
            1. ลากกล่องคำสั่งจาก <b>"คลังคำสั่ง"</b> ไปวางในกรอบสัญลักษณ์ผังงานให้ถูกต้องตามลำดับ<br>
            2. มีเวลาให้ <b>60 วินาที</b> และพลังชีวิต <b>3 ดวง</b> (วางผิดโดนหัก 1 ดวงนะ!)
        </div>
        <button onclick="wsstRequestName()" style="background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%); color: #0D47A1; border: none; padding: 15px 40px; font-size: 22px; font-weight: bold; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 0 #F57F17; font-family: 'Prompt', sans-serif; transition: 0.1s;">🚀 เริ่มรันโปรแกรม</button>
    </div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
            <div style="background: #FFF8E1; border: 3px dashed #FFC107; border-radius: 15px; padding: 15px; min-height: 400px; display: flex; flex-direction: column;">
                <div style="text-align: center; font-weight: bold; color: #F57F17; margin-bottom: 15px; font-size: 18px;">คลังคำสั่ง (ลาก)</div>
                <div id="wsst-bank"></div>
            </div>
            <div style="background: #FAFAFA; border: 3px solid #E0E0E0; border-radius: 15px; padding: 15px; min-height: 400px; display: flex; flex-direction: column; align-items: center; gap: 6px;" id="wsst-board">
            </div>
        </div>
    </div>

<div id="wsst-screen-result" style="padding: 40px 20px; text-align: center; display: none;">
        <h1 id="wsst-res-title" style="font-size: 36px; margin-bottom: 10px;">🎉 รันโปรแกรมสำเร็จ! 🎉</h1>
        <p id="wsst-res-msg" style="font-size: 18px; color: #555; margin-bottom: 25px;">เก่งมาก โปรแกรมเมอร์ตัวจิ๋ว!</p>
        
        <div style="background: #E3F2FD; border: 3px solid #90CAF9; padding: 25px; border-radius: 20px; margin-bottom: 30px; max-width: 400px; margin-left: auto; margin-right: auto;">
            <p style="font-size: 18px; margin: 0; color: #333;">ผู้พัฒนา: <b id="wsst-res-name" style="color: #1565C0;">-</b></p>
            <p style="font-size: 24px; margin: 15px 0 0 0; color: #333;">คะแนนรวม: <br><b id="wsst-res-score" style="color: #4CAF50; font-size: 45px;">0</b></p>
        </div>
        
        <button onclick="wsstRestart()" style="background: linear-gradient(180deg, #2196F3 0%, #1565C0 100%); color: white; border: none; padding: 15px 35px; font-size: 20px; font-weight: bold; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 0 #0D47A1; font-family: 'Prompt', sans-serif;">🔄 ลองสร้างใหม่อีกครั้ง</button>
    </div>

</div>

let wsstName = "", wsstScore = 0, wsstHearts = 3, wsstCorrect = 0, wsstTime = 60, wsstTimer = null;
    let wsstDraggedId = null;

function wsstShowScreen(id) {
        document.getElementById('wsst-screen-start').style.display = 'none';
        document.getElementById('wsst-screen-game').style.display = 'none';
        document.getElementById('wsst-screen-result').style.display = 'none';
        document.getElementById(id).style.display = 'block';
    }

function wsstInitGame() {
        wsstScore = 0; wsstHearts = 3; wsstCorrect = 0; wsstTime = 60;
        document.getElementById('wsst-hud-name').innerText = wsstName;
        document.getElementById('wsst-hud-score').innerText = wsstScore;
        document.getElementById('wsst-hud-hearts').innerText = "❤️❤️❤️";
        document.getElementById('wsst-timer-bar').style.width = "100%";
        document.getElementById('wsst-timer-bar').style.background = "#4CAF50";

const bank = document.getElementById('wsst-bank');
        const board = document.getElementById('wsst-board');
        bank.innerHTML = ""; board.innerHTML = "";

// สุ่มชิ้นส่วน
        let shuffled = [...wsstFlowData].sort(() => Math.random() - 0.5);
        shuffled.forEach(item => {
            let div = document.createElement('div');
            div.className = 'wsst-drag-item';
            div.draggable = true;
            div.id = 'drag-' + item.id;
            div.innerText = item.text;
            div.dataset.target = item.id;
            
            div.addEventListener('dragstart', function(e) {
                wsstDraggedId = this.id;
                e.dataTransfer.setData('text', this.id);
            });
            bank.appendChild(div);
        });

// สร้างช่องผังงาน
        wsstFlowData.forEach((item, index) => {
            let dropZone = document.createElement('div');
            dropZone.className = `wsst-shape ${item.type}`;
            dropZone.dataset.accept = item.id;
            dropZone.innerText = "วางที่นี่";

dropZone.addEventListener('dragover', function(e) {
                e.preventDefault();
                if(!this.classList.contains('wsst-filled')) this.classList.add('drag-over');
            });
            
            dropZone.addEventListener('dragleave', function() {
                this.classList.remove('drag-over');
            });

dropZone.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('drag-over');
                if(this.classList.contains('wsst-filled')) return;

let dragId = e.dataTransfer.getData('text') || wsstDraggedId;
                if(!dragId) return;
                
                let draggedEl = document.getElementById(dragId);
                
                if(draggedEl.dataset.target === this.dataset.accept) {
                    // วางถูกที่
                    this.innerText = "";
                    this.appendChild(draggedEl);
                    this.classList.add('wsst-filled');
                    draggedEl.draggable = false;
                    wsstScore += 100; wsstCorrect++;
                    document.getElementById('wsst-hud-score').innerText = wsstScore;
                    
                    if(wsstCorrect === wsstFlowData.length) setTimeout(() => wsstEndGame(true), 500);
                } else {
                    // วางผิดที่
                    wsstHearts--;
                    document.getElementById('wsst-hud-hearts').innerText = "❤️".repeat(wsstHearts) + "🖤".repeat(3-wsstHearts);
                    
                    // เอฟเฟกต์สีแดงเตือนว่าผิด
                    const oldColor = this.style.borderColor;
                    this.style.borderColor = "#F44336";
                    setTimeout(() => this.style.borderColor = oldColor, 400);

if(wsstHearts <= 0) setTimeout(() => wsstEndGame(false), 500);
                }
            });

board.appendChild(dropZone);
            
            // ใส่ลูกศรชี้ลง (ยกเว้นอันสุดท้าย)
            if(index < wsstFlowData.length - 1) {
                let arrow = document.createElement('div');
                arrow.className = 'wsst-arrow';
                arrow.innerText = '⬇️';
                board.appendChild(arrow);
            }
        });

wsstShowScreen('wsst-screen-game');
        
        clearInterval(wsstTimer);
        wsstTimer = setInterval(() => {
            wsstTime--;
            let percent = (wsstTime / 60) * 100;
            let bar = document.getElementById('wsst-timer-bar');
            bar.style.width = percent + "%";
            
            if(percent < 30) bar.style.background = "#F44336";
            else if(percent < 60) bar.style.background = "#FFC107";

if(wsstTime <= 0) wsstEndGame(false);
        }, 1000);
    }

function wsstRestart() {
        wsstShowScreen('wsst-screen-start');
    }
</script>