Scribd
Upload
10 views2 pages

Tic Tac Toe - HTM

This document contains the HTML, CSS, and JavaScript code for a Tic Tac Toe game. It includes a game board layout, player turn management, win checking logic, and functionality to reset the game. The game allows two players to take turns placing their marks on a 3x3 grid until one wins or the game ends in a tie.

Uploaded by

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

Tic Tac Toe - HTM

This document contains the HTML, CSS, and JavaScript code for a Tic Tac Toe game. It includes a game board layout, player turn management, win checking logic, and functionality to reset the game. The game allows two players to take turns placing their marks on a 3x3 grid until one wins or the game ends in a tie.

Uploaded by

kgilani71
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
.board {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
margin: 0 auto;
border: 2px solid black;
}

.square {
width: 98px;
height: 98px;
margin: -1px 0 0 -1px;
border: 1px solid black;
font-size: 72px;
text-align: center;
line-height: 1;
cursor: pointer;
}

.square:hover {
background-color: #eee;
}
</style>
<script>
// Array to hold the game board
let board = ["", "", "", "", "", "", "", "", ""];

// Array to hold the players (X and O)


let players = ["X", "O"];

// Index of the current player


let currentPlayer = 0;

// Function to handle when a square is clicked


function squareClick(square) {
if (board[square.id] === "") {
board[square.id] = players[currentPlayer];
square.innerText = players[currentPlayer];
square.style.color = (currentPlayer === 0) ? "red" : "blue";
checkWin();
currentPlayer = (currentPlayer === 0) ? 1 : 0;
}
}

// Function to check if a player has won


function checkWin() {
let winCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];

for (let i = 0; i < winCombinations.length; i++) {


let [a, b, c] = winCombinations[i];
if (board[a] !== "" && board[a] === board[b] && board[a] === board[c]) {
alert(`${board[a]} wins!`);
resetGame();
return;
}
}

if (!board.includes("")) {
alert("It's a tie!");
resetGame();
return;
}
}

// Function to reset the game


function resetGame() {
board = ["", "", "", "", "", "", "", "", ""];
currentPlayer = 0;
let squares = document.getElementsByClassName("square");
for (let i = 0; i < squares.length; i++) {
squares[i].innerText = "";
squares[i].style.color = "black";
}
}
</script>
</head>
<body>
<div class="board">
<div class="square" id="0" onclick="squareClick(this)"></div>
<div class="square" id="1" onclick="squareClick(this)"></div>
<div class="square" id="2" onclick="squareClick(this)"></div>
<div class="square" id="3" onclick="squareClick(this)"></div>
<div class="square" id="4" onclick="squareClick(this)"></div>
<div class="square" id="5" onclick="squareClick(this)"></

You might also like