Scribd
Upload
42 views2 pages

Tic Webpage Code

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.

Uploaded by

mongggo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views2 pages

Tic Webpage Code

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.

Uploaded by

mongggo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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