Hello, learner today In this blog post, We will be creating a Tic Tac Toe game using Javascript. In the past post, we have created many projects one of them is the Battery Percentage Detector. Without wasting time Now it is time to create a Tic Tac Toe game.
The Tic-Tac-Toe using JavaScript game is a simple example of a game you can program in JavaScript. Games can be developed using many programming languages, but the most popular for them are C++, JavaScript, and C#.
In the game, Player-1 starts playing the game and both players make their moves. The player who makes a straight 3-block chain wins the game. This game is built on the front end using simple logic and Javascript.
For our Tic-Tac-Toe JavaScript game, we will use three different files since it is a simple game. In the HTML section, we will assign classes to all separate constructors of our game. We will style our game in the style.css. Last but not least we will write our script in the script.js.
If you’re having difficulty understanding what I’m saying or what this Tic Tac Toe game You can ask me in the comment.
| Code By | Coding thai |
| Language Used | HTML, CSS and JS |
| Responsive | Yes |
| External Link / Dependencies | No |
There are 3 types of styles to connect CSS with HTML files. Inline CSS, Internal CSS, External CSS. For Inline CSS in this, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS we have to use the Style tag in the Head section on HTML File. We have used this Internal CSS in The below section. Last is External CSS for this we have to create another CSS File in the same folder this
Preview of Tic Tac Toe game
In this preview, we have used internal CSS in the code. In the internal CSS, we have to write the code in the head section using the Style tag. We have to write the code in <Style> CSS code </style> in the Head section in the HTML file. This code is run in Codepen.io
See the Pen Tic Tac Toe game using Javascript by Coding thai (@Codingthai) on CodePen.
You might like this
- QR Code Generator
- Pixel Art Generator
- Download Button Animation
- Glassmorph Calculator using HTML, CSS, and JS
- Animated Skills Bar using HTML and CSS
Tic Tac Toe game using HTML, CSS, and JS [Source code]
For Creating A Tic Tac Toe game using HTML, CSS, and JS. First, you have to create Three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste the below code, the HTML code in index.html, and paste the CSS code in style.css Again paste the Js code in script.js that’s all after pasting the code.
First, you have to create an HTML file with the named index.html paste the below HTML code on it, and save it. Remember to give a .html extension to the HTML file.
<!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">
<link rel="stylesheet" href="style.css">
<title>Day #6 - XO Game | AsmrProg</title>
</head>
<body>
<h1>Simple XO Game</h1>
<div id="container">
<div class="block">
<div id="box1" class="box top left">
<span data-player="none" onclick="play(this)"> </span>
</div>
<div id="box2" class="box top">
<span data-player="none" onclick="play(this)"> </span>
</div>
<div id="box3" class="box top right">
<span data-player="none" onclick="play(this)"> </span>
</div>
</div>
<div class="block">
<div id="box4" class="box left">
<span data-player="none" onclick="play(this)"> </span>
</div>
<div id="box5" class="box">
<span data-player="none" onclick="play(this)"> </span>
</div>
<div id="box6" class="box right">
<span data-player="none" onclick="play(this)"> </span>
</div>
</div>
<div class="block">
<div id="box7" class="box bottom left">
<span data-player="none" onclick="play(this)"> </span>
</div>
<div id="box8" class="box bottom">
<span data-player="none" onclick="play(this)"> </span>
</div>
<div id="box9" class="box bottom right">
<span data-player="none" onclick="play(this)"> </span>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give a .css extension to the CSS file.
body{
background: ghostwhite;
color: dimgray;
font-family: serif;
text-align: center;
}
h1{
font-size: 2rem;
}
#container{
margin: 5% auto;
border-radius: 5px;
text-align: center;
}
.box{
display: inline-block;
border: 1px solid gray;
width: 100px;
height: 100px;
text-align: center;
box-sizing: border-box;
padding: 0;
}
span{
position: absolute;
font-size: 75px;
font-family: sans-serif;
text-align: center;
height: 75px;
width: 75px;
padding: 0;
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: 10;
margin-top: -50%;
border-radius: 20px;
box-shadow: 0 0 75px 2px dimgray;
animation: larger 0.5s;
animation-fill-mode: forwards;
box-sizing: content-box;
padding: 30px;
bottom: 50px;
top: 0;
}
button{
background: dimgray;
border-radius: 2px;
color: ghostwhite;
border: none;
outline: none;
}
button:focus{
background: silver;
}
.activeBox{
background: silver;
}
@keyframes larger{
from{
height: 75px;
width: 125px;
}
to{
height: 100px;
width: 250px;
}
}After pasting the HTML and CSS code, Now have to create a third Javascript file with the named script.js. Paste the below code on it and save it. Again remember to give a .js extension to the javascript file.
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";
}
}
/* Win Types */
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);
/* No Winner */
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", "");
}
}
function resetGame() {
for (i = 0; i < span.length; i++) {
span[i].dataset.player = "none";
span[i].innerHTML = " ";
}
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;
}That’s all after pasting the code your code will be successfully run. If you get any kind of error/problem in the code just comment or contact me on social media
| Written By | @narendra-chand |
| Code By | Coding thai |