How to Make a “Tic-Tac-Toe” Game in HTML, CSS & JavaScript Source Code Download

tic tac toe html css javascript

Three basic skills are very important in the web development industry HTML, CSS, and JavaScript. After acquiring these three skills, the learning that is done by making a real-life project is the best learning. That’s why it is very important to create projects.

Tic Tac Toe Game Project Overview

Everyone must have played Tic Tac Toe with friends in childhood. Many people also call this game “X” and “O”. Which is played by 2 people in which one player X draws and the other player O draws. In which the player who draws in a single line by combining horizontal, vertical, or hypotenuse wins.

In this article, we will create Tic-Tac-Toe game using HTML, CSS, and JavaScript. You can download all the assets, source code, and files used in the project from here. You will be able to enhance your coding skills by working on this game project. This will give you a perfect idea of how to use HTML, CSS, and JavaScript.

Tic Tac Toe Game Using HTML, CSS & JavaScript

In this project, we will have three important files, index.html in which we will prepare the structure of the game. The second file style.css in which we will provide styling to the elements of this game. Third file script.js in which we will keep all the JavaScript code that will make our game playable. We will provide you all the code of this project below. And also will tell all the steps with the help of which you will be able to easily build the Tic Tac Toe project.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li>MyTicTacToe.com</li>
      </ul>
    </nav>

    <div class="gameContainer">
        <div class="container">
          <div class="line"></div>
        <div class="box bt-0 bl-0"><span class="boxtext"></span></div>
        <div class="box bt-0"><span class="boxtext"></span></div>
        <div class="box bt-0 br-0"><span class="boxtext"></span></div>
        <div class="box bl-0"><span class="boxtext"></span></div>
        <div class="box"><span class="boxtext"></span></div>
        <div class="box br-0"><span class="boxtext"></span></div>
        <div class="box bl-0 bb-0"><span class="boxtext"></span></div>
        <div class="box bb-0"><span class="boxtext"></span></div>
        <div class="box bb-0 br-0"><span class="boxtext"></span></div>
      </div>
      <div class="gameInfo">
        <h1>Welcome to Tic Tac MyTicTacToe</h1>
        <div>
          <span class="info">Turn for X</span>
          <button id="reset">Reset</button>
        </div>
        <div class="imgbox">
          <img src="excited.gif" alt="" />
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
}

nav{
    background-color: rgb(37, 9, 37);
    color: white;
    height: 65px;
    font-size: 27px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-family: 'Roboto', sans-serif;
}

nav ul{
    list-style-type: none;
}

.gameContainer{ 
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.container{
    display: grid;
    grid-template-rows: repeat(3, 10vw);
    grid-template-columns: repeat(3, 10vw);
    font-family: 'Roboto', sans-serif;
    position: relative;
}

.box{
    border: 2px solid black;
    font-size: 8vw;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box:hover{
    background-color: rgb(242, 234, 250);
}

.info {
    font-size: 22px;
}

.gameInfo{
    padding: 0 34px;
    font-family: 'Baloo Bhaina 2', cursive;
}

.gameInfo h1{
    font-size: 2.5rem;
}

.imgbox img{
    width: 0;
    transition: width 1s ease-in-out;
}

.br-0{
    border-right: 0;
}

.bl-0{
    border-left: 0;
}

.bt-0{
    border-top: 0;
}

.bb-0{
    border-bottom: 0;
}

#reset {
    margin: 0 23px;
    padding: 1px 18px;
    background: #f3e7f9;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Baloo Bhaina 2';
    font-size: 15px;
    font-weight: bolder;
}

.line{
    background-color: black;
    height: 3px;
    width: 0;
    position: absolute;
    background-color: #911d91;
    transition: width 1s ease-in-out;
}

@media screen and (max-width: 950px)
{
    .gameContainer{
        flex-wrap: wrap;
    }
    .gameInfo{
        margin-top: 34px;
    }
    .gameInfo h1{
        font-size: 1.5rem;
    }
    .container { 
        grid-template-rows: repeat(3, 20vw);
        grid-template-columns: repeat(3, 20vw);
    }
}

script.js

console.log("Welcome to Tic Tac Toe")
let music = new Audio("music.mp3")
let audioTurn = new Audio("ting.mp3")
let gameover = new Audio("gameover.mp3")
let turn = "X"
let isgameover = false;

// Function to change the turn
const changeTurn = ()=>{
    return turn === "X"? "0": "X"
}

// Function to check for a win
const checkWin = ()=>{
    let boxtext = document.getElementsByClassName('boxtext');
    let wins = [
        [0, 1, 2, 5, 5, 0],
        [3, 4, 5, 5, 15, 0],
        [6, 7, 8, 5, 25, 0],
        [0, 3, 6, -5, 15, 90],
        [1, 4, 7, 5, 15, 90],
        [2, 5, 8, 15, 15, 90],
        [0, 4, 8, 5, 15, 45],
        [2, 4, 6, 5, 15, 135],
    ]
    wins.forEach(e =>{
        if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){
            document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"
            isgameover = true
            document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "200px";
            document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`
            document.querySelector(".line").style.width = "20vw";
        }
    })
}

// Game Logic
// music.play()
let boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach(element =>{
    let boxtext = element.querySelector('.boxtext');
    element.addEventListener('click', ()=>{
        if(boxtext.innerText === ''){
            boxtext.innerText = turn;
            turn = changeTurn();
            audioTurn.play();
            checkWin();
            if (!isgameover){
                document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
            } 
        }
    })
})

// Add onclick listener to reset button
reset.addEventListener('click', ()=>{
    let boxtexts = document.querySelectorAll('.boxtext');
    Array.from(boxtexts).forEach(element => {
        element.innerText = ""
    });
    turn = "X"; 
    isgameover = false
    document.querySelector(".line").style.width = "0vw";
    document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
    document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px"
})

Download Source Code

Setting Up Project

1. Install VS code editor click here to download.

2. Above we have given you a button to download the source code, download the full source code of Tic Tac Toe from it.

3. Extract the downloaded tictactoe.zip file by right-clicking it.

4. To import the project into VS Code, select the File → Open Folder option.

5. Select the folder named Tic Tac Toe and click Open.

6. Use the “Live Server” extension in VS Code to run the project.

Neeraj Yadav
Howdy Friends! I am Neeraj Yadav a professional Web and App developer. I am trying to share my knowledge through this website. Here you will get amazing coding projects, free courses, programming articles.