Make a game of tic tac toe's game

Click here for free DL of the app version that can save data.

No:19935

←

Prev Next

→

Make a game of tic tac toe
Developer User8878｜Date and time 23/10/7 12:53:26
Build time 33.2 sec｜Game capacity 5.625KB｜

Script

Sure! Here's an example of a tic-tac-toe game implemented as a single HTML file using JavaScript:

This code sets up a canvas element where the tic-tac-toe board is drawn. Players can make moves by clicking on the cells of the board. The game checks for a winning condition or a draw and alerts the players accordingly. Note that this is a basic implementation and can be further enhanced with additional features and styling.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

Sure! Here's an example of a tic-tac-toe game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    
    <script>
        // Tic Tac Toe Game
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
    
        const CELL_SIZE = 100;
        const SYMBOL_SIZE = CELL_SIZE / 3 - 20;
        const SYMBOL_OFFSET = 20;
    
        let board = [[null, null, null], [null, null, null], [null, null, null]];
        let currentPlayer = "X";
        let gameEnded = false;
    
        // Function to draw the tic-tac-toe board
        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            ctx.strokeStyle = "black";
    
            for (let i = 1; i < 3; i++) {
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.moveTo(CELL_SIZE * i, 0);
                ctx.lineTo(CELL_SIZE * i, canvas.height);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(0, CELL_SIZE * i);
                ctx.lineTo(canvas.width, CELL_SIZE * i);
                ctx.stroke();
            }
    
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    const symbol = board[i][j];
    
                    if (symbol === "X") {
                        drawX(i, j);
                    } else if (symbol === "O") {
                        drawO(i, j);
                    }
                }
            }
        }
    
        // Function to draw an X symbol on the board
        function drawX(row, col) {
            ctx.strokeStyle = "black";
            ctx.lineWidth = 4;
    
            ctx.beginPath();
            ctx.moveTo(col * CELL_SIZE + SYMBOL_OFFSET, row * CELL_SIZE + SYMBOL_OFFSET);
            ctx.lineTo((col + 1) * CELL_SIZE - SYMBOL_OFFSET, (row + 1) * CELL_SIZE - SYMBOL_OFFSET);
            ctx.stroke();
    
            ctx.beginPath();
            ctx.moveTo((col + 1) * CELL_SIZE - SYMBOL_OFFSET, row * CELL_SIZE + SYMBOL_OFFSET);
            ctx.lineTo(col * CELL_SIZE + SYMBOL_OFFSET, (row + 1) * CELL_SIZE - SYMBOL_OFFSET);
            ctx.stroke();
        }
    
        // Function to draw an O symbol on the board
        function drawO(row, col) {
            ctx.strokeStyle = "black";
            ctx.lineWidth = 4;
    
            ctx.beginPath();
            ctx.arc(
                col * CELL_SIZE + CELL_SIZE / 2, 
                row * CELL_SIZE + CELL_SIZE / 2,
                SYMBOL_SIZE,
                0,
                Math.PI * 2
            );
            ctx.stroke();
        }
    
        // Function to handle the player's move
        function handleMove(event) {
            if (gameEnded) {
                return;
            }
            
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
    
            const col = Math.floor(x / CELL_SIZE);
            const row = Math.floor(y / CELL_SIZE);
    
            if (board[row][col] === null) {
                board[row][col] = currentPlayer;
                currentPlayer = currentPlayer === "X" ? "O" : "X";
            }
    
            drawBoard();
    
            const winner = checkWin();
            if (winner) {
                gameEnded = true;
                alert(`Player ${winner} wins!`);
            } else if (isBoardFull()) {
                gameEnded = true;
                alert("It's a draw!");
            }
        }
    
        // Function to check if a player has won
        function checkWin() {
            const patterns = [
                [[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]]
            ];
    
            for (let i = 0; i < patterns.length; i++) {
                const [p1, p2, p3] = patterns[i];
                const symbol1 = board[p1[0]][p1[1]];
                const symbol2 = board[p2[0]][p2[1]];
                const symbol3 = board[p3[0]][p3[1]];
    
                if (symbol1 && symbol1 === symbol2 && symbol2 === symbol3) {
                    return symbol1;
                }
            }
    
            return null;
        }
    
        // Function to check if the board is full
        function isBoardFull() {
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    if (board[i][j] === null) {
                        return false;
                    }
                }
            }
    
            return true;
        }
    
        // Event listener for mouse clicks
        canvas.addEventListener("click", handleMove);
    
        // Start the game
        drawBoard();
    </script>
</body>
</html>
```

Note that this is a basic implementation and can be further enhanced with additional features and styling.