In this article, I am going to share free source codes with you to develop Tic Tac Toe Game Using HTML, CSS, and JavaScript.

Tic Tac Toe Game Using HTML, CSS, and JavaScript (Free Source Code)

Byjvcodes

Tic Tac Toe is perhaps one of the most common two players’ game. Playful but not simple; that is the extent of the complexity in undertaking this project for web development.

In this article, I am going to share free source codes with you to develop Tic Tac Toe Game Using HTML, CSS, and JavaScript.

This code is written using very good programming style with absolutely clear way of implementation for easy understanding.

GitHub Source: Tic Tac Toe Game

Features

The source code provided for the Tic Tac Toe game includes the following standout features:

  • User-Friendly Interface: It is fully responsive and visually designs in a way to ensure that optimal experience happens at every device possible.
  • Interactive Gameplay: The transition and hover effects bring extra value and enriched immersion into in-game experience.
  • Smart Bot Integration: There is a bot with random move logic which adds the benefit of being able to play the game alone.
  • Win or Draw Detection: Automated recognition of game results with the possibility of choosing win or draw and receiving a corresponding message at the end.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Tic Tac Toe Game

It is easy to build the Tic Tac Toe Game Using HTML, CSS, and JavaScript . All you need to do is to take the code given below and paste them separately into HTML, CSS, and JavaScript files within your project folder. Then it can be linked to these files within an HTML document. After this, the user can open the created HTML file in the browser and play the final game.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe Game | JV Codes</title>
    <link rel="stylesheet" href="style.css">
    <!-- Linking Font Awesome For Icons (X and O) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <!-- select box -->
  <div class="select-box">
    <header>Tic Tac Toe</header>
    <div class="content">
      <div class="title">Select which you want to be?</div>
      <div class="options">
        <button class="playerX">Player (X)</button>
        <button class="playerO">Player (O)</button>
      </div>
    </div>
  </div> 

  <!-- playboard section -->
  <div class="play-board">
    <div class="details">
      <div class="players">
        <span class="Xturn">X's Turn</span>
        <span class="Oturn">O's Turn</span>
        <div class="slider"></div>
      </div>
    </div>
    <div class="play-area">
      <section>
        <span class="box1"></span>
        <span class="box2"></span>
        <span class="box3"></span>
      </section>
      <section>
        <span class="box4"></span>
        <span class="box5"></span>
        <span class="box6"></span>
      </section>
      <section>
        <span class="box7"></span>
        <span class="box8"></span>
        <span class="box9"></span>
      </section>
    </div>
  </div>

  <!-- result box -->
  <div class="result-box">
    <div class="won-text"></div>
    <div class="btn"><button>Replay</button></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the Tic Tac Toe Game:

/* Importing Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #00b99a;
}

.select-box,
.play-board,
.result-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.select-box {
  background: #fff;
  padding: 20px 25px 25px;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
}

.select-box.hide {
  opacity: 0;
  pointer-events: none;
}

.select-box header {
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid lightgrey;
}

.select-box .title {
  font-size: 22px;
  font-weight: 500;
  margin: 20px 0;
}

.select-box .options {
  display: flex;
  width: 100%;
}

.options button {
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  border: none;
  background: #008f77;
  border-radius: 5px;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.options button:hover,
.btn button:hover {
  background: #006151;
}

.options button.playerX {
  margin-right: 5px;
}

.options button.playerO {
  margin-left: 5px;
}

.select-box .credit {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}

.select-box .credit a {
  color: #008f77;
  text-decoration: none;
}

.select-box .credit a:hover {
  text-decoration: underline;
}

.play-board {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}

.play-board.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.play-board .details {
  padding: 7px;
  border-radius: 5px;
  background: #fff;
}

.play-board .players {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
}

.players span {
  position: relative;
  z-index: 2;
  color: #008f77;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  cursor: default;
  user-select: none;
  transition: all 0.3 ease;
}

.players.active span:first-child {
  color: #fff;
}

.players.active span:last-child {
  color: #008f77;
}

.players span:first-child {
  color: #fff;
}

.players .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #008f77;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.players.active .slider {
  left: 50%;
}

.players.active span:first-child {
  color: #008f77;
}

.players.active span:nth-child(2) {
  color: #fff;
}

.players.active .slider {
  left: 50%;
}

.play-area {
  margin-top: 20px;
}

.play-area section {
  display: flex;
  margin-bottom: 1px;
}

.play-area section span {
  display: block;
  height: 90px;
  width: 90px;
  margin: 2px;
  color: #8f2100;
  font-size: 40px;
  line-height: 80px;
  text-align: center;
  border-radius: 5px;
  background: #fff;
}

.result-box {
  padding: 25px 20px;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
  opacity: 0;
  text-align: center;
  background: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}

.result-box.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.result-box .won-text {
  font-size: 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
}

.result-box .won-text p {
  font-weight: 600;
  margin: 0 5px;
}

.result-box .btn {
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

.btn button {
  font-size: 18px;
  font-weight: 500;
  padding: 8px 20px;
  border: none;
  background: #008f77;
  border-radius: 5px;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

JavaScript

Here is the complete code for script.js file to function the Tic Tac Toe Game:

// Select all required elements
const selectBox = document.querySelector(".select-box"),
    selectBtnX = selectBox.querySelector(".options .playerX"),
    selectBtnO = selectBox.querySelector(".options .playerO"),
    playBoard = document.querySelector(".play-board"),
    players = document.querySelector(".players"),
    allBox = document.querySelectorAll("section span"),
    resultBox = document.querySelector(".result-box"),
    wonText = resultBox.querySelector(".won-text"),
    replayBtn = resultBox.querySelector("button");
    
// Variables for game state
let playerXIcon = "fas fa-times"; // FontAwesome icon class for 'X'
let playerOIcon = "far fa-circle"; // FontAwesome icon class for 'O'
let playerSign = "X";
let runBot = true;

// Initialize the game
window.onload = () => {
    // Add click event to all boxes
    allBox.forEach(box => {
        box.addEventListener("click", () => clickedBox(box));
    });
};

// Player X selection
selectBtnX.onclick = () => {
    selectBox.classList.add("hide");
    playBoard.classList.add("show");
};

// Player O selection
selectBtnO.onclick = () => {
    selectBox.classList.add("hide");
    playBoard.classList.add("show");
    players.classList.add("active", "player");
};

// Handle user click
function clickedBox(element) {
    if (players.classList.contains("player")) {
        playerSign = "O"; // Set sign to 'O' if player selected 'O'
        element.innerHTML = `<i class="${playerOIcon}"></i>`; // Add 'O' icon
        players.classList.remove("active"); // Switch active player
    } else {
        element.innerHTML = `<i class="${playerXIcon}"></i>`; // Add 'X' icon
        players.classList.add("active");
    }
    element.setAttribute("id", playerSign); // Set ID to player sign
    element.style.pointerEvents = "none"; 
    playBoard.style.pointerEvents = "none";
    selectWinner(); // Check for a winner

    // Random delay for bot's move
    const randomTimeDelay = Math.floor(Math.random() * 1000) + 200;
    setTimeout(() => {
        bot();
    }, randomTimeDelay);
}

// Bot's move
function bot() {
    if (runBot) {
        const availableBoxes = [...allBox].filter(box => !box.childElementCount); // Get available boxes
        const randomBox = availableBoxes[Math.floor(Math.random() * availableBoxes.length)]; // Pick a random box

        if (randomBox) {
            if (players.classList.contains("player")) {
                playerSign = "X"; // Bot plays 'X' if player chose 'O'
                randomBox.innerHTML = `<i class="${playerXIcon}"></i>`;
                players.classList.add("active");
            } else {
                playerSign = "O"; // Bot plays 'O' if player chose 'X'
                randomBox.innerHTML = `<i class="${playerOIcon}"></i>`;
                players.classList.remove("active");
            }
            randomBox.setAttribute("id", playerSign);
            randomBox.style.pointerEvents = "none";
            selectWinner(); // Check for a winner
            playBoard.style.pointerEvents = "auto";
            playerSign = "X"; // Reset to player's sign
        }
    }
}

// Get the ID of a box
function getIdVal(classname) {
    return document.querySelector(".box" + classname).id;
}

// Check if a winning combination is met
function checkIdSign(val1, val2, val3, sign) {
    return getIdVal(val1) === sign && getIdVal(val2) === sign && getIdVal(val3) === sign;
}

// Determine the winner
function selectWinner() {
    const winningCombinations = [
        [1, 2, 3], [4, 5, 6], [7, 8, 9],
        [1, 4, 7], [2, 5, 8], [3, 6, 9],
        [1, 5, 9], [3, 5, 7]
    ];

    const isWinner = winningCombinations.some(combination => checkIdSign(...combination, playerSign));

    if (isWinner) {
        runBot = false; // Stop the bot
        setTimeout(() => {
            resultBox.classList.add("show");
            playBoard.classList.remove("show");
            wonText.innerHTML = `Player <p>${playerSign}</p> won the game!`;
        }, 700);
    } else if ([...allBox].every(box => box.id)) { // Check for a draw
        runBot = false;
        setTimeout(() => {
            resultBox.classList.add("show");
            playBoard.classList.remove("show");
            wonText.textContent = "Match has been drawn!";
        }, 700);
    }
}

// Replay button click event
replayBtn.onclick = () => {
    window.location.reload(); // Reload the page
};

Download Source Code

You can download the complete source code for the Tic Tac Toe game by clicking the button below. This code is an open source code and therefore may be used in any personal or career related website.

Download Source Code

Conclusion

The Tic Tac Toe Game Using HTML, CSS, and JavaScript is an amazing project to use as a portfolio. This not only prove your coding ability also put emphasis on your web app develop ability.

You can use this code in your projects and you are kindly encouraged to link back to JV Source Codes. This small gesture allows us to keep on sharing other useful materials.

Please do not forget to visit our channel for other tutorials and source codes. If you experience any difficulties, please post a comment, and I will be glad to help!

Download JV Source Codes

Similar Posts

Dropdown Sidebar Menu
| | |

Dropdown Sidebar Menu in HTML, CSS and JavaScript

A dropdown sidebar menu is a wonderful and elegantly looking implementation that facilitates comfortable navigation through several sections using a single menu. Dropdowns allow the user to click on a menu item and opt to see more links beyond the main areas without complicating its appearance. Today, I’ve written and shared the full length source…

Elastic Animation Navigation Menu Bar
| | |

Elastic Animation Navigation Menu Bar in HTML and CSS

Are you looking for a professional horizontal navigation bar with an animated effect? The Elastic Animation Navigation Menu Bar in HTML, CSS is perfect, thank you very much! What I am going to do for you is to give you the source codes so that you will be able to include a responsive, elegant navigation…

10 Free Responsive Navigation Bar Menus in HTML CSS & JavaScript
| | | |

10 Free Responsive Navigation Bar Menus in HTML CSS & JavaScript

A responsive navigation bar menu is a necessity to any website that intends to support navigation functionality across any web project. As the users visit websites on their mobile devices, tablets, laptops and desktops the navigation bar must therefore be capable of being compatible with the different screen sizes. In this article, we listed ten…

Age Calculator Source Code
| |

Age Calculator Using HTML, CSS and JavaScript (Free Source Code)

Determining an exact age reliably is a valuable resource in site development, especially in services that differentiate between certain ages. I’m happy to give you a free source code for Age Calculator Using HTML, CSS, and JavaScript; it’s more efficient to use, and a simple yet effective way to calculate the age instantly. This code…

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript
| | |

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript

A responsive side navigation bar not only helps to improve the navigation of your website but also address the issue of neatly placing links that enhance the experience of users. By using tooltips, it is possible to make the users aware of functions of each link, including when the design is compact. In this tutorial,…

Leave a Reply

Your email address will not be published. Required fields are marked *