Memory Matching Game

1. ความเป็นมา

เกมส์ Memory Matching Game เป็นเกมส์ที่ช่วยฝึกทักษะการจำและการสังเกต โดยผู้เล่นต้องจับคู่ภาพที่เหมือนกันจากไพ่ที่ถูกพลิกขึ้น โดยเกมส์ประเภทนี้มีความนิยมในกลุ่มผู้เล่นทุกวัย และสามารถใช้เป็นเครื่องมือในการพัฒนาทักษะทางจิตใจ

2. วัตถุประสงค์

เพื่อพัฒนาและสร้างเกมส์ Memory Matching Game ด้วยภาษา HTML, CSS และ JavaScript
เพื่อเสริมสร้างทักษะการจำและการมองเห็นรูปแบบของผู้เล่น
เพื่อสร้างความสนุกสนานและความท้าทายให้กับผู้เล่น

3. ขอบเขต

เกมส์นี้ถูกออกแบบให้มีระดับความยากที่เพิ่มขึ้นตามระดับของผู้เล่น โดยเริ่มต้นจากการจับคู่ภาพ 2 คู่และเพิ่มขึ้นในแต่ละระดับจนถึง 8 คู่ ภายในเวลาที่กำหนด

4. ประโยชน์ที่คาดว่าจะได้รับ

ผู้เล่นจะได้ฝึกทักษะการจำและความเร็วในการตอบสนอง
สร้างความสนุกสนานในการเล่นเกมส์
การเรียนรู้การเขียนโค้ดในภาษา HTML, CSS และ JavaScript ผ่านการสร้างเกมส์

5. ความรู้ที่เกี่ยวข้อง

HTML: ใช้สำหรับสร้างโครงสร้างของหน้าเว็บ
CSS: ใช้สำหรับการตกแต่งและปรับแต่งรูปแบบของหน้าเว็บ
JavaScript: ใช้สำหรับเพิ่มความสามารถทางโต้ตอบในเกมส์ เช่น การจับเวลา การตรวจสอบการจับคู่ และการจัดการคะแนน

6. ผลการดำเนินงาน

เกมส์ได้ถูกสร้างขึ้นและทดสอบเพื่อให้ทำงานได้อย่างถูกต้อง โดยสามารถใช้งานได้บนเว็บเบราว์เซอร์ ผู้เล่นสามารถเริ่มเกมส์ จับคู่ภาพ และติดตามคะแนนและเวลาได้

7. วิธีการใช้โปรแกรม

เปิดไฟล์ HTML ในเว็บเบราว์เซอร์
คลิกที่ไพ่เพื่อพลิกและจับคู่
ติดตามคะแนนและเวลาที่เหลือ
เมื่อจับคู่ภาพได้หมด ให้ดำเนินไปยังระดับถัดไป
- CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Matching Game</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .score-board {
            margin-bottom: 20px;
            font-size: 24px;
        }
        .game-board {
            display: grid;
            grid-gap: 10px;
            justify-content: center;
        }
        .card {
            width: 100px;
            height: 100px;
            background-color: #008cba;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-radius: 10px;
            position: relative;
        }
        .card img {
            display: none;
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
        .card.flipped img {
            display: block;
        }
    </style>
</head>
<body>
    <div class="score-board">
        Level: <span id="level">1</span> | Score: <span id="score">0</span> | Time: <span id="time">60</span> seconds
    </div>
    <div class="game-board" id="gameBoard"></div>
    
    <script>
        const cardsArray = [
            'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg',
            'img5.jpg', 'img6.jpg', 'img7.jpg', 'img8.jpg',
            'img9.jpg', 'img10.jpg', 'img11.jpg', 'img12.jpg',
            'img13.jpg', 'img14.jpg', 'img15.jpg', 'img16.jpg'
        ]; // ภาพไพ่ทั้งหมด

        let firstCard = null;
        let secondCard = null;
        let lockBoard = false;
        let score = 0;
        let level = 1;
        let currentPairs = 2; // เริ่มต้นที่ 2 คู่
        let baseTimeLimit = 60; 
        let timeLimit = baseTimeLimit; 
        let timer;

        function shuffle(array) {
            array.sort(() => Math.random() - 0.5);
        }

        function createCardElement(cardValue) {
            const card = document.createElement('div');
            card.classList.add('card');
            const img = document.createElement('img');
            img.src = cardValue;
            card.appendChild(img);
            card.dataset.value = cardValue;
            card.addEventListener('click', flipCard);
            return card;
        }

        function setupBoard() {
            const gameBoard = document.getElementById('gameBoard');
            gameBoard.innerHTML = '';
            gameBoard.style.gridTemplateColumns = `repeat(${currentPairs }, 100px)`; // คูณด้วย 2 เพื่อให้มีจำนวนใบที่ถูกต้อง
            
            let levelCards = cardsArray.slice(0, currentPairs ); // เลือกไพ่ตามจำนวนคู่
            levelCards = [...levelCards, ...levelCards]; // สร้างคู่ไพ่
            shuffle(levelCards);

            levelCards.forEach(cardValue => { //ใส่การ์ดลงในแผง
                const cardElement = createCardElement(cardValue);
                gameBoard.appendChild(cardElement);
            });

            showAllCardsTemporarily(); แสดง 3s
        }

        function showAllCardsTemporarily() {
            const cards = document.querySelectorAll('.card');
            cards.forEach(card => card.classList.add('flipped'));
            setTimeout(() => {
                cards.forEach(card => card.classList.remove('flipped'));
                startTimer();
            }, 3000);
        }

        function flipCard() {
            if (lockBoard) return;
            this.classList.add('flipped');

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

            secondCard = this;
            checkForMatch();
        }

        function checkForMatch() {
            if (firstCard.dataset.value === secondCard.dataset.value) {
                disableCards();
                updateScore(10);
                if (document.querySelectorAll('.card:not(.flipped)').length === 0) {
                    nextLevel();
                }
            } else {
                unflipCards();
                updateScore(-2);
            }
        }

        function disableCards() {
            firstCard.removeEventListener('click', flipCard);
            secondCard.removeEventListener('click', flipCard);
            resetBoard();
        }

        function unflipCards() {
            lockBoard = true;
            setTimeout(() => {
                firstCard.classList.remove('flipped');
                secondCard.classList.remove('flipped');
                resetBoard();
            }, 1000);
        }

        function resetBoard() {
            [firstCard, secondCard] = [null, null];
            lockBoard = false;
        }

        function updateScore(points) {
            score += points;
            document.getElementById('score').textContent = score;
        }

        function nextLevel() {
            level++;
            document.getElementById('level').textContent = level;
            currentPairs = level + 1; // เพิ่มคู่ไพ่ในแต่ละเลเวล
            timeLimit = Math.ceil(timeLimit * 1.15);
            resetTimer();
            setupBoard();
        }

        function startTimer() {
            let timeRemaining = timeLimit;
            document.getElementById('time').textContent = timeRemaining;

            timer = setInterval(() => {
                timeRemaining--;
                document.getElementById('time').textContent = timeRemaining;

                if (timeRemaining === 0) {
                    clearInterval(timer);
                    alert('Time\'s up! Restarting the game.');
                    resetGame();
                }
            }, 1000);
        }

        function resetTimer() {
            clearInterval(timer);
        }

        function resetGame() {
            level = 1;
            score = 0;
            currentPairs = 2; // กลับไปเริ่มที่ 2 คู่
            timeLimit = baseTimeLimit;
            document.getElementById('level').textContent = level;
            document.getElementById('score').textContent = score;
            setupBoard();
        }

        setupBoard();
    </script>
</body>
</html>

8. ผลการทดลอง

การทดสอบเกมส์พบว่าผู้เล่นสามารถเข้าใจวิธีการเล่นได้อย่างรวดเร็วและสนุกกับเกมส์ การจับคู่ภาพมีความท้าทายตามระดับที่เพิ่มขึ้น

9. เทคนิคประยุกต์เพื่อเพิ่มประสิทธิภาพ

เพิ่มเสียงเมื่อจับคู่ได้สำเร็จหรือเมื่อเวลาหมด
สร้างระบบคะแนนที่มีความหลากหลายมากขึ้น เช่น โบนัสสำหรับการจับคู่ได้ต่อเนื่อง
เพิ่มภาพที่น่าสนใจหรือธีมต่าง ๆ ในเกมส์

10. สรุปผลการสร้างเกมส์

เกมส์ Memory Matching Game เป็นเครื่องมือที่ดีในการพัฒนาทักษะการจำและความสามารถในการสังเกตเกมส์มีความท้าทายที่เพิ่มขึ้นในแต่ละระดับ ทำให้ผู้เล่นไม่เบื่อหน่ายและมีแรงจูงใจในการเล่นต่อ