Headlines

สร้างเกมจับผิดคู่ (Matching Game) HTML5 ง่ายๆ ด้วย ChatGPT

Kuma03 mins

ถ้าคุณเป็นคนหนึ่งที่สนใจเรียนรู้การเขียนโปรแกรม และอยากเริ่มต้นสร้างเกมง่ายๆ ด้วย HTML5, CSS และ JavaScript บทความนี้เหมาะสำหรับคุณ! วันนี้เราจะมาสอนการสร้างเกมจับผิดคู่ (Matching Game) แบบง่ายๆ โดยใช้เครื่องมือที่ทรงพลังอย่าง ChatGPT เพื่อช่วยคุณในทุกขั้นตอน

ทำความรู้จักกับเกมจับผิดคู่

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

เครื่องมือที่ต้องใช้

  1. เครื่องมือแก้ไขโค้ด เช่น VS Code, Sublime Text หรือ Notepad++
  2. เบราว์เซอร์ เช่น Google Chrome, Firefox, หรือ Safari
  3. ChatGPT เพื่อช่วยเขียนและแก้ไขโค้ด

ขั้นตอนการสร้างเกม

  1. เข้า ChatGPT พิมพ์ Prompt “เขียนเกมจับผิดคู่ ด้วย html5” กด Enter จากนั้น ChatGPT จะเขียนโค้ดให้เรา ประกอบด้วย ไฟล์ 3 ไฟล์ดังนี้

index.html สำหรับโครงสร้าง HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matching Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>เกมจับผิดคู่</h1>
    <div id="game-board"></div>
    <p id="message"></p>
    <script src="script.js"></script>
</body>
</html>

styles.css สำหรับออกแบบ UI 

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    gap: 10px;
    justify-content: center;
    margin: 20px auto;
}

.card {
    width: 100px;
    height: 100px;
    background-color: #eee;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2em;
    color: transparent;
}

.card.matched {
    background-color: #8bc34a;
    cursor: default;
}

.card.flipped {
    color: #333;
}

#message {
    font-size: 1.2em;
    color: #555;
}

script.js สำหรับควบคุมการทำงานของเกมด้วย JavaScript

const symbols = ["🍎", "🍌", "🍇", "🍓", "🍎", "🍌", "🍇", "🍓"];
let shuffledSymbols = symbols.sort(() => 0.5 - Math.random());

const gameBoard = document.getElementById("game-board");
const message = document.getElementById("message");

let flippedCards = [];
let matchedCount = 0;

// สร้างการ์ด
shuffledSymbols.forEach(symbol => {
    const card = document.createElement("div");
    card.classList.add("card");
    card.dataset.symbol = symbol;
    card.addEventListener("click", handleCardClick);
    gameBoard.appendChild(card);
});

// คลิกการ์ด
function handleCardClick(e) {
    const clickedCard = e.target;

    if (
        clickedCard.classList.contains("flipped") ||
        clickedCard.classList.contains("matched") ||
        flippedCards.length === 2
    ) {
        return;
    }

    clickedCard.classList.add("flipped");
    clickedCard.textContent = clickedCard.dataset.symbol;
    flippedCards.push(clickedCard);

    if (flippedCards.length === 2) {
        checkMatch();
    }
}

// ตรวจสอบคู่
function checkMatch() {
    const [card1, card2] = flippedCards;

    if (card1.dataset.symbol === card2.dataset.symbol) {
        card1.classList.add("matched");
        card2.classList.add("matched");
        matchedCount += 2;
        flippedCards = [];

        if (matchedCount === shuffledSymbols.length) {
            message.textContent = "ยินดีด้วย! คุณจับคู่ทั้งหมดได้ถูกต้อง!";
        }
    } else {
        setTimeout(() => {
            card1.classList.remove("flipped");
            card2.classList.remove("flipped");
            card1.textContent = "";
            card2.textContent = "";
            flippedCards = [];
        }, 1000);
    }
}

2. สร้างไฟล์ชื่อ index.html คัดลอกโค้ดในส่วนของ HTML จาก ChatGPT แล้วนำไปใส่ในไฟล์

3. สร้างไฟล์ชื่อ styles.css คัดลอกโค้ดในส่วนของ styles.css จาก ChatGPT แล้วนำไปใส่ในไฟล์

4. สร้างไฟล์ชื่อ script.js คัดลอกโค้ดในส่วนของ script.js จาก ChatGPT แล้วนำไปใส่ในไฟล์

5. เปิดไฟล์ index.html บนเบราว์เซอร์เพื่อเริ่มเกม

การพัฒนาเกมต่อยอด

คุณสามารถเพิ่มฟีเจอร์ใหม่ๆ ได้ เช่น

  1. เพิ่มระดับความยาก: เพิ่มจำนวนการ์ดเมื่อผู้เล่นผ่านด่าน
  2. จับเวลา: สร้างระบบจับเวลาเพื่อเพิ่มความท้าทาย
  3. นับคะแนน: ให้รางวัลตามเวลาที่เหลือหรือจำนวนการคลิก

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

ลองทำตามกันดูนะคะ แล้วคุณจะพบว่าการสร้างเกมไม่ใช่เรื่องยากเลย!

อย่าลืมแชร์ผลงานของคุณกับเพื่อนๆ หรือในโซเชียลมีเดีย และมาสนุกกับการสร้างเกมด้วยกัน!

Leave a Reply

Related News