Write an Interview Experience

Simple Tic-Tac-Toe Game using JavaScript

Difficulty Level : Medium
Last Updated : 02 Feb, 2022

Read

Discuss

How to implement a 2-player Tic-Tac-Toe game using JavaScript?

It is quite easy to develop with some simple validations and error checks. Player-1 starts playing the game and both the players make their moves in consecutive turns. The player who makes a straight 3-block chain wins the game. This game is built on the front-end using simple logic and validation checks only.

Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS, JavaScript.

View of Tic-Tac-Toe Game

Filename: index.html

HTML

<!DOCTYPE html> 
   
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
   
    <!-- CSS file Included -->
    <link rel="stylesheet"
        type="text/css" href="tic.css"> 
   
    <!-- JavaScript file included -->
    <script src="tic.js"></script> 
</head> 
   
<body> 
    <div id="main"> 
        <h1>TIC TAC TOE</h1> 
   
        <!-- Game Instructions -->
        <p id="ins">Game starts by just Tap on  
            box<br><br>First Player starts as  
            <b>Player X</b><br>And<br>Second  
            Player as <b>Player 0</b> 
        </p>
 
  
   
   
        <br><br> 
        <!-- 3*3 grid of Boxes -->
        <input type="text" id="b1" onclick= 
            "myfunc_3(); myfunc();" readonly> 
   
        <input type="text" id="b2" onclick= 
            "myfunc_4(); myfunc();" readonly> 
   
        <input type="text" id="b3" onclick= 
            "myfunc_5(); myfunc();" readonly> 
        <br><br> 
   
        <input type="text" id="b4" onclick= 
            "myfunc_6(); myfunc();" readonly> 
               
        <input type="text" id="b5" onclick= 
            "myfunc_7(); myfunc();" readonly> 
   
        <input type="text" id="b6" onclick= 
            "myfunc_8(); myfunc();" readonly> 
        <br><br> 
   
        <input type="text" id="b7" onclick= 
            "myfunc_9(); myfunc();" readonly> 
   
        <input type="text" id="b8" onclick= 
            "myfunc_10();myfunc();" readonly> 
   
        <input type="text" id="b9" onclick= 
            "myfunc_11();myfunc();" readonly> 
   
        <!-- Grid end here  -->
        <br><br><br> 
        <!-- Button to reset game -->
        <button id="but" onclick="myfunc_2()"> 
            RESET 
        </button> 
   
        <br><br> 
        <!-- Space to show player turn -->
        <p id="print"></p>
 
  
   
   
    </div> 
</body> 
   
</html>

Filename: tic.css

CSS

<style>
    /* CSS Code */
    /* Heading */
    h1 {
        color: orangered;
        font-size: 45px;
    }
 
    /* 3*3 Grid */
    #b1, #b2, #b3, #b4, #b5, 
    #b6, #b7, #b8, #b9 {
        width: 80px;
        height: 52px;
        margin: auto;
        border: 1px solid gray;
        border-radius: 6px;
        font-size: 30px;
        text-align: center;
    }
 
    /* Reset Button */
    #but {
        box-sizing: border-box;
        width: 95px;
        height: 40px;
        border: 1px solid dodgerblue;
        margin: auto;
        border-radius: 4px;
        font-family: Verdana, 
            Geneva, Tahoma, sans-serif;
 
        background-color: dodgerblue;
        color: white;
        font-size: 20px;
        cursor: pointer;
    }
 
    /* Player turn space */
    #print {
        font-family: Verdana, 
            Geneva, Tahoma, sans-serif;
 
        color: dodgerblue;
        font-size: 20px;
    }
 
    /* Main Container */
    #main {
        text-align: center;
    }
 
    /* Game Instruction Text */
    #ins {
        font-family: Verdana, 
            Geneva, Tahoma, sans-serif;
             
        color: dodgerblue;
        font-size: 17px;
    }
</style>

Filename: tic.js

JavaScript

// Function called whenever user tab on any box
function myfunc() {
 
    // Setting DOM to all boxes or input field
    var b1, b2, b3, b4, b5, b6, b7, b8, b9;
    b1 = document.getElementById("b1").value;
    b2 = document.getElementById("b2").value;
    b3 = document.getElementById("b3").value;
    b4 = document.getElementById("b4").value;
    b5 = document.getElementById("b5").value;
    b6 = document.getElementById("b6").value;
    b7 = document.getElementById("b7").value;
    b8 = document.getElementById("b8").value;
    b9 = document.getElementById("b9").value;
 
    // Checking if Player X won or not and after 
    // that disabled all the other fields
    if ((b1 == 'x' || b1 == 'X') && (b2 == 'x' ||
        b2 == 'X') && (b3 == 'x' || b3 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
    else if ((b1 == 'x' || b1 == 'X') && (b4 == 'x' ||
        b4 == 'X') && (b7 == 'x' || b7 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
 
        window.alert('Player X won');
    }
    else if ((b7 == 'x' || b7 == 'X') && (b8 == 'x' || 
        b8 == 'X') && (b9 == 'x' || b9 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        window.alert('Player X won');
    }
    else if ((b3 == 'x' || b3 == 'X') && (b6 == 'x' || 
        b6 == 'X') && (b9 == 'x' || b9 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player X won');
    }
    else if ((b1 == 'x' || b1 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b9 == 'x' || b9 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player X won');
    }
    else if ((b3 == 'x' || b3 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b7 == 'x' || b7 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
    else if ((b2 == 'x' || b2 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b8 == 'x' || b8 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
    else if ((b4 == 'x' || b4 == 'X') && (b5 == 'x' || 
        b5 == 'X') && (b6 == 'x' || b6 == 'X')) {
        document.getElementById('print')
            .innerHTML = "Player X won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player X won');
    }
 
    // Checking of Player X finish
    // Checking for Player 0 starts, Is player 0 won or
    // not and after that disabled all the other fields
    else if ((b1 == '0' || b1 == '0') && (b2 == '0' || 
        b2 == '0') && (b3 == '0' || b3 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b1 == '0' || b1 == '0') && (b4 == '0' || 
        b4 == '0') && (b7 == '0' || b7 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b7 == '0' || b7 == '0') && (b8 == '0' || 
        b8 == '0') && (b9 == '0' || b9 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b6").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b3 == '0' || b3 == '0') && (b6 == '0' || 
        b6 == '0') && (b9 == '0' || b9 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b5").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b1 == '0' || b1 == '0') && (b5 == '0' || 
        b5 == '0') && (b9 == '0' || b9 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b3 == '0' || b3 == '0') && (b5 == '0' || 
        b5 == '0') && (b7 == '0' || b7 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b2 == '0' || b2 == '0') && (b5 == '0' || 
        b5 == '0') && (b8 == '0' || b8 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b4").disabled = true;
        document.getElementById("b6").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
    else if ((b4 == '0' || b4 == '0') && (b5 == '0' || 
        b5 == '0') && (b6 == '0' || b6 == '0')) {
        document.getElementById('print')
            .innerHTML = "Player 0 won";
        document.getElementById("b1").disabled = true;
        document.getElementById("b2").disabled = true;
        document.getElementById("b3").disabled = true;
        document.getElementById("b7").disabled = true;
        document.getElementById("b8").disabled = true;
        document.getElementById("b9").disabled = true;
        window.alert('Player 0 won');
    }
 
    // Checking of Player 0 finish
    // Here, Checking about Tie
    else if ((b1 == 'X' || b1 == '0') && (b2 == 'X'
        || b2 == '0') && (b3 == 'X' || b3 == '0') && 
        (b4 == 'X' || b4 == '0') && (b5 == 'X' || 
        b5 == '0') && (b6 == 'X' || b6 == '0') && 
        (b7 == 'X' || b7 == '0') && (b8 == 'X' || 
        b8 == '0') && (b9 == 'X' || b9 == '0')) {
            document.getElementById('print')
                .innerHTML = "Match Tie";
            window.alert('Match Tie');
    }
    else {
 
        // Here, Printing Result
        if (flag == 1) {
            document.getElementById('print')
                .innerHTML = "Player X Turn";
        }
        else {
            document.getElementById('print')
                .innerHTML = "Player 0 Turn";
        }
    }
}
 
// Function to reset game
function myfunc_2() {
    location.reload();
    document.getElementById('b1').value = '';
    document.getElementById("b2").value = '';
    document.getElementById("b3").value = '';
    document.getElementById("b4").value = '';
    document.getElementById("b5").value = '';
    document.getElementById("b6").value = '';
    document.getElementById("b7").value = '';
    document.getElementById("b8").value = '';
    document.getElementById("b9").value = '';
 
}
 
// Here onwards, functions check turn of the player 
// and put accordingly value X or 0
flag = 1;
function myfunc_3() {
    if (flag == 1) {
        document.getElementById("b1").value = "X";
        document.getElementById("b1").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b1").value = "0";
        document.getElementById("b1").disabled = true;
        flag = 1;
    }
}
 
function myfunc_4() {
    if (flag == 1) {
        document.getElementById("b2").value = "X";
        document.getElementById("b2").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b2").value = "0";
        document.getElementById("b2").disabled = true;
        flag = 1;
    }
}
 
function myfunc_5() {
    if (flag == 1) {
        document.getElementById("b3").value = "X";
        document.getElementById("b3").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b3").value = "0";
        document.getElementById("b3").disabled = true;
        flag = 1;
    }
}
 
function myfunc_6() {
    if (flag == 1) {
        document.getElementById("b4").value = "X";
        document.getElementById("b4").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b4").value = "0";
        document.getElementById("b4").disabled = true;
        flag = 1;
    }
}
 
function myfunc_7() {
    if (flag == 1) {
        document.getElementById("b5").value = "X";
        document.getElementById("b5").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b5").value = "0";
        document.getElementById("b5").disabled = true;
        flag = 1;
    }
}
 
function myfunc_8() {
    if (flag == 1) {
        document.getElementById("b6").value = "X";
        document.getElementById("b6").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b6").value = "0";
        document.getElementById("b6").disabled = true;
        flag = 1;
    }
}
 
function myfunc_9() {
    if (flag == 1) {
        document.getElementById("b7").value = "X";
        document.getElementById("b7").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b7").value = "0";
        document.getElementById("b7").disabled = true;
        flag = 1;
    }
}
 
function myfunc_10() {
    if (flag == 1) {
        document.getElementById("b8").value = "X";
        document.getElementById("b8").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b8").value = "0";
        document.getElementById("b8").disabled = true;
        flag = 1;
    }
}
 
function myfunc_11() {
    if (flag == 1) {
        document.getElementById("b9").value = "X";
        document.getElementById("b9").disabled = true;
        flag = 0;
    }
    else {
        document.getElementById("b9").value = "0";
        document.getElementById("b9").disabled = true;
        flag = 1;
    }
}

Step to run the program:

Run the index.html file by opening it in any browser.

Output:

When Player 'X' Won

Player X Won

When Player '0' Won

Player 0 Won

When Match is Tie

Match Tie

My Personal Notes

1. Tap-the-Geek | Simple HTML CSS and JavaScript Game

2. Create a Simple Color Picker using JavaScript

3. Creating a Simple Image Editor using JavaScript

4. How to Design a Simple Calendar using JavaScript ?

5. Number Guessing Game using JavaScript

6. Design a typing speed test game using JavaScript

7. Create a Reflex Game using JavaScript

8. Building a Dice Game using JavaScript

9. Design Dragon's World Game using HTML CSS and JavaScript

10. Pig Game Design using JavaScript

Create a Mobile Toggle Navigation Menu using HTML, CSS and JavaScript

HTML | Scientific Calculator

Article Contributed By :

asmitsirohi

@asmitsirohi

Vote for difficulty

Current difficulty : Medium

Improved By :

Article Tags :

Practice Tags :

HTML

Report Issue

Related Articles

Simple Tic-Tac-Toe Game using JavaScript

HTML

CSS

JavaScript

Full Stack Development with React & Node JS - Live

JavaScript Foundation - Self Paced

GATE CS & IT 2024

JAVA Backend Development - Live

Python Backend Development with Django - Live

CBSE Class 12 Computer Science

Complete Test Series for Service-Based Companies

DevOps Engineering - Planning to Production

Complete Machine Learning & Data Science Program

System Design - Live

Data Structures and Algorithms - Self Paced

Mastering Data Analytics

DSA Live for Working Professionals - Live

Master C Programming with Data Structures

Data Structures & Algorithms in Python - Self Paced

Android App Development with Kotlin - Live

Complete Interview Preparation - Self Paced

Start Your Coding Journey Now!

Related Articles

Simple Tic-Tac-Toe Game using JavaScript

HTML

CSS

JavaScript

Please Login to comment...

Full Stack Development with React & Node JS - Live

JavaScript Foundation - Self Paced

GATE CS & IT 2024

JAVA Backend Development - Live

Python Backend Development with Django - Live

CBSE Class 12 Computer Science

Complete Test Series for Service-Based Companies

DevOps Engineering - Planning to Production

Complete Machine Learning & Data Science Program

System Design - Live

Data Structures and Algorithms - Self Paced

Mastering Data Analytics

DSA Live for Working Professionals - Live

Master C Programming with Data Structures

Data Structures & Algorithms in Python - Self Paced

Android App Development with Kotlin - Live

Complete Interview Preparation - Self Paced

Start Your Coding Journey Now!