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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div id="ts-screen-start" class="ts-screen active">
        <div class="ts-logo-icon">🚀</div>
        <h1 class="ts-title">Tech Startup</h1>
        <p class="ts-subtitle">ภารกิจประกอบคอม & นวัตกรรมเปลี่ยนโลก</p>
        
        <div class="ts-intro-box">
            <p style="color: #2563eb; font-weight: 800; margin-bottom: 10px; font-size: 18px;">> บทบาทของคุณ: ผู้ก่อตั้งบริษัท (CEO)</p>
            <ul style="margin-left: 20px; font-size: 15px; color: #475569; line-height: 1.6;">
                <li><strong>ด่านที่ 1: PC Builder</strong> จัดสเปกคอมพิวเตอร์ให้ตอบโจทย์ลูกค้าสายสตรีมเมอร์</li>
                <li><strong>ด่านที่ 2: Dream Tech</strong> ประกอบชิ้นส่วนนวัตกรรม "หุ่นยนต์พยาบาล" ตามหลักการทำงาน (Input ➔ Process ➔ Output)</li>
            </ul>
        </div>
        
        <button class="ts-btn-main" onclick="ts_requestPlayerName()">เริ่มก่อตั้งบริษัท 💼</button>
    </div>

<div id="ts-screen-stage1" class="ts-screen">
        <div class="ts-hud">
            <div>👤 CEO: <span id="ts-hud-name-1" style="color:#2563eb; font-weight:bold;">-</span></div>
            <div>ด่านที่ 1: PC Builder 🖥️</div>
        </div>

<div class="ts-brief-box">
            <strong>ลูกค้า:</strong> "พี่ครับ ผมเป็นสตรีมเมอร์และนักแคสเกม อยากได้คอมที่ประมวลผลกราฟิกหนักๆ และตัดต่อวิดีโอได้ลื่นไหลสุดๆ ครับ!"
        </div>

<p style="font-weight: 600; color: #334155; margin-bottom: 10px;">เลือก 3 อุปกรณ์ที่สำคัญที่สุดสำหรับลูกค้ารายนี้:</p>
        
        <div class="ts-slots-container" id="ts-s1-slots">
            <div class="ts-slot" id="ts-s1-slot-0">เลือกอุปกรณ์ชิ้นที่ 1</div>
            <div class="ts-slot" id="ts-s1-slot-1">เลือกอุปกรณ์ชิ้นที่ 2</div>
            <div class="ts-slot" id="ts-s1-slot-2">เลือกอุปกรณ์ชิ้นที่ 3</div>
        </div>

<button class="ts-btn-action" id="ts-btn-submit-1" onclick="ts_checkStage1()" style="display:none; margin-top:20px;">ส่งมอบให้ลูกค้า 📦</button>
    </div>

<div id="ts-screen-stage2" class="ts-screen">
        <div class="ts-hud">
            <div>👤 CEO: <span id="ts-hud-name-2" style="color:#2563eb; font-weight:bold;">-</span></div>
            <div>ด่านที่ 2: Dream Tech 🤖</div>
        </div>

<div class="ts-brief-box" style="border-left-color: #10b981;">
            <strong>โปรเจกต์:</strong> "หุ่นยนต์พยาบาลดูแลผู้ป่วย" <br>
            <span style="font-size: 14px; font-weight: normal;">ให้นำชิ้นส่วนมาจัดเรียงตามหลักการทำงาน: รับข้อมูล ➔ ประมวลผล ➔ แสดงผล</span>
        </div>
        
        <div class="ts-blueprint-container">
            <div class="ts-bp-item">
                <div class="ts-bp-label">INPUT (รับข้อมูล)</div>
                <div class="ts-slot" id="ts-s2-slot-0">คลิกเลือกชิ้นส่วน</div>
            </div>
            <div class="ts-bp-arrow">➔</div>
            <div class="ts-bp-item">
                <div class="ts-bp-label">PROCESS (ประมวลผล)</div>
                <div class="ts-slot" id="ts-s2-slot-1">คลิกเลือกชิ้นส่วน</div>
            </div>
            <div class="ts-bp-arrow">➔</div>
            <div class="ts-bp-item">
                <div class="ts-bp-label">OUTPUT (แสดงผล)</div>
                <div class="ts-slot" id="ts-s2-slot-2">คลิกเลือกชิ้นส่วน</div>
            </div>
        </div>

<button class="ts-btn-action" id="ts-btn-submit-2" onclick="ts_checkStage2()" style="display:none; margin-top:20px;">ทดสอบระบบ ⚙️</button>
    </div>

<div id="ts-screen-result" class="ts-screen">
        <div style="font-size: 60px; margin-bottom: 10px;">🏆</div>
        <h1 class="ts-title" style="color: #10b981; font-size: 36px;">MISSION COMPLETE!</h1>
        <h2 style="color: #475569; margin-bottom: 20px; font-size: 18px;">ภารกิจพัฒนานวัตกรรมสำเร็จ</h2>
        
        <div class="ts-result-box">
            <p style="font-size: 16px; color:#64748b;">CEO: <strong id="ts-result-name" style="color:#2563eb; font-size: 20px;">-</strong></p>
            <p style="font-size: 18px; margin-top: 15px; color:#334155; font-weight: bold;">คะแนนผลประกอบการ:</p>
            <p style="font-size: 55px; font-weight: 800; color: #f59e0b; margin: 5px 0;" id="ts-result-score">0</p>
            <div class="ts-rank-badge" id="ts-result-rank">ระดับ: โหลดข้อมูล...</div>
        </div>

<button class="ts-btn-main" onclick="ts_restartGame()">เปิดโปรเจกต์ใหม่ 🔄</button>
    </div>

</div>

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

.ts-screen { 
        display: none; 
        padding: 30px; 
        text-align: center; 
        animation: tsFadeIn 0.4s ease-out forwards; 
    }
    .ts-screen.active { display: block; }

@keyframes tsFadeIn {
        from { opacity: 0; transform: translateY(15px); }
        to { opacity: 1; transform: translateY(0); }
    }

.ts-logo-icon { font-size: 60px; margin-bottom: 10px; animation: tsBounce 2s infinite; }
    @keyframes tsBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.ts-title { font-size: 34px; color: #1e3a8a; margin: 0 0 5px 0; font-weight: 800; }
    .ts-subtitle { font-size: 18px; color: #3b82f6; font-weight: 700; margin-top: 0; margin-bottom: 25px; }

.ts-intro-box {
        background: #ffffff; padding: 25px; border-radius: 15px; text-align: left;
        border-left: 6px solid #3b82f6; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        max-width: 600px; margin: 0 auto 25px auto;
    }

/* Buttons */
    .ts-btn-main {
        display: inline-block; padding: 15px 40px; font-size: 20px; font-weight: 800;
        color: #fff; background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; border-radius: 50px;
        cursor: pointer; box-shadow: 0 6px 0 #1e3a8a, 0 10px 15px rgba(37, 99, 235, 0.3);
        transition: all 0.1s; font-family: 'Prompt', sans-serif;
    }
    .ts-btn-main:active { transform: translateY(6px); box-shadow: none; }

.ts-btn-action {
        display: inline-block; padding: 12px 30px; font-size: 18px; font-weight: 800;
        color: #fff; background: #10b981; border: none; border-radius: 50px;
        cursor: pointer; box-shadow: 0 5px 0 #059669; transition: all 0.1s; font-family: 'Prompt', sans-serif;
    }
    .ts-btn-action:active { transform: translateY(5px); box-shadow: none; }

/* HUD & Layout */
    .ts-hud {
        display: flex; justify-content: space-between; background: #ffffff;
        padding: 15px 20px; border-radius: 12px; margin-bottom: 20px;
        font-weight: bold; border: 2px solid #e2e8f0; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

.ts-brief-box {
        background: #eff6ff; border-left: 6px solid #3b82f6; padding: 15px 20px;
        border-radius: 10px; margin-bottom: 20px; text-align: left; font-size: 16px;
    }

/* Slots & Inventory */
    .ts-slots-container {
        display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; flex-wrap: wrap;
    }
    .ts-slot {
        background: #f1f5f9; border: 2px dashed #cbd5e1; border-radius: 10px;
        width: 160px; height: 100px; display: flex; flex-direction: column;
        justify-content: center; align-items: center; font-size: 14px; color: #94a3b8;
        transition: all 0.3s; padding: 10px; text-align: center; cursor: pointer;
    }
    .ts-slot.filled {
        background: #ffffff; border: 2px solid #3b82f6; color: #1e3a8a; font-weight: bold;
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.15);
    }
    .ts-slot .ts-icon { font-size: 30px; margin-bottom: 5px; }

.ts-inventory-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;
        background: #ffffff; padding: 20px; border-radius: 15px; border: 2px solid #e2e8f0;
    }
    .ts-inv-item {
        background: #f8fafc; border: 2px solid #e2e8f0; padding: 15px; border-radius: 10px;
        cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 14px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .ts-inv-item:hover { border-color: #3b82f6; background: #eff6ff; transform: translateY(-3px); }
    .ts-inv-item.used { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
    .ts-inv-item .ts-icon { font-size: 24px; margin-bottom: 5px; }

/* Blueprint (Stage 2) */
    .ts-blueprint-container {
        display: flex; justify-content: space-between; align-items: center;
        background: #f0fdf4; padding: 20px; border-radius: 15px; border: 2px dashed #10b981;
        margin-bottom: 25px; flex-wrap: wrap; gap: 10px;
    }
    .ts-bp-item { flex: 1; min-width: 140px; }
    .ts-bp-label { font-weight: 900; color: #059669; margin-bottom: 5px; font-size: 14px; text-align: center;}
    .ts-bp-arrow { font-size: 24px; color: #10b981; font-weight: bold; }
    .ts-blueprint-container .ts-slot { width: 100%; height: 90px; }

/* Result Screen */
    .ts-result-box {
        background: #ffffff; border: 2px solid #e2e8f0; padding: 30px; 
        border-radius: 15px; margin: 0 auto 25px auto; max-width: 400px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .ts-rank-badge {
        font-size: 18px; font-weight: 800; color: #f59e0b; margin-top: 15px; 
        background: #fef3c7; display: inline-block; padding: 8px 20px; border-radius: 10px;
    }

/* SweetAlert */
    .swal-ts { font-family: 'Prompt', sans-serif !important; border-radius: 15px !important; }
    .swal-ts .swal2-confirm { background: #3b82f6 !important; border-radius: 30px !important; }

/* Mobile Responsive */
    @media (max-width: 650px) {
        .ts-inventory-grid { grid-template-columns: repeat(2, 1fr) !important; }
        .ts-slots-container { flex-direction: column; align-items: center; }
        .ts-slot { width: 100%; }
        .ts-blueprint-container { flex-direction: column; }
        .ts-bp-arrow { transform: rotate(90deg); margin: 5px 0; }
    }
</style>

const ts_stage2_db = [
        { id: "sensor", name: "เซนเซอร์วัดอุณหภูมิ", icon: "🌡️", type: "input" },
        { id: "ai", name: "ชิป AI ประมวลผล", icon: "🤖", type: "process" },
        { id: "screen", name: "หน้าจอแจ้งเตือน", icon: "🖥️", type: "output" },
        { id: "battery", name: "แบตเตอรี่สำรอง", icon: "🔋", type: "wrong" }
    ];

let ts_playerName = "";
    let ts_score = 0;
    
    // State Stage 1
    let ts_s1_selected = []; // max 3
    // State Stage 2
    let ts_s2_selected = [null, null, null]; // [input, process, output]
    
    let ts_audioCtx = null;

function ts_initAudio() { 
        if (!ts_audioCtx) ts_audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
    }

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

if (type === 'click') {
                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 === 'error') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(200, now); osc.frequency.linearRampToValueAtTime(100, now + 0.3);
                gain.gain.setValueAtTime(0.15, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
                osc.start(now); osc.stop(now + 0.3);
            } else if (type === 'success') {
                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.15, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.5);
                osc.start(now); osc.stop(now + 0.5);
            }
        } catch (e) { console.error(e); }
    }

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

// --- STAGE 1 LOGIC ---
    function ts_startStage1() {
        ts_score = 0;
        ts_s1_selected = [];
        document.getElementById('ts-hud-name-1').innerText = ts_playerName;
        ts_renderStage1();
        ts_showScreen('ts-screen-stage1');
    }

// Render Inventory
        const inv = document.getElementById('ts-s1-inventory');
        inv.innerHTML = '';
        ts_stage1_db.forEach(item => {
            const isUsed = ts_s1_selected.find(s => s && s.id === item.id);
            const btn = document.createElement('div');
            btn.className = `ts-inv-item ${isUsed ? 'used' : ''}`;
            btn.innerHTML = `<div class="ts-icon">${item.icon}</div><div>${item.name}</div>`;
            if(!isUsed) btn.onclick = () => ts_selectS1(item);
            inv.appendChild(btn);
        });

// Show/Hide Submit Button
        document.getElementById('ts-btn-submit-1').style.display = ts_s1_selected.length === 3 ? "inline-block" : "none";
    }

function ts_selectS1(item) {
        if(ts_s1_selected.length < 3) {
            ts_playSound('click');
            ts_s1_selected.push(item);
            ts_renderStage1();
        }
    }

function ts_removeS1(index) {
        ts_playSound('click');
        ts_s1_selected.splice(index, 1);
        ts_renderStage1();
    }

// --- STAGE 2 LOGIC ---
    function ts_startStage2() {
        ts_s2_selected = [null, null, null];
        document.getElementById('ts-hud-name-2').innerText = ts_playerName;
        ts_renderStage2();
        ts_showScreen('ts-screen-stage2');
    }

// Render Inventory
        const inv = document.getElementById('ts-s2-inventory');
        inv.innerHTML = '';
        ts_stage2_db.forEach(item => {
            const isUsed = ts_s2_selected.find(s => s && s.id === item.id);
            const btn = document.createElement('div');
            btn.className = `ts-inv-item ${isUsed ? 'used' : ''}`;
            btn.innerHTML = `<div class="ts-icon">${item.icon}</div><div>${item.name}</div>`;
            if(!isUsed) btn.onclick = () => ts_selectS2(item);
            inv.appendChild(btn);
        });

// Show/Hide Submit
        const isFull = ts_s2_selected.filter(i => i !== null).length === 3;
        document.getElementById('ts-btn-submit-2').style.display = isFull ? "inline-block" : "none";
    }

function ts_selectS2(item) {
        const emptyIdx = ts_s2_selected.indexOf(null);
        if(emptyIdx !== -1) {
            ts_playSound('click');
            ts_s2_selected[emptyIdx] = item;
            ts_renderStage2();
        }
    }

function ts_removeS2(index) {
        ts_playSound('click');
        ts_s2_selected[index] = null;
        ts_renderStage2();
    }

function ts_checkStage2() {
        const inputItem = ts_s2_selected[0];
        const processItem = ts_s2_selected[1];
        const outputItem = ts_s2_selected[2];

if(inputItem.type === 'input' && processItem.type === 'process' && outputItem.type === 'output') {
            ts_playSound('success');
            ts_score += 50;
            Swal.fire({
                title: 'นวัตกรรมสมบูรณ์แบบ! 🤖',
                text: 'คุณเข้าใจหลักการ Input -> Process -> Output ได้อย่างถูกต้อง ยอดเยี่ยมมากครับ',
                icon: 'success',
                confirmButtonText: 'ดูผลประกอบการ',
                customClass: { popup: 'swal-ts' }
            }).then(() => {
                ts_endGame();
            });
        } else {
            ts_playSound('error');
            let msg = 'ลำโพง หรือ หน้าจอ';
            if(ts_s2_selected.find(i => i.type === 'wrong')) {
                msg = 'แบตเตอรี่เป็นแหล่งพลังงานนะครับ ไม่ใช่หน่วยรับหรือแสดงผล ลองเปลี่ยนชิ้นส่วนดูนะ!';
            } else {
                msg = 'จัดวางตำแหน่งผิดครับ! ลองทบทวนดูว่า เซนเซอร์ (รับข้อมูล) -> AI (คิด/ประมวลผล) -> หน้าจอ (แสดงผล) ควรอยู่ตรงไหน?';
            }
            
            Swal.fire({
                title: 'ระบบเกิดข้อผิดพลาด ❌',
                text: msg,
                icon: 'error',
                confirmButtonText: 'ประกอบใหม่',
                customClass: { popup: 'swal-ts' }
            }).then(() => {
                ts_s2_selected = [null, null, null];
                ts_renderStage2();
            });
        }
    }

// --- END GAME ---
    function ts_endGame() {
        ts_playSound('success');
        document.getElementById('ts-result-name').innerText = ts_playerName;
        document.getElementById('ts-result-score').innerText = ts_score;
        
        let rank = ts_score === 100 ? "🌟 สุดยอดนักสร้างสรรค์นวัตกรรม" : "💼 CEO มือใหม่";
        document.getElementById('ts-result-rank').innerText = rank;
        
        ts_showScreen('ts-screen-result');
    }

function ts_restartGame() {
        ts_showScreen('ts-screen-start');
    }
</script>