HOW TO MAKE TIC TAC TOE GAME USING HTML CSS AND JS?
In this tutorial, we will make a Tic Tac Toe game using HTML, CSS, and JavaScript.
Tic Tac Toe is a two players game. There will be a board of three by three table cell and two symbols in this game, one for each player. Both players can choose the symbol of their choice. Then they will mark the sign inside of a box of the board. One who got their symbol marked in a sequence of three may be vertical, horizontal, or diagonal.
That player will have won the match, and the player will lose the game who does not get his symbol in a sequence of three. If both of the players do not get their symbols in a line of three, the match will be tie or draw. This is the Tic Tac Toe game logic.
HTML Section
In the HTML section, we will first write the HTML structure and a title for the game “Tic Tac Toe.” We will link the style sheet or external CSS file in HTML for adding style property to the tags. Then inside the HTML body tag, we will make a section in which we will give a title heading.
A div that contains nine cells to create the game board of three by three boxes. After that, we will add a tag to show the game status and a button to restart the game if the player wants to play again. Finally, we will add a script tag to link the JavaScript file to perform actions.
Now Go to Blogger and Click on New Post Or New Page (Wherever you want to publish your Blog).
Now Click on HTML view in Blog Post Page.
Copy the given HTML code and paste it:-
HTML Code:-
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<section>
<h1 class="game--title">Tic Tac Toe</h1>
<div class="game--container">
<div data-cell-index="0" class="cell"></div>
<div data-cell-index="1" class="cell"></div>
<div data-cell-index="2" class="cell"></div>
<div data-cell-index="3" class="cell"></div>
<div data-cell-index="4" class="cell"></div>
<div data-cell-index="5" class="cell"></div>
<div data-cell-index="6" class="cell"></div>
<div data-cell-index="7" class="cell"></div>
<div data-cell-index="8" class="cell"></div>
</div>
<h2 class="game--status"></h2>
<button class="game--restart">Restart Game</button>
</section>
<!-- partial -->
<h3 style="text-align: center;">Created By -<a href="https://www.techandfunzone.eu.org/" target="_blank"> Tech & fun Zone</a></h3>
</body>
</html>
CSS Section
In CSS section, we will give styling to the html elements by using tag name or class name. We can give the class name and in curly braces we will add the properties that we want to apply on the html tags. Add CSS property to the tags like font-size in pixels, background-color with color value, margin, alignment, font-family, width, height, border, and so on.
Now Copy the below code and paste it after <style> tag.(As show in below picture.)
Code Here:
body {
font-family: "Arial", sans-serif;
}
section {
text-align: center;
}
.game--title {
font-size: 100px;
color: #d7a62f;
margin: 10px auto;
}
.game--container {
display: grid;
grid-template-columns: repeat(3, auto);
width: 306px;
margin: 10px auto;
background-color: #11213a;
color: #04c0b2;
}
.cell {
font-family: "Permanent Marker", cursive;
width: 100px;
height: 100px;
box-shadow: 2px 2px 2px 2px #ecd7ba;
border: 2px solid #ecd7ba;
cursor: pointer;
line-height: 100px;
font-size: 60px;
}
.game--status {
font-size: 50px;
color: #d7a62f;
margin: 20px auto;
}
.game--restart {
background-color: #f7e4ac;
width: 200px;
height: 50px;
font-size: 25px;
color: #5586e2;
box-shadow: 2px 2px 2px 2px #d86c23;
border: 2px solid #d86c23;
}
JavaScript Section
In the JavaScript section, we will define players with symbols “X” and “O.” Action will be true means active for the current player. One player will act, then the current player will change to the second player and vice versa. It will show the status of the game accordingly. Like it’s the turn of “X” or “O,” or one of them won or game is a tie, etc. We will set the winning conditions according to the sequence of three identical symbols or game logic. There are eight possibilities of winning each player. On the button click, the game will start again.
Now we will paste the given code after </section> tag.(As show in below picture.)
<script>const statusDisplay = document.querySelector('.game--status');
let gameActive = true;
let currentPlayer = "X";
let gameState = ["", "", "", "", "", "", "", "", ""];
const winningMessage = () => `Player ${currentPlayer} has won!`;
const drawMessage = () => `Game ended in a draw!`;
const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`;
statusDisplay.innerHTML = currentPlayerTurn();
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
function handleCellPlayed(clickedCell, clickedCellIndex) {
gameState[clickedCellIndex] = currentPlayer;
clickedCell.innerHTML = currentPlayer;
}
function handlePlayerChange() {
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusDisplay.innerHTML = currentPlayerTurn();
}
function handleResultValidation() {
let roundWon = false;
for (let i = 0; i <= 7; i++) {
const winCondition = winningConditions[i];
let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
break
}
}
if (roundWon) {
statusDisplay.innerHTML = winningMessage();
gameActive = false;
return;
}
let roundDraw = !gameState.includes("");
if (roundDraw) {
statusDisplay.innerHTML = drawMessage();
gameActive = false;
return;
}
handlePlayerChange();
}
function handleCellClick(clickedCellEvent) {
const clickedCell = clickedCellEvent.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute('data-cell-index'));
if (gameState[clickedCellIndex] !== "" || !gameActive) {
return;
}
handleCellPlayed(clickedCell, clickedCellIndex);
handleResultValidation();
}
function handleRestartGame() {
gameActive = true;
currentPlayer = "X";
gameState = ["", "", "", "", "", "", "", "", ""];
statusDisplay.innerHTML = currentPlayerTurn();
document.querySelectorAll('.cell').forEach(cell => cell.innerHTML = "");
}
document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick));
document.querySelector('.game--restart').addEventListener('click', handleRestartGame);
</script>
After writing the code you can Publish the Page and open it in the compatible or modern browser to run the game. And enjoy playing the game.
Click Here to Play the Tic Tac Toe Game.
CONCLUSION
Final Words, we made a tic tac toe game using HTML, CSS, and JavaScript. We discussed the process of creating or building the game. Also, we discussed the process of playing the game as well. We write the code separately and define each section. The source code of the game is given above. You can execute it on your own, and a video will be also availabe soon to let you know how to play it.
© Tech & Fun Zone