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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="ng-wrapper" id="ngGameContainer">
    
    <style>
        .ng-wrapper {
            font-family: 'Sarabun', 'Prompt', sans-serif;
            background-color: #F4F6F8; /* Brand Light Gray */
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            position: relative;
            line-height: 1.6;
        }

/*  */
        .ng-header {
            background-color: #8B0F0F; /* Brand Primary Red */
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 24px;
            font-weight: bold;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

/* Screen Management */
        .ng-screen { display: none; padding: 30px 20px; text-align: center; }
        .ng-screen.active { display: block; animation: fadeIn 0.5s ease; }

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

/* Buttons & Inputs */
        .ng-input {
            padding: 12px;
            width: 80%;
            max-width: 300px;
            border: 2px solid #ccc;
            border-radius: 15px;
            font-size: 16px;
            margin-bottom: 20px;
            text-align: center;
            outline: none;
            transition: all 0.3s;
        }
        .ng-input:focus { border-color: #8B0F0F; box-shadow: 0 0 8px rgba(139, 15, 15, 0.2); }

.ng-btn-primary {
            background-color: #8B0F0F;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 15px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 6px 0 #5C0A0A; /* Brand Secondary Maroon */
            transition: all 0.2s ease;
        }
        .ng-btn-primary:hover {
            background-color: #a31212;
            transform: translateY(2px);
            box-shadow: 0 4px 0 #5C0A0A;
        }
        .ng-btn-primary:active {
            transform: translateY(6px);
            box-shadow: 0 0 0 #5C0A0A;
        }

/* Game Board Status */
        .ng-status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            padding: 15px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            font-weight: bold;
            font-size: 18px;
        }
        .ng-time { color: #8B0F0F; }
        .ng-lives { letter-spacing: 5px; font-size: 20px; }

@media (max-width: 500px) {
            .ng-status-bar { flex-direction: column; gap: 10px; }
        }

/* Map & Nodes */
        .ng-map {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            padding: 20px 0;
            position: relative;
        }
        .ng-node {
            width: 50px;
            height: 50px;
            background-color: #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 0 #bbb;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }
        .ng-node.completed {
            background-color: #BAFFC9; /* Pastel Green */
            box-shadow: 0 4px 0 #85cc96;
        }
        .ng-node.active {
            background-color: #BAE1FF; /* Pastel Blue */
            box-shadow: 0 4px 0 #85b4cc;
            transform: scale(1.1);
            border: 3px solid #8B0F0F;
        }
        
        /* Modal Overlay */
        .ng-modal-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }
        .ng-modal-overlay.active { display: flex; animation: fadeIn 0.3s ease; }
        .ng-modal-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            width: 85%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
        }
        .ng-question-text {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 25px;
            color: #8B0F0F;
        }

/* Choice Buttons (Pastel) */
        .ng-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        @media (max-width: 500px) { .ng-choice-grid { grid-template-columns: 1fr; } }
        
        .ng-choice-btn {
            border: none;
            padding: 15px;
            border-radius: 15px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            color: #333;
            transition: all 0.2s;
        }
        .ng-choice-btn:hover:not(:disabled) { filter: brightness(0.95); transform: translateY(-2px); }
        .ng-choice-btn:active:not(:disabled) { transform: translateY(2px); }
        
        /* ปุ่มสีหวานน่ากด */
        .ng-color-1 { background-color: #FFB3BA; box-shadow: 0 4px 0 #cc8f94; }
        .ng-color-2 { background-color: #BAFFC9; box-shadow: 0 4px 0 #94cc9f; }
        .ng-color-3 { background-color: #BAE1FF; box-shadow: 0 4px 0 #94b4cc; }
        .ng-color-4 { background-color: #FFFFBA; box-shadow: 0 4px 0 #cccc94; }

/* Helpers */
        .ng-mt-20 { margin-top: 20px; }
    </style>

<div class="ng-header">🚀 ภารกิจท่องโลกเครือข่าย Data Packet Journey</div>

<div id="ng-screen-login" class="ng-screen active">
        <h2 style="color: #8B0F0F;">เตรียมพร้อมส่งข้อมูล!</h2>
        <p>ยินดีต้อนรับเอเจนต์ ม.2 เข้าสู่เครือข่ายคอมพิวเตอร์<br>ภารกิจของคุณคือการส่ง Data Packet ผ่าน 10 โหนดให้สำเร็จก่อนเวลาจะหมด!</p>
        <div class="ng-mt-20">
            <input type="text" id="ng-player-name" class="ng-input" placeholder="กรอกชื่อผู้เล่น (Agent Name)">
            <br>
            <button class="ng-btn-primary" onclick="ngStartGame()">เริ่มการผจญภัย 🚀</button>
        </div>
    </div>

<div id="ng-screen-game" class="ng-screen">
        <div class="ng-status-bar">
            <div>Agent: <span id="ng-display-name" style="color:#8B0F0F;"></span></div>
            <div class="ng-time">⏱️ <span id="ng-timer">05:00</span></div>
            <div class="ng-lives" id="ng-lives-display">❤️❤️❤️❤️❤️</div>
        </div>
        
        <h3 style="margin-bottom: 5px;">แผนที่เครือข่าย (Network Map)</h3>
        <p style="font-size: 14px; color: #666; margin-top: 0;">นำยาน Data Packet ของคุณเดินทางไปให้ถึงปลายทาง</p>
        
        <div class="ng-map" id="ng-map-container">
            
        </div>
    </div>

<div id="ng-modal" class="ng-modal-overlay">
        <div class="ng-modal-content">
            <div class="ng-question-text" id="ng-question-text">คำถามจะปรากฏที่นี่</div>
            <div class="ng-choice-grid" id="ng-choices-container">
                
            </div>
        </div>
    </div>

<div id="ng-screen-end" class="ng-screen">
        <h2 id="ng-end-title" style="font-size: 32px;">...</h2>
        <p id="ng-end-desc" style="font-size: 18px; margin: 20px 0;"></p>
        <button class="ng-btn-primary" onclick="ngResetGame()">เล่นอีกครั้ง 🔄</button>
    </div>

<script>
        // --- ฐานข้อมูลคำถาม (ม.2 วิทยาการคำนวณ) ---
        const ngQuestions = [
            { q: "1. เครือข่ายเชื่อมต่อห้องคอมฯ และห้องพักครูในตึกเดียวกันคือเครือข่ายประเภทใด?", choices: ["PAN", "LAN", "MAN", "WAN"], ans: 1 },
            { q: "2. เครือข่ายใดครอบคลุมพื้นที่กว้างใหญ่สุด ระดับประเทศหรือทั่วโลก?", choices: ["LAN", "MAN", "PAN", "WAN"], ans: 3 },
            { q: "3. เครือข่ายที่เชื่อมต่ออุปกรณ์ส่วนตัวระยะใกล้ (เช่น บลูทูธ หูฟังไร้สาย)?", choices: ["PAN", "LAN", "WAN", "MAN"], ans: 0 },
            { q: "4. เครือข่ายกล้องวงจรปิดที่ครอบคลุมทั่วทั้งจังหวัด จัดเป็นเครือข่ายแบบใด?", choices: ["LAN", "MAN", "WAN", "PAN"], ans: 1 },
            { q: "5. สถาปัตยกรรมที่ทุกเครื่องมีสิทธิเท่าเทียมกัน (เป็นทั้งผู้ให้และผู้รับบริการ)?", choices: ["Client-Server", "Peer-to-Peer", "Hybrid", "Mesh"], ans: 1 },
            { q: "6. รูปร่างเครือข่ายที่มีอุปกรณ์ศูนย์กลาง (Hub/Switch) ถ้าศูนย์กลางพัง ระบบล่มทั้งหมด?", choices: ["Bus", "Ring", "Star", "Mesh"], ans: 2 },
            { q: "7. รูปร่างเครือข่ายที่ใช้สายสัญญาณหลักเพียงสายเดียว หากสายขาดระบบล่มทันที?", choices: ["Bus", "Star", "Ring", "Mesh"], ans: 0 },
            { q: "8. รูปร่างเครือข่ายที่เชื่อมต่อกันเป็นวงกลม ส่งข้อมูลไปในทิศทางเดียว?", choices: ["Star", "Mesh", "Bus", "Ring"], ans: 3 },
            { q: "9. รูปร่างเครือข่ายที่ทุกเครื่องโยงใยถึงกันหมด เสถียรสุดแต่ติดตั้งซับซ้อนและเปลืองสาย?", choices: ["Star", "Mesh", "Bus", "Ring"], ans: 1 },
            { q: "10. สถาปัตยกรรมที่มีเครื่องแม่ข่ายให้บริการอย่างชัดเจน (เช่น Web Server)?", choices: ["Peer-to-Peer", "Client-Server", "Bus", "Hybrid"], ans: 1 }
        ];

// --- สถานะของเกม ---
        let ngPlayerName = "";
        let ngCurrentNode = 0;
        let ngLives = 5; 
        let ngTimeLeft = 300; 
        let ngTimerInterval;
        let ngAudioCtx;

// --- ระบบเสียง (Web Audio API พร้อม try...catch ป้องกันบัคจอค้าง) ---
        function ngInitAudio() {
            try {
                if (!ngAudioCtx) {
                    ngAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
                    ngPlayBGM();
                }
                if (ngAudioCtx.state === 'suspended') {
                    ngAudioCtx.resume();
                }
            } catch (e) {
                console.warn("Audio initialization blocked", e);
            }
        }

function ngSoundCorrect() {
            ngPlayTone(600, 'sine', 0.1);
            setTimeout(() => ngPlayTone(800, 'sine', 0.2), 100);
        }

function ngSoundWrong() {
            ngPlayTone(150, 'sawtooth', 0.3);
        }

function ngPlayBGM() {
            setInterval(() => {
                if(ngLives > 0 && ngTimeLeft > 0 && ngCurrentNode < 10 && ngAudioCtx && ngAudioCtx.state === 'running') {
                    ngPlayTone(300, 'triangle', 0.1);
                }
            }, 2000);
        }

// --- ระบบควบคุมหน้าจอและเกมเพลย์ ---
        function ngSwitchScreen(screenId) {
            document.querySelectorAll('.ng-screen').forEach(s => s.classList.remove('active'));
            document.getElementById(screenId).classList.add('active');
        }

function ngStartGame() {
            const nameInput = document.getElementById('ng-player-name').value.trim();
            ngPlayerName = nameInput === "" ? "Agent X" : nameInput;
            
            ngInitAudio();

// Reset ค่าพลังงานและเวลาใหม่
            ngCurrentNode = 0;
            ngLives = 5; 
            ngTimeLeft = 300; 
            
            document.getElementById('ng-display-name').innerText = ngPlayerName;
            ngUpdateLivesDisplay();
            ngRenderMap();
            
            ngSwitchScreen('ng-screen-game');
            
            clearInterval(ngTimerInterval);
            ngTimerInterval = setInterval(ngUpdateTimer, 1000);

// รอ 1 วินาทีเพื่อโหลดคำถามแรก
            setTimeout(() => ngArriveAtNode(), 1000);
        }

function ngUpdateTimer() {
            ngTimeLeft--;
            let m = Math.floor(ngTimeLeft / 60).toString().padStart(2, '0');
            let s = (ngTimeLeft % 60).toString().padStart(2, '0');
            document.getElementById('ng-timer').innerText = `${m}:${s}`;

if (ngTimeLeft <= 0) {
                ngEndGame(false, "หมดเวลา! ข้อมูลของคุณสูญหายระหว่างทาง");
            }
        }

function ngUpdateLivesDisplay() {
            document.getElementById('ng-lives-display').innerText = '❤️'.repeat(ngLives) + '🖤'.repeat(5 - ngLives);
        }

document.getElementById('ng-modal').classList.add('active');
        }

if (ngLives <= 0) {
                    ngEndGame(false, "โอ๊ะโอ! โดนสกัดกั้น พลังชีวิตหมดเสียแล้ว ข้อมูลส่งไม่ถึงปลายทาง");
                }
            }
        }

function ngResetGame() {
            ngSwitchScreen('ng-screen-login');
            document.getElementById('ng-player-name').value = '';
        }
    </script>
</div>