Javascript Tic Tac Toe Game

How To Make A TIC TAC TOE Game In Javascript  

javascript tic-tac-toe game


In This Javascript Tutorial we will See How To Build A Tic-Tac-Toe Game With Replay And Get The Winner And Change Winning Boxes Color Using JS And Netbeans Editor + HTML5 + CSS3 .

Part 1

                                                                          Part 2



Project Source Code:

    
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript TIC TAC TOE</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            *{box-sizing: border-box}
            
            .container{width: 300px;
                       overflow: hidden;
                       margin: 50px auto 0 auto;
                     }
            
            .container span{width: 100%;
                            display: block;
                            text-align: center;
                            font-family: sans-serif;
                            color: #fff;
                            font-size: 25px;
                            background: #446CB3;
                           }
            
            .container .box{float: left;
                            width: 100px;
                            height: 100px;
                            border: 1px solid #000;
                            transition: all .25s ease-in-out;
                            font-family: sans-serif; 
                            font-size: 85px;
                            text-align: center;
                            line-height: 100px; 
                            cursor: pointer;
                          }
            
            .container .box:hover{background: rgba(10,10,10,0.5);
                                  color: #fff
                                 }
            
            button{background: #26C281;
                   color: #fff;
                   font-weight: bold;
                   border: 1px solid yellow;
                    cursor: pointer; 
                    width: 200px;
                    height: 40px; 
                    font-size: 22px;
                    display: block;
                    margin: 10px auto}
            
            .win{background: #F9690E; color: #fff}
            
        </style>
        
    </head>
    <body>
       
        <div class="container" id="main">
            <span id="turn">Play</span>
            <!-- show X or O on div click -->
            <div class="box" id="box1"></div>
            <div class="box" id="box2"></div>
            <div class="box" id="box3"></div>
            <div class="box" id="box4"></div>
            <div class="box" id="box5"></div>
            <div class="box" id="box6"></div>
            <div class="box" id="box7"></div>
            <div class="box" id="box8"></div>
            <div class="box" id="box9"></div>
        </div>
        <!-- Play Again And Reset All Info -->
        <button onclick="replay()">Play Again</button>
        
        <script>
            
            var turn = document.getElementById("turn"),
             // boxes => all boxes
            // X_or_O => to set X or O into the box
                boxes = document.querySelectorAll("#main div"), X_or_O = 0;
            
            function selectWinnerBoxes(b1,b2,b3){
                b1.classList.add("win");
                b2.classList.add("win");
                b3.classList.add("win");
                turn.innerHTML = b1.innerHTML + " Won Congrat";
                turn.style.fontSize = "40px";
            }
            
            function getWinner(){
                
                var box1 = document.getElementById("box1"),
                    box2 = document.getElementById("box2"),
                    box3 = document.getElementById("box3"),
                    box4 = document.getElementById("box4"),
                    box5 = document.getElementById("box5"),
                    box6 = document.getElementById("box6"),
                    box7 = document.getElementById("box7"),
                    box8 = document.getElementById("box8"),
                    box9 = document.getElementById("box9");
            
            // get all posibilites
              if(box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
                 selectWinnerBoxes(box1,box2,box3);
         
              if(box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
                 selectWinnerBoxes(box4,box5,box6);
             
              if(box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box7,box8,box9);
             
              if(box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
                 selectWinnerBoxes(box1,box4,box7);
             
              if(box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
                 selectWinnerBoxes(box2,box5,box8);
             
              if(box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box3,box6,box9);
             
              if(box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
                 selectWinnerBoxes(box1,box5,box9);
             
              if(box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML === box7.innerHTML)
                 selectWinnerBoxes(box3,box5,box7);
             
            }
            
            
            // set event onclick
            for(var i = 0; i < boxes.length; i++){
                boxes[i].onclick = function(){
                    // not allow to change the value of the box
                    if(this.innerHTML !== "X" && this.innerHTML !== "O"){
                    if(X_or_O%2 === 0){
                       console.log(X_or_O);
                       this.innerHTML = "X"; 
                       turn.innerHTML = "O Turn Now";
                       getWinner();
                       X_or_O += 1;
                       
                    }else{
                        console.log(X_or_O);
                       this.innerHTML = "O";
                       turn.innerHTML = "X Turn Now";
                       getWinner();
                       X_or_O += 1;  
                    }
                }
                    
                };
            }
            
            function replay(){
                
                for(var i = 0; i < boxes.length; i++){
                    boxes[i].classList.remove("win");
                    boxes[i].innerHTML = "";
                    turn.innerHTML = "Play";
                    turn.style.fontSize = "25px";
                    
                }
                
            }
            
        </script>
        
    </body>
</html>


download the source code




OUTPUT:


javascript tic tac toe game start
Start


tic-tac-toe div hover
Mouse Hover

js tic-tac-toe O turn
O turn


js tic tac toe X turn
X Turn

js tic tac toe O win
O Win



js tic tac toe X win
X Win



javascript tic-tac-toe win
Super Goku Win



Share this

Related Posts

Previous
Next Post »