Ttic Tac Toe Game
Two Player Game - P[Player] vs P[Player]
Code:
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
/* Add CSS styles here */
/* Overall Tic Tac Toe Wrapper */
#tic-tac-toe {
width: 300px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
/* Tic Tac Toe Grid */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
/* Tic Tac Toe Grid Squares */
.grid-square {
width: 100px;
height: 100px;
background-color: #f2f2f2;
border: 1px solid #ccc;
font-size: 60px;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
/* Tic Tac Toe Grid Squares Hover */
.grid-square:hover {
background-color: #e6e6e6;
cursor: pointer;
}
</style>
</head>
<body>
<div id="tic-tac-toe">
<div class="grid">
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
<div class="grid-square" onclick="play(this)"></div>
</div>
</div>
<script>
var player = "X";
var winner = "";
function play(square) {
if (square.textContent === "") {
square.textContent = player;
count+=1;
checkForWinner();
if (winner === "") {
if (player === "X") {
player = "O";
} else {
player = "X";
}
if(count===9){
count = 0;
alert("Draw the match!");
clearBoard();
}
} else {
count =0;
alert(winner + " wins!");
clearBoard();
}
}
}
function checkForWinner() {
// check rows
for (var i = 0; i < 9; i += 3) {
if (document.getElementsByClassName("grid-square")[i].textContent === player
&& document.getElementsByClassName("grid-square")[i + 1].textContent === player
&& document.getElementsByClassName("grid-square")[i + 2].textContent === player) {
winner = player;
return;
}
}
// check columns
for (var i = 0; i < 3; i++) {
if (document.getElementsByClassName("grid-square")[i].textContent === player
&& document.getElementsByClassName("grid-square")[i + 3].textContent === player
&& document.getElementsByClassName("grid-square")[i + 6].textContent === player) {
winner = player;
return;
}
}
// check diagonals
if (document.getElementsByClassName("grid-square")[0].textContent === player
&& document.getElementsByClassName("grid-square")[4].textContent === player
&& document.getElementsByClassName("grid-square")[8].textContent === player) {
winner = player;
return;
}
if (document.getElementsByClassName("grid-square")[2].textContent === player
&& document.getElementsByClassName("grid-square")[4].textContent === player
&& document.getElementsByClassName("grid-square")[6].textContent === player) {
winner = player;
return;
}
}
function clearBoard() {
// reset the board and winner variable
for (var i = 0; i < 9; i++) {
document.getElementsByClassName("grid-square")[i].textContent = "";
}
winner = "";
}
</script>
</body>
</html>