Tic Tac Toe Game using HTML, CSS & JavaScript

Tic Tac Toe Game using HTML, CSS & JavaScript

Tic Tac Toe Game using HTML, CSS & JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make Tic Tac Toe Game which we all know a X and O game which we all have played in our childhood but lets make that game digital using front end development tool. In Today’s session, We will use HTML, CSS, and JavaScript to complete this Tic Tac Toe Game Project.

Project Description

Step 1
The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make Tic Tac Toe Game Project.

Step 2
Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Tic Tac Toe Game Project.

Step 3
At last we will use JS (JavaScript) which will add a logic to make the Tic Tac Toe Game Project responsive from the user end.

I hope you have got an idea about the project.

HTML Code for Tic Tac Toe Game

First we’ll start with creating the structure of the Tic Tac Toe Game project for that as you can see the above code we have used all the necessary elements & attributes to setup the structure. Let us know code the CSS part to add styling and aligned the tags.

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

50+ HTML, CSS & JavaScript Projects With Source Code

CSS Code for Tic Tac Toe Game

Second comes the CSS code in which we have styled for the structure we have padded as well as aligned the Tic Tac Toe Game project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now lets code the JavaScript part to make responsive.

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

Portfolio Website using HTML and CSS (Source Code)

JavaScript Code for Tic Tac Toe Game

Last stage of the project the JavaScript in which we have added the logical and coded as per the requirement with some conditions. In this script we have defined when to declare winner between X and O. Let us see the Final Output of the project Tic Tac Toe Game using HTML, CSS & JavaScript (Source Code).

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;

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Final Output


We have Successfully created our Tic Tac Toe Game using HTML, CSS & JavaScript (Source Code). You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Code Idea – codingartist

Written By – Harsh Sawant

Code By – @harshh9



Tags: ,

Leave a Reply