Simple tic-tac-toe javascript | Tic Tac Toe game html







Simple tic-tac-toe javascript | Tic Tac Toe game HTML 

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. 

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

HTML code for simple tic tac toe 

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

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

Inside each square, we are adding a span element with the data-player attribute and assigning 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.

 <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 HTML code for the tic tac toe javascript. Now, you can see output without CSS, then we write CSS for our tic tac toe javascript.

output

simple tic tac toe html code

CSS for tic tac toe

Next, we will style our project using CSS.

 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 CSS section,  Here is our updated output CSS.

output

Simple Tic Tac Toe game CSS

Now add javascript to add functionality to this game 

Javascript for tic tac toe

 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;
}

Javascript project ideas with source code  by Code With Random

output

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like tic tac toe javascript, 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 a tic tac toe javascript  using simple 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 

Share on:

0 thoughts on “Simple tic-tac-toe javascript | Tic Tac Toe game html”

Leave a Comment