How to Make a Tic-Tac-Toe Game in HTML, CSS, and JavaScript

Tic-tac-toe is a simple but timeless game that is enjoyed by people of all ages. Building this game using HTML, CSS, and JavaScript is a great way to practice your coding skills and understand the fundamentals of front-end web development. In this guide, we’ll walk you through how to create a fully functional tic-tac-toe game from scratch using JavaScript, covering layout, styling, and interactivity. By the end, you’ll have a project that you can share and expand upon. Let’s dive in!

what you'll need

Before you start, make sure you have basic knowledge of HTML, CSS, and JavaScript. This project doesn’t require any frameworks or libraries, making it beginner-friendly.

Create HTML Structure

The HTML structure of our tic-tac-toe game will include a title, a 3×3 grid of boxes for the game board, and buttons to reset and start a new game. Here is the HTML code:

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe Game</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="msg-container hide">
      <p id="msg">Winner</p>
      <button id="new-btn">New Game</button>
    </div>
    <main>
      <h1>Tic Tac Toe</h1>
      <div class="container">
        <div class="game">
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
        </div>
      </div>
      <button id="reset-btn">Reset Game</button>
    </main>
    
  <script src="https://codingtutorials.in/wp-content/cache/min/1/7670eb4bb5973714dbeec2e68d20213c.js" data-minify="1"></script></body>
</html>

Adding Styles with CSS

To make your game visually appealing, let’s style it using CSS. We’ll add colors, define the grid layout, and set up the buttons.

				
					* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #548687;
  text-align: center;
}

.container {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game {
  height: 60vmin;
  width: 60vmin;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5vmin;
}

.box {
  height: 18vmin;
  width: 18vmin;
  border-radius: 1rem;
  border: none;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
  font-size: 8vmin;
  color: #b0413e;
  background-color: #ffffc7;
}

#reset-btn, #new-btn {
  padding: 1rem;
  font-size: 1.25rem;
  background-color: #191913;
  color: #fff;
  border-radius: 1rem;
  border: none;
}

#msg {
  color: #ffffc7;
  font-size: 5vmin;
}

.msg-container {
  height: 100vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
}

.hide {
  display: none;
}

Adding Functionality with JavaScript

Now comes the most exciting part – adding functionality to our tic-tac-toe game using JavaScript. We will implement logic to change turns between players, check for win or draw, and reset the game.

				
					let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");

let turnO = true; // Tracks if it's Player O's turn
let count = 0; // Tracks moves to check for draw

const winPatterns = [
  [0, 1, 2],
  [0, 3, 6],
  [0, 4, 8],
  [1, 4, 7],
  [2, 5, 8],
  [2, 4, 6],
  [3, 4, 5],
  [6, 7, 8],
];

const resetGame = () => {
  turnO = true;
  count = 0;
  enableBoxes();
  msgContainer.classList.add("hide");
};

boxes.forEach((box) => {
  box.addEventListener("click", () => {
    box.innerText = turnO ? "O" : "X";
    box.disabled = true;
    turnO = !turnO;
    count++;
    
    if (checkWinner() || count === 9) {
      count === 9 ? gameDraw() : null;
    }
  });
});

const gameDraw = () => {
  msg.innerText = `Game was a Draw.`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const disableBoxes = () => {
  boxes.forEach(box => box.disabled = true);
};

const enableBoxes = () => {
  boxes.forEach(box => {
    box.disabled = false;
    box.innerText = "";
  });
};

const showWinner = (winner) => {
  msg.innerText = `Congratulations, Winner is ${winner}`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const checkWinner = () => {
  return winPatterns.some(pattern => {
    let [a, b, c] = pattern;
    if (boxes[a].innerText && boxes[a].innerText === boxes[b].innerText && boxes[a].innerText === boxes[c].innerText) {
      showWinner(boxes[a].innerText);
      return true;
    }
    return false;
  });
};

newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);

Summary

Creating a tic-tac-toe game in HTML, CSS, and JavaScript is a rewarding project for beginners. We explained how to structure a game board in HTML, style it with CSS, and add game logic with JavaScript. This project is a great way to improve your skills and learn how to develop interactive web applications.

Know more about Fetch data api in javascript