Tic Tac Toe Game HTML CSS & Js Source Code By Mr Secret

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            max-width: 300px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

h1 {
            color: #333;
        }

.board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 20px;
        }

.cell {
            width: 100px;
            height: 100px;
            font-size: 24px;
            border: 2px solid #3498db;
            border-radius: 5px;
            cursor: pointer;
        }

.cell:hover {
            background-color: #ecf0f1;
        }

#result {
            margin-top: 20px;
            font-size: 18px;
        }

.reset {
            background-color: #3498db;
            color: #fff;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }

.reset:hover {
            background-color: #2980b9;
        }
    </style>
    <title>Tic Tac Toe Game</title>
</head>
<body>
    <div class="container">
        <h1>Tic Tac Toe</h1>
        <div class="board" id="board">
            <div class="cell" onclick="makeMove(0, 0)"></div>
            <div class="cell" onclick="makeMove(0, 1)"></div>
            <div class="cell" onclick="makeMove(0, 2)"></div>
            <div class="cell" onclick="makeMove(1, 0)"></div>
            <div class="cell" onclick="makeMove(1, 1)"></div>
            <div class="cell" onclick="makeMove(1, 2)"></div>
            <div class="cell" onclick="makeMove(2, 0)"></div>
            <div class="cell" onclick="makeMove(2, 1)"></div>
            <div class="cell" onclick="makeMove(2, 2)"></div>
        </div>
        <div id="result"></div>
        <button class="reset" onclick="resetGame()">Reset Game</button>
    </div>
    <script>
        var board = [
            ['', '', ''],
            ['', '', ''],
            ['', '', '']
        ];

var currentPlayer = 'X';
        var gameWon = false;

function makeMove(row, col) {
            if (!gameWon && board[row][col] === '') {
                board[row][col] = currentPlayer;
                updateBoard();
                checkWinner();
                togglePlayer();
            }
        }

function updateBoard() {
            var cells = document.querySelectorAll('.cell');
            cells.forEach((cell, index) => {
                var row = Math.floor(index / 3);
                var col = index % 3;
                cell.innerText = board[row][col];
            });
        }

function checkWinner() {
            for (var i = 0; i < 3; i++) {
                if (
                    (board[i][0] !== '' && board[i][0] === board[i][1] && board[i][1] === board[i][2]) ||
                    (board[0][i] !== '' && board[0][i] === board[1][i] && board[1][i] === board[2][i])
                ) {
                    declareWinner(board[i][0]);
                    return;
                }
            }

if (
                (board[0][0] !== '' && board[0][0] === board[1][1] && board[1][1] === board[2][2]) ||
                (board[0][2] !== '' && board[0][2] === board[1][1] && board[1][1] === board[2][0])
            ) {
                declareWinner(board[1][1]);
                return;
            }

if (board.flat().every(cell => cell !== '')) {
                declareTie();
            }
        }

function declareWinner(player) {
            document.getElementById("result").innerText = `${player} wins!`;
            gameWon = true;
        }

function declareTie() {
            document.getElementById("result").innerText = "It's a tie!";
            gameWon = true;
        }

function togglePlayer() {
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        }

function resetGame() {
            board = [
                ['', '', ''],
                ['', '', ''],
                ['', '', '']
            ];
            currentPlayer = 'X';
            gameWon = false;
            document.getElementById("result").innerText = '';
            updateBoard();
        }
    </script>
</body>
</html>

Tic Tac Toe Game HTML CSS & Js Source Code By Mr Secret

Contact Form