How to Create a Simple Tic-Tac-Toe Game using JavaScript
Create a Tic-Tac-Toe game in JavaScript in less than 20 minutes.
In this tutorial, I will show how to create a Tic-Tac-Toe game in JavaScript in just a few steps.
Before starting this tutorial we will assume that you already have a good understanding of Basic Html, CSS, and JavaScript.
This tutorial shows in quite a simple way how to create a Tic-Tac-Toe game Step 2 Step. This game is built only with the Front end without the use of a Database.
Firstly create an index.html file in which the basic structure of the game is set up.
<!DOCTYPE html>
<html>
<head>
<link
rel=”stylesheet”
href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=”sha384–9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk”
crossorigin=”anonymous”
/>
<link href=”./style.css” rel=”stylesheet” />
<style></style>
</head>
<body style=”margin: 0px;”>
<h1 class=”text-center” style=”margin-top: 20px; margin-bottom: 50px;”>
Codingelements
</h1>
<div class=”container”>
<div class=”row” style=”margin-top: 50px; margin-bottom: 50px;”>
<div
class=”col-sm-6 offset-sm-3"
style=”border: 1px solid black; padding: 20px;”
>
<h2 class=”text-center”>Tic Tac Toe</h2>
<div>
<div class=”row” style=”margin-bottom: 10px;”>
<div class=”col-sm-4">
<button
id=”1"
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
>
?
</button>
</div>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”2"
>
?
</button>
</div>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”3"
>
?
</button>
</div>
</div>
<div class=”row” style=”margin-bottom: 10px;”>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”4"
>
?
</button>
</div>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”5"
>
?
</button>
</div>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”6"
>
?
</button>
</div>
</div>
<div class=”row” style=”margin-bottom: 10px;”>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”7"
>
?
</button>
</div>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”8"
>
?
</button>
</div>
<div class=”col-sm-4">
<button
style=”width: 100%;”
class=”btn btn-primary”
onclick=”game(event)”
id=”9"
>
?
</button>
</div>
</div>
<div class=”row”>
<div class=”col-sm-6 offset-sm-3">
<button
class=”btn btn-danger”
style=”width: 100%;”
onclick=”restart”
>
Restart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”
integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj”
crossorigin=”anonymous”
></script>
<script
src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”
integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”
></script>
<script
src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”
integrity=”sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI”
crossorigin=”anonymous”
></script>
<script src=”main.js”></script>
</body>
</html>After pasting the above code in the index.html file create a main.js file in which all the logic of the game is written.
function spChange(e) {
console.log(e.target.value);
}
function cpChange(e) {
console.log(e.target.value);
}let counter = 1;
function showHistory() {
let element = document.getElementById(“history”);
$(“#history”).empty();
let len = history.length;
let p = document.createElement(“p”);
if (len > 0) {
if (history[len — counter]) {
p.innerText = history[len — counter];
} else {
p.innerText = “No further history available”;
}
element.appendChild(p);
counter++;
}
}let playerCounter = 0;
function game(e) {
let currentPlayer = getPlayer();
$(`#${e.target.id}`).text(currentPlayer);
$(`#${e.target.id}`).prop(“disabled”, true);
playerCounter++;
won();
}
function getPlayer() {
if (playerCounter % 2 === 0) {
return “X”;
} else {
return “0”;
}
}
function won() {
if (
$(“#1”).text() === “X” &&
$(“#2”).text() === “X” &&
$(“#3”).text() === “X”
) {
alert(“Player X won”);
}
}
this is the 3rd and the last step create a style.css file that is used to design the game so that it is somehow attractive.
th {
color: teal;
}
#heading4 {
color: yellow;
}
.brown {
color: brown;
}
.yellow {
color: yellow;
}
.background-yellow {
background-color: yellow;
font-size: 40px;
}.demo {
font-size: 10px;
}.layout {
min-height: 100vh;
background-color: black;
color: white;
background-image: url(“https://img.icons8.com/cute-clipart/1064/000000/facebook-new.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}.btn {
padding: 10px;
min-width: 50px;
border-radius: 5px;
}@media only screen and (min-width: 600px) {
.background-yellow {
background-color: lightblue;
font-size: 20px;
}
}@media only screen and (min-width: 700px) {
.background-yellow {
background-color: red;
font-size: 20px;
}
}
Output:
Conclusion:
Tic Tac Toe is a good project to build not for beginners as well as for intermediate Programmers. Please comment below if you found this article useful and subscribe to the newsletter for the latest Article updates.
Thanks!
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
