Hello and welcome to today’s tutorial. In today’s tutorial, we will create a super fun game, called Tic Tac Toe. This game is even called Xs and Os. To build this project we use HTML, CSS and vanilla javascript. No images, libraries or icons are needed.
This project is perfect for javascript intermediates. Absolute javascript beginners might find this project a bit tricky. I have a playlist that consists of 50+ javascript projects on my youtube channel. You can check out the playlist here. Now let us begin with the tutorial.
Video Tutorial:
If you like to code along to a video tutorial, you can check out the video version of this tutorial here down below. Also, Subscribe to my youtube channel, where I post new tutorials tutorial every alternate day.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. The project folder consists of three files. These files are index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file.
HTML:
We start with the HTML section. First copy the code provided below and paste it into your HTML document. HTML creates the layout needed for our game.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
</div>
<button id="restart">Restart</button>
</div>
<div class="popup hide">
<p id="message">Sample Message</p>
<button id="new-game">New Game</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Now that our layout is ready. Let us style it using CSS. For this purpose, copy the code provided below and paste it into the stylesheet you have just created.
Create a Multi-Step Form Using HTML, CSS & JavaScript
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Raleway", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #8052ec, #d161ff);
}
html {
font-size: 16px;
}
.wrapper {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container {
width: 70vmin;
height: 70vmin;
display: flex;
flex-wrap: wrap;
gap: 2vmin;
}
.button-option {
background: #ffffff;
height: 22vmin;
width: 22vmin;
border: none;
border-radius: 8px;
font-size: 12vmin;
color: #d161ff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
#restart {
font-size: 1.3em;
padding: 1em;
border-radius: 8px;
background-color: #0a0027;
color: #ffffff;
border: none;
position: relative;
margin: 1.5em auto 0 auto;
display: block;
}
.popup {
background: linear-gradient(135deg, #8052ec, #d161ff);
height: 100%;
width: 100%;
position: absolute;
display: flex;
z-index: 2;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1em;
font-size: 12vmin;
}
#new-game {
font-size: 0.6em;
padding: 0.5em 1em;
background-color: #0a0027;
color: #ffffff;
border-radius: 0.2em;
border: none;
}
#message {
color: #ffffff;
text-align: center;
font-size: 1em;
}
.popup.hide {
display: none;
}
Javascript:
Finally, all that is left is to add functionality to the project. To do this we use javascript. Here we are using some simple javascript to implement the logic of our game. Do copy the code below and paste it into your script file.
let btnRef = document.querySelectorAll(".button-option");
let popupRef = document.querySelector(".popup");
let newgameBtn = document.getElementById("new-game");
let restartBtn = document.getElementById("restart");
let msgRef = document.getElementById("message");
//Winning Pattern Array
let winningPattern = [
[0, 1, 2],
[0, 3, 6],
[2, 5, 8],
[6, 7, 8],
[3, 4, 5],
[1, 4, 7],
[0, 4, 8],
[2, 4, 6],
];
//Player 'X' plays first
let xTurn = true;
let count = 0;
//Disable All Buttons
const disableButtons = () => {
btnRef.forEach((element) => (element.disabled = true));
//enable popup
popupRef.classList.remove("hide");
};
//Enable all buttons (For New Game and Restart)
const enableButtons = () => {
btnRef.forEach((element) => {
element.innerText = "";
element.disabled = false;
});
//disable popup
popupRef.classList.add("hide");
};
//This function is executed when a player wins
const winFunction = (letter) => {
disableButtons();
if (letter == "X") {
msgRef.innerHTML = "🎉 <br> 'X' Wins";
} else {
msgRef.innerHTML = "🎉 <br> 'O' Wins";
}
};
//Function for draw
const drawFunction = () => {
disableButtons();
msgRef.innerHTML = "😎 <br> It's a Draw";
};
//New Game
newgameBtn.addEventListener("click", () => {
count = 0;
enableButtons();
});
restartBtn.addEventListener("click", () => {
count = 0;
enableButtons();
});
//Win Logic
const winChecker = () => {
//Loop through all win patterns
for (let i of winningPattern) {
let [element1, element2, element3] = [
btnRef[i[0]].innerText,
btnRef[i[1]].innerText,
btnRef[i[2]].innerText,
];
//Check if elements are filled
//If 3 empty elements are same and would give win as would
if (element1 != "" && (element2 != "") & (element3 != "")) {
if (element1 == element2 && element2 == element3) {
//If all 3 buttons have same values then pass the value to winFunction
winFunction(element1);
}
}
}
};
//Display X/O on click
btnRef.forEach((element) => {
element.addEventListener("click", () => {
if (xTurn) {
xTurn = false;
//Display X
element.innerText = "X";
element.disabled = true;
} else {
xTurn = true;
//Display Y
element.innerText = "O";
element.disabled = true;
}
//Increment count on each click
count += 1;
if (count == 9) {
drawFunction();
}
//Check for win on every click
winChecker();
});
});
//Enable Buttons and disable popup on page load
window.onload = enableButtons;
Â
That’s it our tic tac toe game is now ready. You can now go ahead and customize the game as you want. I hope you enjoyed this tutorial.
If you face any issues while creating this code you can download source code by clicking on the download button below. I would love to hear from you. So if you have any questions, feedback or suggestions please drop them below.
Happy Coding!
Â
I like this tutorial. It was being very well built up. Thank you very much. I am goint to follow your webpage. 🙂
mam for me it shows “Uncaught TypeError TypeError: Cannot read properties of null (reading ‘addEventListene