OX finds the winner

นายอิศรานุวัฒน์ อุ่นแก้ว วฟ1/2 30094

ความเป็นมา

เป็นเกมที่เล่นโดยผู้เล่น 2 คน ที่ผลัดกันใส่เครื่องหมาย “X” และ “O” บนกระดานขนาด 3×3 จนกว่าจะมีผู้ชนะหรือเกมจบลงที่เสมอ เเละปัจจุบันได้พัฒนาขึ้นเพื่อทำให้สามารถเล่นได้บนเว็บเบราว์เซอร์ โดยไม่ต้องติดตั้งโปรแกรมเสริมฃ

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

หลักของการพัฒนาเกมOX ใช้สำหรับให้ผู้เล่น 2 คนได้แข่งขันกัน อีกทั้งยังเป็นตัวอย่างของการพัฒนาแอปพลิเคชันเว็บที่ง่ายต่อการเข้าใจและขยายความ

ขอบเขต

-กระดานขนาด 3×3 ที่ผู้เล่นจะผลัดกันใส่เครื่องหมาย “X” และ “O” -จะแสดงผลผู้ชนะเมื่อ มีผู้เล่นชนะเรียงกัน แนวตั้ง แนวนอน หรือแนวทะเเยง -เมื่อเกมจบลง จะแสดงผลว่าผู้เล่นคนใดชนะหรือเสมอ และสามารถเริ่มเกมใหม่ได้

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

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

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

HTML: ใช้ในการสร้างโครงสร้างของหน้าเว็บและส่วนประกอบต่างๆ CSS: ใช้ในการจัดรูปแบบกระดานเกม ทำให้กระดานดูสวยงามและเป็นระเบียบ  JavaScript: ใช้ในการควบคุมการทำงานของเกม เช่น การใส่เครื่องหมาย การตรวจสอบผู้ชนะ การสลับผู้เล่น และการเริ่มเกมใหม่ DOM Manipulation: การควบคุมและเปลี่ยนแปลงเนื้อหาในหน้าเว็บแบบไดนามิกฃ

สรุปวิธีการใช้งานโปรแกรม

1.เปิดหน้าเว็บที่มีเกม 2.ผู้เล่นคนแรกคลิกที่ช่องว่างใดๆ บนกระดานเพื่อวางเครื่องหมาย X O 3.ผู้เล่นคนที่สองคลิกที่ช่องว่างอื่นๆ เพื่อวางเครื่องหมาย ที่ไม่ซ้ำกับผู้เล่นคนแรก 4.ผู้เล่นจะผลัดกันเล่นจนกว่าจะมีผู้ชนะ หรือจนกระดานเต็มและไม่มีใครชนะ (เสมอ) 5.เมื่อเกมจบลง จะแสดงผลลัพธ์และสามารถกดปุ่ม “เริ่มเกมใหม่” เพื่อเริ่มเล่นอีกครั้ง

สรุปผลการทดลอง

จากการทดลองใช้งาน เกมOX ทำงานได้อย่างถูกต้องบนเว็บเบราว์เซอร์มาตรฐาน ผู้เล่นสามารถเล่นได้อย่างราบรื่น มีการตรวจสอบผู้ชนะได้อย่างแม่นยำ และสามารถรีเซ็ตเกมใหม่ได้อย่างรวดเร็ว

เอกสารอ้างอิง

https://www.youtube.com/shorts/WvBNyecBByA
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เกมส์ OX</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            margin: 20px 0;
        }
        .cell {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            border: 2px solid #000;
            cursor: pointer;
            background-color: #f0f0f0;
            transition: background-color 0.3s;
        }
        .cell:hover {
            background-color: #e0e0e0;
        }
        #message {
            margin-top: 20px;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <h1>เกมส์ OX</h1>
    <div class="board" id="board"></div>
    <div id="message"></div>
    <button onclick="resetGame()">เริ่มใหม่</button>

    <script>
        const boardElement = document.getElementById('board');
        const messageElement = document.getElementById('message');
        let currentPlayer = 'X';
        const board = Array(3).fill(null).map(() => Array(3).fill(null));

        function createBoard() {
            boardElement.innerHTML = '';
            for (let row = 0; row < 3; row++) {
                for (let col = 0; col < 3; col++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.addEventListener('click', handleClick);
                    boardElement.appendChild(cell);
                }
            }
        }

        function handleClick(event) {
            const row = event.target.dataset.row;
            const col = event.target.dataset.col;

            if (!board[row][col]) {
                board[row][col] = currentPlayer;
                event.target.textContent = currentPlayer;
                if (checkWinner()) {
                    messageElement.textContent = `ผู้เล่น ${currentPlayer} ชนะ!`;
                    boardElement.removeEventListener('click', handleClick);
                } else if (isBoardFull()) {
                    messageElement.textContent = 'เสมอ!';
                }
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            }
        }

        function checkWinner() {
            const winningCombination = [
                [[0, 0], [0, 1], [0, 2]],
                [[1, 0], [1, 1], [1, 2]],
                [[2, 0], [2, 1], [2, 2]],
                [[0, 0], [1, 0], [2, 0]],
                [[0, 1], [1, 1], [2, 1]],
                [[0, 2], [1, 2], [2, 2]],
                [[0, 0], [1, 1], [2, 2]],
                [[0, 2], [1, 1], [2, 0]]
            ];

            return winningCombination.some(combination => {
                const [[a, b], [c, d], [e, f]] = combination;
                return board[a][b] && board[a][b] === board[c][d] && board[a][b] === board[e][f];
            });
        }

        function isBoardFull() {
            return board.every(row => row.every(cell => cell));
        }

        function resetGame() {
            currentPlayer = 'X';
            messageElement.textContent = '';
            createBoard();
            board.forEach(row => row.fill(null));
        }

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

You may also like...

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *