To create Tic Tac Toe game we used JavaScript language to develop this game. Google Tic Tac Tak multiplayer online game is very easy to create using javascript. So, today we created this Tic Tac Toe online game with the help of HTML, CSS and JavaScript with source code, you can simply download the complete source code in one click.
<!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 Game - by Sahilharyana.com</title>
<!-- This code was downloaded from www.sahilharyana.com -->
<link rel="stylesheet" href="tictaktoe.css" />
</head>
<body>
<div class="msg-container hide">
<p id="msg">Winner</p>
<button id="new-btn">New Game</button>
</div>
<main>
<h1>Tic Tac Toe</h1>
<div class="container">
<div class="game">
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
</div>
</div>
<button id="reset-btn">Reset Game</button>
</main>
<script src="tictactoe.js"></script>
</body>
</html>
/* CSS code goes here */
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
text-align: center;
}
main h1{
color: white;
margin-top: 20px;
font-family: 'Courier New', Courier, monospace;
font-size: 50px;
}
.container {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
/*This code was downloaded from www.sahilharyana.com */
.game {
height: 60vmin;
width: 60vmin;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5vmin;
}
.box {
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
font-size: 8vmin;
color: #b0413e;
box-shadow: 0px 0px 3px white;
background: none;
cursor: pointer;
}
.box:active{
background-color: rgb(54, 54, 56);
opacity: 50%;
}
#reset-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
cursor: pointer;
margin-bottom: 30px;
}
#new-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
cursor: pointer;
}
#msg {
color: #ffffc7;
font-size: 5vmin;
}
.msg-container {
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 4rem;
}
.hide {
display: none;
}
// JavaScript code goes here
let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
//This code was downloaded from www.sahilharyana.com
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");
let turnO = true; //playerX, playerO
let count = 0; //To Track Draw
const winPatterns = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 5, 8],
[2, 4, 6],
[3, 4, 5],
[6, 7, 8],
];
const resetGame = () => {
turnO = true;
count = 0;
enableBoxes();
msgContainer.classList.add("hide");
};
boxes.forEach((box) => {
box.addEventListener("click", () => {
if (turnO) {
//playerO
box.innerText = "O";
box.style.color = "#b0413e";
turnO = false;
} else {
//playerX
box.innerText = "X";
box.style.color = "#008000";
turnO = true;
}
box.disabled = true;
count++;
let isWinner = checkWinner();
if (count === 9 && !isWinner) {
gameDraw();
}
});
});
const gameDraw = () => {
msg.innerText = `Game was a Draw.`;
msgContainer.classList.remove("hide");
disableBoxes();
};
const disableBoxes = () => {
for (let box of boxes) {
box.disabled = true;
}
};
const enableBoxes = () => {
for (let box of boxes) {
box.disabled = false;
box.innerText = "";
}
};
const showWinner = (winner) => {
msg.innerText = `Congratulations, Winner is ${winner}`;
msgContainer.classList.remove("hide");
disableBoxes();
};
const checkWinner = () => {
for (let pattern of winPatterns) {
let pos1Val = boxes[pattern[0]].innerText;
let pos2Val = boxes[pattern[1]].innerText;
let pos3Val = boxes[pattern[2]].innerText;
if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
if (pos1Val === pos2Val && pos2Val === pos3Val) {
showWinner(pos1Val);
return true;
}
}
}
};
newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);
Here is the brief explanation of Tic Tac Toe Game using JavaScript. This is a simple game which is played by two players. The game is played on a 3x3 grid. The players take turns to place their marks on the grid. The first player to get three of their marks in a row (vertically, horizontally, or diagonally) is the winner.
In this project we created a fully functional and working multiplayer tic tac toe online multiplayer game using JavaScript.
About HTML Code -
To create this wonderful tic tac toe game using html css javascript first we need to create its layout so to create its layout we will use HTML language. And HTML code is very simple we just need to create 9 boxes in 3X3 grid. So we used butt
About CSS Code -
Finally! we are at the CSS code. CSS code is not that much important to create tic tac toe game but without this we can't create our tic tac toe game. So, in the css code we have to style our tic tac toe game layout, so you style accordingly which style you want to give your tic tac toe game.
About JavaScript Code -
JavaScript is one of the most important code in order to make tic tac toe multiplayer online game, because using without JavaScript its not possible to create this. So, lets dive into this - Fisrt of all we will access the button which we created in HTML, so we will use document.querySelectorAll and access button using buttons id. which was #box. And then we have to identify winning patterns of our tic tac toe, it means what are the winning patterns when any of the player's cross' (X) aur 'naught' (O) creates a single line. If all the three naught/ cross comes in a streight line of our 3x3 grid then that player will win the game. So this is called as winning patterns.
And then we need to create a constant to check the winner, like if any of the winning paterns matches then outr winner should be declare, so fo this we created a const checkWinner and then for each three induidual boxes need to store in pos1Val, pos2Val, and pos3Val respectively also one importnat thing we missed, after identifying the winning paterns of our tic tac toe game then we have to create functionalities like this - if any of the player clicks any of the boxes then there should appear one symbol of our tic tac toe game. so we used boxes.forEach loop and in this loop we need to use box.addEventListner and evenListner is "click". and add box.innertext = "O" else "X".
And finally after all these things we can show our winner whenever any of the player matches any of the winning pattern. And we have one more condition if the game is tie in that case we should have some functionalities to show "Game Was Tie". So, for this we can create one variable called count and
if (count === 9 && !isWinner) {
gameDraw();
}
Usefull links for you -
How to make dark and light mode in JavaScript?