How to make Tic Tac Toe Game
with HTML,CSS and JavaScript
How is tic-tac-toe game played?
You are X , your friend (or the computer in this case) is O . Players take turns putting their marks in empty squares. The first player to get 3 of her marks in a row (up, down, across, or diagonally) is the winner. When all 9 squares are full, the game is over.
Video Tutorial of Tic Tac Toe Game
Tic Tac Toe Game [Source Codes]
To Create Tic Tac Toe Game with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Tic Tac Toe</title>
- <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 src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: Arial, sans-serif;
- }
- body {
- height: 100vh;
- background: linear-gradient(#1DAAEF, #282A35);
- }
- html {
- font-size: 16px;
- }
- .wrapper {
- position: absolute;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
- }
- .container {
- width: 70vmin;
- height: 70vmin;
- box-shadow:
- 10px 10px 15px rgba(0, 0, 0, 0.2),
- -10px -10px 15px rgba(0, 0, 0, 0.2),
- -10px 10px 15px rgba(0, 0, 0, 0.2),
- 10px -10px 15px rgba(0, 0, 0, 0.2);
- display: flex;
- flex-wrap: wrap;
- gap: 2vmin;
- }
- .button-option {
- background: #ffffff;
- height: 22vmin;
- width: 22vmin;
- border: none;
- border-radius: 10px;
- font-size: 14vmin;
- color: #000000;
- box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
- text-shadow: 2px 2px 24px rgba(0, 0, 0, 0.5);
- }
-
- #restart {
- font-size: 1.3em;
- padding: 12px;
- border-radius: 8px;
- background-color: #606060;
- color: #ffffff;
- border: none;
- position: relative;
- margin: 1.5em auto 0 auto;
- display: block;
- }
- #restart:hover{
- background-color: #1DAAEF;}
- .popup {
- background: linear-gradient(#1DAAEF, #282A35);
- 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: 10px;
- background-color: #606060;
- color: #ffffff;
- border-radius: 0.2em;
- border: none;
- }
- #new-game:hover{
- background-color: #1DAAEF;
- }
- #message {
- color: #000000;
- text-align: center;
- font-size: 1em;
- }
- .popup.hide {
- display: none;
- }
-
Now paste the following codes into your script.js 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");
-
- 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],
- ];
-
- let xTurn = true;
- let count = 0;
-
-
- const disableButtons = () => {
- btnRef.forEach((element) => (element.disabled = true));
- //enable popup
- popupRef.classList.remove("hide");
- };
-
- const enableButtons = () => {
- btnRef.forEach((element) => {
- element.innerText = "";
- element.disabled = false;
- });
-
- popupRef.classList.add("hide");
- };
-
- const winFunction = (letter) => {
- disableButtons();
- if (letter == "X") {
- msgRef.innerHTML = "🎉 <br> 'X' Wins";
- } else {
- msgRef.innerHTML = "🎉 <br> 'O' Wins";
- }
- };
-
-
- const drawFunction = () => {
- disableButtons();
- msgRef.innerHTML = "😎 <br> It's a Draw";
- };
-
-
- newgameBtn.addEventListener("click", () => {
- count = 0;
- enableButtons();
- });
- restartBtn.addEventListener("click", () => {
- count = 0;
- enableButtons();
- });
-
-
- const winChecker = () => {
-
- for (let i of winningPattern) {
- let [element1, element2, element3] = [
- btnRef[i[0]].innerText,
- btnRef[i[1]].innerText,
- btnRef[i[2]].innerText,
- ];
-
- if (element1 != "" && (element2 != "") & (element3 != "")) {
- if (element1 == element2 && element2 == element3) {
-
- winFunction(element1);
- }
- }
- }
- };
-
- btnRef.forEach((element) => {
- element.addEventListener("click", () => {
- if (xTurn) {
- xTurn = false;
-
- element.innerText = "X";
- element.disabled = true;
- } else {
- xTurn = true;
-
- element.innerText = "O";
- element.disabled = true;
- }
-
- count += 1;
- if (count == 9) {
- drawFunction();
- }
-
- winChecker();
- });
- });
-
- window.onload = enableButtons;
-
If you face any difficulties while creating your Tic Tac Toe Game or your code is not working as expected, you can download the source code files by clicking download button.