Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Tik Tac Toe" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Tik Tac Toe" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Tik Tac Toe [Source Code]
To get the following HTML, CSS & JS code for the Tik Tac Toe project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Tik Tac Toe Game</h1>
<div class="container">
<div data-index="0" class="box"></div>
<div data-index="1" class="box"></div>
<div data-index="2" class="box"></div>
<div data-index="3" class="box"></div>
<div data-index="4" class="box"></div>
<div data-index="5" class="box"></div>
<div data-index="6" class="box"></div>
<div data-index="7" class="box"></div>
<div data-index="8" class="box"></div>
</div>
<div class="status"></div>
<button class="restartBtn">Restart 🔁</button>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
font-family: "Poppins", sans-serif;
}
body {
width: 100vw;
height: 100vh;
background-color: lightslategray;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
color: white;
font-size: 32px;
padding: 5px 50px;
background-color: black;
border-radius: 50px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 3px;
word-spacing: 3px;
}
.container {
display: grid;
grid-template-columns: repeat(3, auto);
border: 2px solid black;
}
.box {
width: 120px;
height: 120px;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 25px;
}
.box img {
width: 75px;
}
.status {
margin: 20px 0;
padding: 10px 40px;
border-radius: 50px;
font-size: 20px;
font-weight: 500;
background-color: white;
color: black;
}
button {
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: white;
background-color: black;
border-radius: 5px;
cursor: pointer;
}
button:active {
transform: scale(0.9);
}
.win {
animation: winAnim ease-in-out 1s infinite;
}
@keyframes winAnim {
0% {
background-color: green;
}
100% {
background-color: lightgreen;
}
}
JavaScript
const boxEls=document.querySelectorAll('.box');
const statusEl=document.querySelector('.status');
const restartBtnEl=document.querySelector('.restartBtn');
let x="<img src='X-Player.png'>";
let o="<img src='O-Player.png'>";
// Total Win Possibilities
const win=[
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];
// Initial Condition all the boxes are empty.
let options=["","","","","","","","",""];
// Image of X or O to place in a box.
let currentPlayer=x;
// Text of X or O to place in the status.
let player="X";
let running=false;
init();
// Initially it adds click event to every box. as if we click on any of the box then it calls the boxClick function.
function init(){
boxEls.forEach(box=>box.addEventListener('click',boxClick));
restartBtnEl.addEventListener('click',restartGame);
statusEl.textContent=`Now "${player}" Turn`;
running=true;
}
function boxClick(e){
// it takes the index value of the clicked box
const index=e.target.dataset.index;
// if the box is not empty or running is false then it simply returns
if(options[index]!="" || !running){
return;
}
// otherwise, the box and boxIndex is given as arguments to the updateBox function.
updateBox(e.target,index);
// after updating it checks for win condition by calling checkWinner function.
checkWinner();
}
// update the empty box to a X or O image and also updates the status.
function updateBox(box,index){
options[index]=player;
box.innerHTML=currentPlayer;
}
// This function is used to change the player (i.e if player=X then player=O, or If player=O then player=X)
function changePlayer(){
player=(player=='X') ? "O" :"X";
currentPlayer=(currentPlayer==x) ? o :x;
statusEl.textContent=`Now "${player}" Turn`;
statusEl.style.color = "black"
}
// this function resets all the variable to initial condition.
function restartGame(){
options=["","","","","","","","",""];
currentPlayer=x;
player="X";
running=true;
statusEl.textContent=`Now "${player}" Turn`;
statusEl.style.color = "black"
restartBtnEl.textContent = "Restart 🔁"
boxEls.forEach(box=>{
box.innerHTML="";
box.classList.remove('win');
});
}
// Checks winner
function checkWinner(){
let isWon=false;
// checks all the possibilities of wins which we have given in an win array.
for(let i=0;i<win.length;i++){
const condition=win[i];
const box1=options[condition[0]];
const box2=options[condition[1]];
const box3=options[condition[2]];
if(box1=="" || box2=="" || box3==""){
continue;
}
// if any of win condition is true then this adds win class to that boxes and isWon turns to true.s
if(box1==box2 && box2==box3){
isWon=true;
boxEls[condition[0]].classList.add('win');
boxEls[condition[1]].classList.add('win');
boxEls[condition[2]].classList.add('win');
}
}
// if win then this will execute.
if(isWon){
statusEl.textContent=`Hurrah...! "${player}" Won the game🕺`;
statusEl.style.color = "green"
restartBtnEl.textContent = "Play Again 😉"
running=false;
// if the game is draw then this executes.
}else if(!options.includes("")){
statusEl.textContent=`Oops..! Game Draw..!`;
statusEl.style.color = "red"
restartBtnEl.textContent = "Play Again 😉"
running=false;
// else the player will change to continue the game.
}else{
changePlayer();
}
}
Generating Download Link...