ADVERTISEMENT

Tic Tac Toe Game Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Tic Tac Toe Game Using HTML,CSS and JavaScript

Tic Tac Toe Game Using HTML,CSS and JavaScript
Tic Tac Toe Game Using HTML,CSS and JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

Welcome to Code With Random blog. In this blog, We will build a Tic-Tac-Toe Game. We will discuss how you can make your own tic tac toe game using Vanilla javascript.

For this project, we will use HTML, CSS, and basic Vanilla javascript. A basic understanding of the above technologies is all you need to get started.

ADVERTISEMENT

Hope you enjoy our blog so let’s start with a basic HTML structure for tic tac toe javascript.

ADVERTISEMENT

Tic Tac Toe Game Using HTML,CSS and JavaScript

Tic Tac Toe Game Using HTML,CSS and JavaScript

HTML Code For Tic Tac Toe Game

After writing all the boilerplate code, we create a div element that works as a container of our game.

ADVERTISEMENT

A tic-tac-toe game board has 3 rows and 3 columns i.e. 3×3 = 9 squares in total. We will create a board structure inside the container.

Inside each square, we are adding a span element with the data-player attribute and assign the value ‘none’ in the beginning. Moreover, we are adding onClick() Event Listener to make¬†the square¬†responsive.

When a square box is clicked the play() function executes.

ADVERTISEMENT

<body>
<h1> Tic Tac Toe </h1>
<div id="container">
<div class="block">
<div id="box1" class="box top left">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
<div id="box2" class="box top">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
<div id="box3" class="box top right">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
</div>
<div class="block">
<div id="box4" class="box left">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
<div id="box5" class="box">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
<div id="box6" class="box right">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
</div>
<div class="block">
<div id="box7" class="box left bottom">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
<div id="box8" class="box bottom">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
<div id="box9" class="box right bottom">
<span data-player="none" onclick="play(this)">&nbsp;</span>
</div>
</div>
</div>
</body>
There is all the Html Code for the Tic Tac Toe Game. Now, you can see output without Css and JavaScript. then we write Css for Styling of Tic Tac Toe Game and give the Main Functionality of the Tic Tac Toe Game using javascript.

Html Code Output

ADVERTISEMENT

 

simple tic tac toe html code

CSS Code For Tic Tac Toe Game

body{
background: ghostwhite;
color: dimgray;
font-family: 'Quicksand', serif;
text-align: center;
}
h1{font-size: 200%;}
#container {
margin: 5% auto;
border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;
text-align: center;
}
.box{
display: inline-block;
border: 1px solid grey;
width: 100px;
height: 100px;
text-align: center;
box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
padding: 0px;
}
span{
position: absolute;
font-size: 75px;
font-family: 'Raleway', sans-serif;
text-align: center;
height: 75px;
width: 75px;
padding: 0px;
margin: 5px;
margin-left: -35px;
}
.top{border-top: none;}
.bottom{border-bottom: none;}
.left{border-left: none;}
.right{border-right: none;}
.alert{
height: 75px;
width : 125px;
display: inline-block;
background: ghostwhite;
position: relative;
z-index: 7;
margin-top: -50%;
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
box-shadow: 0 0 75px 2px dimgray;
animation: larger 0.5s; -webkit-animation: larger 0.5s; -moz-animation: larger 0.5s;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;
padding:30px;
bottom: 50px;
top: 0px;
}
@keyframes larger{ from{height: 75px; width: 125px;} to{height: 100px;width: 250px;}}
@-webkit-keyframes larger{ from{height: 75px; width: 125px;} to{height: 100px;width: 250px;}}
@-moz-keyframes larger{ from{height: 75px; width: 125px;} to{height: 100px;width: 250px;}}
@-o-@keyframes larger{ from{height: 75px; width: 125px;} to{height: 100px;width: 250px;}}
button{
background: dimgray;
border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
color: ghostwhite;
border: none;
outline: none;
}
button:focus{background: silver;}
.activeBox{background: silver;}

Now we have completed our Styling Of Tic Tac Toe Game. Here is our updated output HTML + CSS.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Output

 

ADVERTISEMENT

Simple Tic Tac Toe game CSS

 

ADVERTISEMENT

 

ADVERTISEMENT

JavaScript Code For Tic Tac Toe Game

var playerTurn, moves, isGameOver, span, restartButton;
playerTurn = "x";
moves = 0;
isGameOver = false;
span = document.getElementsByTagName("span");
restartButton = '<button onclick="playAgain()"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/></svg></button>';
function play(y){
if (y.dataset.player=="none" && window.isGameOver == false) {
y.innerHTML = playerTurn;
y.dataset.player = playerTurn;
moves++;
if (playerTurn=="x") {
playerTurn="o";
} else if (playerTurn=="o") {
playerTurn="x"
}
}
checkWinner(1,2,3);
checkWinner(4,5,6);
checkWinner(7,8,9);
checkWinner(1,4,7);
checkWinner(2,5,8);
checkWinner(3,6,9);
checkWinner(1,5,9);
checkWinner(3,5,7);
if (moves == 9 && isGameOver == false) {draw();}
}
function checkWinner(a, b, c) {
a--; b--; c--;
if (
(span[a].dataset.player === span[b].dataset.player) &&
(span[b].dataset.player === span[c].dataset.player) &&
(span[a].dataset.player === span[c].dataset.player) &&
((span[a].dataset.player === "x") || span[a].dataset.player == "o")&&
isGameOver == false
) {
span[a].parentNode.className += " activeBox";
span[b].parentNode.className += " activeBox";
span[c].parentNode.className += " activeBox";
gameOver(a);
}
}
function playAgain(){
document.getElementsByClassName("alert")[0].parentNode.removeChild(document.getElementsByClassName("alert")[0]);
resetGame();
window.isGameOver = false;
for(var k =0; k<span.length; k++){
span[k].parentNode.className= span[k].parentNode.className.replace("activeBox", "");//remove activebox class; you can use classlist.remove , but it doesn't support all browsers
}
}
function resetGame(){
for (i=0; i<span.length; i++){
span[i].dataset.player = "none";
span[i].innerHTML = "&nbsp;"
}
playerTurn = "x";
}
function gameOver(a){
var gameOverAlertElement = "<b>GAME OVER</b><br><br> Player " + span[a].dataset.player.toUpperCase() + ' Win !!! <br><br>' + restartButton
var div = document.createElement("div");
div.className = "alert";
div.innerHTML = gameOverAlertElement;
document.getElementsByTagName("body")[0].appendChild(div);
window.isGameOver = true;
moves = 0;
}
function draw(){
var drawAlertElement = '<b>DRAW!!!</b><br><br>' + restartButton;
var div = document.createElement("div");
div.className = "alert";
div.innerHTML = drawAlertElement;
document.getElementsByTagName("body")[0].appendChild(div);
window.isGameOver = true;
moves = 0;
}

Final Output Of Tic Tac Toe Game Using JavaScript

ADVERTISEMENT

Tic Tac Toe Game Using HTML,CSS and JavaScript

ADVERTISEMENT

 

How to make Password Generator Using HTML, CSS, & JavaScript

Now we have completed our Tic Tac Toe Game. Here is our updated output with JavaScript. Hope you like Tic Tac Toe Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create Tic Tac Toe Game Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by РCode With Random/Anki 

ADVERTISEMENT

Telegram Group Join Now

Share on:

1 thought on “Tic Tac Toe Game Using HTML,CSS and JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT