Scribd Logo
Upload

Welcome to Scribd!

  • Tic Webpage Code

    Uploaded by

    mongggo
    4 views2 pages
    This document contains code for a Tic-Tac-Toe game webpage. It includes: 1) HTML, CSS, and JavaScript code to build the game board interface and logic. 2) A 9-cell grid defined in HTML and styled with CSS for the game board. 3) JavaScript code to handle cell clicks, track the game state, check for a winner or draw after each turn, and reset the game.

    Original Description:

    Original Title

    Tic webpage code

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code for a Tic-Tac-Toe game webpage. It includes: 1) HTML, CSS, and JavaScript code to build the game board interface and logic. 2) A 9-cell grid defined in HTML and styled with CSS for the game board. 3) JavaScript code to handle cell clicks, track the game state, check for a winner or draw after each turn, and reset the game.

    Copyright:

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

    Tic Webpage Code

    Uploaded by

    mongggo
    This document contains code for a Tic-Tac-Toe game webpage. It includes: 1) HTML, CSS, and JavaScript code to build the game board interface and logic. 2) A 9-cell grid defined in HTML and styled with CSS for the game board. 3) JavaScript code to handle cell clicks, track the game state, check for a winner or draw after each turn, and reset the game.

    Copyright:

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

    Tic-Tac-Toe: webpage code

    index.html:

    htmlCopy code
    <!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> <link rel="stylesheet" href="styles.css"> </head> <body> <div
    class="container"> <h1> Tic-Tac-Toe </h1> <div id="board" class="board"></div> <div
    id="result" class="result"></div> <button onclick="resetGame()"> Restart Game </button>
    </div> <script src="script.js"></script> </body> </html>

    styles.css:

    cssCopy code
    body { font-family : 'Arial' , sans-serif; background-color : #f4f4f4 ; margin : 0 ; display :
    flex; align-items : center; justify-content : center; height : 100vh ; } .container { text-align :
    center; } .board { display : grid; grid-template-columns : repeat ( 3 , 100px ); grid-gap : 5px ;
    } .cell { width : 100px ; height : 100px ; background-color : #ddd ; display : flex; align-
    items : center; justify-content : center; font-size : 24px ; cursor : pointer; } .result { margin-
    top : 10px ; font-size : 20px ; font-weight : bold; color : green; }

    script.js:

    jsCopy code
    const board = document . getElementById ( 'board' ); const resultDisplay =
    document . getElementById ( 'result' ); let currentPlayer = 'X' ; let gameBoard = [ '' , '' , '' , '' ,
    '' , '' , '' , '' , '' ]; let gameActive = true ; // Create the Tic-Tac-Toe board for ( let i = 0 ; i < 9 ;
    i++) { const cell = document . createElement ( 'div' ); cell. classList . add ( 'cell' );
    cell. setAttribute ( 'data-index' , i); cell. addEventListener ( 'click' , handleCellClick);
    board. appendChild (cell); } function handleCellClick () { const index =
    this . getAttribute ( 'data-index' ); if (gameBoard[index] === '' && gameActive)
    { gameBoard[index] = currentPlayer; this . textContent = currentPlayer; if ( checkWinner ())
    { resultDisplay. textContent = `${currentPlayer} wins!` ; gameActive = false ; } else if
    ( isBoardFull ()) { resultDisplay. textContent = 'It\'s a draw!' ; gameActive = false ; } else
    { currentPlayer = currentPlayer === 'X' ? 'O' : 'X' ; } } } function checkWinner () { const
    winPatterns = [ [ 0 , 1 , 2 ], [ 3 , 4 , 5 ], [ 6 , 7 , 8 ], // Rows [ 0 , 3 , 6 ], [ 1 , 4 , 7 ], [ 2 , 5 , 8 ], //
    Columns [ 0 , 4 , 8 ], [ 2 , 4 , 6 ] // Diagonals ]; for ( const pattern of winPatterns) { const [a,
    b, c] = pattern; if (gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a]
    === gameBoard[c]) { return true ; } } return false ; } function isBoardFull () { return
    gameBoard. every ( cell => cell !== '' ); } function resetGame () { gameBoard = [ '' , '' , '' , '' ,
    '' , '' , '' , '' , '' ]; currentPlayer = 'X' ; resultDisplay. textContent = '' ; gameActive = true ; const
    cells = document . querySelectorAll ( '.cell' ); cells. forEach ( cell => { cell. textContent =
    '' ; }); }

    This code sets up a basic Tic-Tac-Toe game where two players take turns clicking on
    cells to make their moves. The game checks for a winner or a draw after each move
    and displays the result. You can customize the styles and further enhance the game
    based on your preferences.

    You might also like