Scribd Logo
Upload

Welcome to Scribd!

  • Tic Tac Toe

    Uploaded by

    karanbankar54
    4 views3 pages

    Original Title

    tic tac toe

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views3 pages

    Tic Tac Toe

    Uploaded by

    karanbankar54

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    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>
    <style>
    body {
    text-align: center;
    }

    .board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    }

    .cell {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    }

    .cell:hover {
    background-color: #f0f0f0;
    }
    </style>
    </head>
    <body>
    <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>
    <p id="message"></p>

    <script>
    let currentPlayer = 'X';
    const board = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
    ];

    const boardElement = document.getElementById('board');


    const messageElement = document.getElementById('message');

    function makeMove(row, col) {


    if (board[row][col] === '' && !isGameWon()) {
    board[row][col] = currentPlayer;
    renderBoard();
    if (isGameWon()) {
    messageElement.textContent = `${currentPlayer} wins!`;
    } else if (isBoardFull()) {
    messageElement.textContent = "It's a draw!";
    } else {
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
    }
    }

    function renderBoard() {
    for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
    const cell = boardElement.children[row * 3 + col];
    cell.textContent = board[row][col];
    }
    }
    }

    function isGameWon() {
    // Check rows, columns, and diagonals for a win
    for (let i = 0; i < 3; i++) {
    if (board[i][0] === currentPlayer && board[i][1] === currentPlayer
    && board[i][2] === currentPlayer) {
    return true;
    }
    if (board[0][i] === currentPlayer && board[1][i] === currentPlayer
    && board[2][i] === currentPlayer) {
    return true;
    }
    }
    if (board[0][0] === currentPlayer && board[1][1] === currentPlayer &&
    board[2][2] === currentPlayer) {
    return true;
    }
    if (board[0][2] === currentPlayer && board[1][1] === currentPlayer &&
    board[2][0] === currentPlayer) {
    return true;
    }
    return false;
    }

    function isBoardFull() {
    for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
    if (board[row][col] === '') {
    return false;
    }
    }
    }
    return true;
    }

    function resetGame() {
    boardElement.innerHTML = '';
    currentPlayer = 'X';
    for (let i = 0; i < 9; i++) {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.onclick = () => makeMove(Math.floor(i / 3), i % 3);
    boardElement.appendChild(cell);
    }
    board.forEach((row, i) => row.fill(''));
    messageElement.textContent = '';
    }

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

    You might also like