การสร้างเกมจับคู่การ์ดด้วย HTML, CSS และ JavaScript

zlPetchlz · 18/07/2024 3:43 pm

การสร้างเกมจับคู่การ์ดเป็นโปรเจกต์ที่น่าสนใจและท้าทายที่เหมาะสำหรับนักพัฒนาเว็บทั้งมือใหม่และมืออาชีพ เกมนี้ช่วยเสริมสร้างทักษะพื้นฐานในการเขียนโปรแกรมและการทำงานร่วมกันของหลายเทคโนโลยี ทั้ง HTML, CSS และ JavaScript โดยในเกมจับคู่การ์ดนี้ ผู้เล่นจะต้องหาคู่การ์ดที่เหมือนกันจากการเปิดการ์ดที่อยู่ในกระดานเกม ซึ่งกระตุ้นการจดจำและทักษะการจับคู่ของผู้เล่น

ขั้นตอนที่ 1: การเขียนโครงสร้าง HTML
เริ่มต้นโดยการสร้างโครงสร้างพื้นฐานของ HTML ที่จะประกอบด้วย <div> สำหรับกระดานเกมและแต่ละการ์ดที่จะถูกสร้างโดย JavaScript
โค้ด: เลือกทั้งหมด
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Matching Game</title>
    <link rel="stylesheet" href="styles.css">
    
</head>
<body>
    <div class="game-board" id="gameBoard">
        
    </div>
    <script src="script.js"></script>
</body>
</html>
```
ขั้นตอนที่ 2: การออกแบบ CSS
ใช้ CSS เพื่อออกแบบการ์ดและกระดานเกม เพื่อให้การ์ดมีลักษณะที่เหมาะสมสำหรับเกมจับคู่
โค้ด: เลือกทั้งหมด
```
/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
}

.card {
    width: 100px;
    height: 100px;
    background-color: #2c3e50;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    cursor: pointer;
}

.card.flipped {
    background-color: #ecf0f1;
    color: #2c3e50;
}
```
ขั้นตอนที่ 3: เขียน JavaScript เพื่อเพิ่มฟังก์ชันการทำงาน
ใช้ JavaScript เพื่อสร้างการ์ด และเพิ่มฟังก์ชันการ์ดสำหรับการพลิกและตรวจสอบการจับคู่
โค้ด: เลือกทั้งหมด
```
// script.js
document.addEventListener('DOMContentLoaded', () => {
    const gameBoard = document.getElementById('gameBoard');
    const cardsArray = [
        'A', 'A', 'B', 'B', 'C', 'C', 'D', 'D',
        'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'
    ];

    let firstCard = null;
    let secondCard = null;
    let lockBoard = false;

    function createCard(value) {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.value = value;
        card.textContent = value;
        card.addEventListener('click', flipCard);
        return card;
    }

    function flipCard() {
        if (lockBoard) return;
        if (this === firstCard) return;

        this.classList.add('flipped');
        
        if (!firstCard) {
            firstCard = this;
            return;
        }

        secondCard = this;
        lockBoard = true;

        checkForMatch();
    }

    function checkForMatch() {
        if (firstCard.dataset.value === secondCard.dataset.value) {
            disableCards();
        } else {
            unflipCards();
        }
    }

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

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

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

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

    function initGame() {
        shuffle(cardsArray);
        cardsArray.forEach(value => {
            const card = createCard(value);
            gameBoard.appendChild(card);
        });
    }

    initGame();
});
```
อธิบายแต่ละส่วน
1. HTML: ในส่วน HTML เราสร้างโครงสร้างพื้นฐานของเกม โดยมี <div> ที่มี id เป็น gameBoard ซึ่งจะเป็นตำแหน่งที่การ์ดจะถูกสร้างและแสดงผล
2. CSS: CSS ใช้ในการออกแบบการ์ดและกระดานเกม ให้มีลักษณะที่เหมาะสมสำหรับเกมจับคู่ การ์ดมีสีพื้นหลังเข้ม และเมื่อถูกพลิกจะมีสีพื้นหลังอ่อนขึ้นพร้อมข้อความเป็นสีเข้ม
3. JavaScript: ใน JavaScript เรามีฟังก์ชันหลักที่จัดการกับการทำงานของเกม
  - createCard: สร้างการ์ดแต่ละใบและเพิ่มฟังก์ชันการคลิกเพื่อพลิกการ์ด
  - flipCard: จัดการกับการคลิกการ์ดและการตรวจสอบการคลิก
  - checkForMatch: ตรวจสอบว่าการ์ดที่พลิกมีคู่หรือไม่
  - disableCards และ unflipCards: จัดการกับการพลิกการ์ดในกรณีที่ตรวจพบคู่หรือไม่ตรงกัน
  - shuffle: สับเปลี่ยนลำดับการ์ดเพื่อให้เป็นการ์ดที่สุ่ม
  - initGame: เริ่มเกมโดยการสร้างและแสดงการ์ดทั้งหมด
ผลลัพท์
ตัวอย่างของการ์ด

ตัวอย่างของการ์ด.png (14.25 KiB) Viewed 3251 times

เมื่อคลิ้กเลือกการ์ด การจับคู่ที่ถูกต้อง สีด้านหลังก็จะหายไป

การ์ดที่ถูกจับคู่

การ์ดที่ถูกจับคู่ .png (14.87 KiB) Viewed 3251 times
หากกดจับคู่การ์ดไม่ถูกต้อง มันจะกลับมาดังเดิม
ตอนกดผิด
จับคู่การ์ดผิด

จับคู่การ์ดผิด.png (14.92 KiB) Viewed 3251 times
ผ่านไปสักระยะ จะกลับมาเป็นเหมือนเดิม
การ์ดกลับมาเหมือนเดิม

การ์ดกลับมาเหมือนเดิม.png (14.5 KiB) Viewed 3251 times

การสร้างเกมจับคู่การ์ดด้วย HTML, CSS, และ JavaScript เป็นโปรเจกต์ที่น่าสนใจสำหรับผู้ที่ต้องการฝึกฝนทักษะการเขียนโปรแกรมพื้นฐานได้อย่างดี เราใช้ HTML เพื่อสร้างโครงสร้างพื้นฐานของเกม และ CSS เพื่อออกแบบการ์ดและกระดานเกมให้มีลักษณะที่เหมาะสม ส่วน JavaScript ใช้ในการเพิ่มฟังก์ชันที่จำเป็น เช่น การพลิกการ์ดและตรวจสอบความเท่ากันของการ์ดที่พลิก โดยมีการใช้ฟังก์ชันเพื่อสับเปลี่ยนลำดับการ์ดเพื่อเพิ่มความน่าสนใจในการเล่นเกมด้วยความสามารถในการสร้างเกมด้วยภาษาต่างๆ

แหล่าอ้างอิง
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

การสร้างเกมจับคู่การ์ดด้วย HTML, CSS และ JavaScript

การสร้างเกมจับคู่การ์ดด้วย HTML, CSS และ JavaScript

ผู้ใช้งานขณะนี้