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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* 📝 ตารางวางไพ่ และ ตัวไพ่ */
    .wsst-memory-game { width: 100%; display: flex; flex-wrap: wrap; perspective: 1000px; gap: 15px; justify-content: center; }
    .wsst-memory-card { width: calc(25% - 15px); height: 120px; position: relative; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1); cursor: pointer; }
    .wsst-memory-card.flip { transform: rotateY(180deg); } /* เอฟเฟกต์พลิกไพ่ */
    
    /* 📝 หน้าไพ่ และ หลังไพ่ */
    .wsst-front-face, .wsst-back-face {
        width: 100%; height: 100%; padding: 10px; position: absolute; border-radius: 10px; background: #fff;
        backface-visibility: hidden; display: flex; align-items: center; justify-content: center;
        box-sizing: border-box; box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .wsst-back-face { background: linear-gradient(135deg, #8B0000 0%, #4a0000 100%); border: 2px solid #FFD700; color: #FFD700; font-size: 40px; }
    .wsst-front-face { transform: rotateY(180deg); border: 3px solid #8B0000; color: #333; font-weight: bold; font-size: 15px; text-align: center; flex-direction: column; }

/* 📝 รูปร่างสัญลักษณ์ต่างๆ ที่วาดด้วย CSS */
    .wsst-shape-box { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; margin-bottom: 5px; }
    .wsst-shape-visual { background: #FFD700; border: 2px solid #8B0000; }
    .s-oval { width: 50px; height: 25px; border-radius: 20px; } /* วงรี */
    .s-rect { width: 50px; height: 30px; } /* สี่เหลี่ยมผืนผ้า */
    .s-diamond { width: 35px; height: 35px; transform: rotate(45deg); } /* ข้าวหลามตัด */
    .s-parallelogram { width: 50px; height: 30px; transform: skew(-20deg); } /* ด้านขนาน */
    .s-circle { width: 35px; height: 35px; border-radius: 50%; } /* วงกลม */

/* 📝 หน้าต่างป๊อปอัปเมื่อเล่นชนะ (Win Modal) */
    #wsst-winModal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
    #wsst-winModal .modal-content { background-color: white; margin: 15% auto; padding: 40px; width: 80%; max-width: 400px; border-radius: 20px; border-top: 10px solid #FFD700; text-align: center; color: #333; }
    .btn-restart { background: #8B0000; color: white; padding: 12px 30px; border: none; border-radius: 30px; font-size: 18px; cursor: pointer; margin-top: 20px; font-family: 'Prompt', sans-serif; }

/* 📝 ปรับขนาดให้พอดีบนหน้าจอมือถือ */
    @media (max-width: 600px) {
        .wsst-memory-card { width: calc(33.33% - 15px); height: 100px; }
        .wsst-front-face { font-size: 12px; }
    }
</style>

<div class="wsst-game-wrapper">
    <h2><i class="fa fa-clone"></i> เกมเปิดไพ่จับคู่: ผังงาน</h2>
    <div class="stats">จำนวนการเปิด: <b id="moves-count">0</b> ครั้ง</div>
    
    <div class="wsst-memory-game" id="game-board"><div class="wsst-memory-card" data-framework="term">
                <div class="wsst-front-face"><div class="wsst-shape-box"><div class="wsst-shape-visual s-oval"></div></div></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="io">
                <div class="wsst-front-face"><span>รับ/แสดงผล</span></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="term">
                <div class="wsst-front-face"><span>เริ่มต้น/สิ้นสุด</span></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="connector">
                <div class="wsst-front-face"><span>จุดเชื่อมต่อ</span></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="decision">
                <div class="wsst-front-face"><div class="wsst-shape-box"><div class="wsst-shape-visual s-diamond"></div></div></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="process">
                <div class="wsst-front-face"><span>การประมวลผล</span></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="process">
                <div class="wsst-front-face"><div class="wsst-shape-box"><div class="wsst-shape-visual s-rect"></div></div></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="io">
                <div class="wsst-front-face"><div class="wsst-shape-box"><div class="wsst-shape-visual s-parallelogram"></div></div></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="decision">
                <div class="wsst-front-face"><span>การตัดสินใจ</span></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div><div class="wsst-memory-card" data-framework="connector">
                <div class="wsst-front-face"><div class="wsst-shape-box"><div class="wsst-shape-visual s-circle"></div></div></div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            </div></div>
</div>

<div id="wsst-winModal">
    <div class="modal-content">
        <i class="fa fa-star" style="font-size: 60px; color: #FFD700; margin-bottom: 15px;"></i>
        <h2 style="font-family: 'Prompt', sans-serif; color: #8B0000; margin-top:0;">ความจำยอดเยี่ยม!</h2>
        <p style="font-size: 18px;">ใช้จำนวนการเปิดไพ่ไปทั้งหมด <strong id="final-moves">0</strong> ครั้ง</p>
        <button class="btn-restart" onclick="resetGame()">🔄 เล่นใหม่อีกครั้ง</button>
    </div>
</div>

const gameBoard = document.getElementById("game-board");
    let hasFlippedCard = false;
    let lockBoard = false;
    let firstCard, secondCard;
    let matchedPairs = 0;
    let moves = 0;

// 📝 ฟังก์ชันสลับตำแหน่งไพ่แบบสุ่ม
    function shuffle(array) { return array.sort(() => Math.random() - 0.5); }

// 📝 ฟังก์ชันสร้างไพ่ลงบนกระดาน
    function createBoard() {
        gameBoard.innerHTML = '';
        const shuffledCards = shuffle([...cardData]);
        
        shuffledCards.forEach(item => {
            const card = document.createElement("div");
            card.classList.add("wsst-memory-card");
            card.dataset.framework = item.id;
            card.innerHTML = `
                <div class="wsst-front-face">${item.content}</div>
                <div class="wsst-back-face"><i class="fa fa-question-circle-o"></i></div>
            `;
            card.addEventListener("click", flipCard);
            gameBoard.appendChild(card);
        });
    }

// 📝 ฟังก์ชันพลิกไพ่เมื่อถูกคลิก
    function flipCard() {
        if (lockBoard) return;
        if (this === firstCard) return;

this.classList.add("flip");

if (!hasFlippedCard) {
            hasFlippedCard = true;
            firstCard = this;
            return;
        }

secondCard = this;
        updateMoves();
        checkForMatch();
    }

// 📝 ฟังก์ชันตรวจสอบว่าไพ่ 2 ใบที่เปิด ตรงกันหรือไม่
    function checkForMatch() {
        let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
        isMatch ? disableCards() : unflipCards();
    }

// 📝 ถ้าตรงกัน ให้ล็อกไพ่คู่นั้นไว้ (เปลี่ยนสีขอบเป็นสีเขียว)
    function disableCards() {
        firstCard.removeEventListener("click", flipCard);
        secondCard.removeEventListener("click", flipCard);
        firstCard.querySelector('.wsst-front-face').style.borderColor = "#28a745";
        secondCard.querySelector('.wsst-front-face').style.borderColor = "#28a745";
        matchedPairs++;
        resetBoardState();

// ถ้าจับคู่ครบ 5 คู่ ให้แสดง Modal ชนะ
        if (matchedPairs === 5) {
            setTimeout(() => {
                document.getElementById('final-moves').innerText = moves;
                document.getElementById('wsst-winModal').style.display = 'block';
            }, 500);
        }
    }

// 📝 ถ้าไม่ตรงกัน ให้คว่ำไพ่กลับหลังผ่านไป 1 วินาที
    function unflipCards() {
        lockBoard = true;
        setTimeout(() => {
            firstCard.classList.remove("flip");
            secondCard.classList.remove("flip");
            resetBoardState();
        }, 1000);
    }

// 📝 รีเซ็ตสถานะกระดานเพื่อรอการเปิดไพ่รอบต่อไป
    function resetBoardState() {
        [hasFlippedCard, lockBoard] = [false, false];
        [firstCard, secondCard] = [null, null];
    }

// 📝 นับจำนวนครั้งที่ผู้เล่นเปิดไพ่
    function updateMoves() {
        moves++;
        document.getElementById('moves-count').innerText = moves;
    }

// 📝 ฟังก์ชันเริ่มเกมใหม่ (ปุ่มเล่นอีกครั้ง)
    function resetGame() {
        document.getElementById('wsst-winModal').style.display = 'none';
        moves = 0;
        matchedPairs = 0;
        document.getElementById('moves-count').innerText = moves;
        resetBoardState();
        createBoard();
    }

// สั่งให้สร้างกระดานไพ่ทันทีเมื่อโค้ดโหลดเสร็จ
    createBoard();
</script>