Programming Tutorials

  • View all tutorials
  • ,
    Create a tic-tac-toe game using HTML, CSS and jQuery

    Setting up the board using an HTML table

    We're going to be creating a tic-tac-toe board using an HTML table with three rows and each row containing three cells which creates a 9x9 board for us. The styling for it will be in our style CSS file. We'll also include a link to jQuery because our game logic we'll require some jQuery functions.
    <!DOCTYPE html>
    <html>
    <head> 
    <title> Tic-Tac-Toe </title>    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>  
    <link type="text/css" rel="stylesheet" href="style.css" />     
    <script>
    $(document).ready(function(){
      // jQuery code goes here		
    });
    </script>      
    </head>
    <body>
    
    <table id='board'>
      <tr>
        <td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td>
      </tr>
    </table>
                 
    </body>  
    </html>
    

    Styling the board with CSS

    Our board will have some pretty basic colors and fonts.
    * {
      margin: 0; 
      padding: 0; 
    }
    
    table { 
      border-collapse: collapse; 
      border-spacing: 0; 
    }
    
    #board { 
      padding: 0px; 
      margin: 0 auto; 
      margin-top: 25px; 
    }
    
    #board tr td { 
      width: 80px; 
      height: 80px; 
      border: 1px solid #1c1c1c; 
      font-family: Helvetica; 
      font-size: 30px; 
      text-align: center; 
    }
     
    #board tr td:hover { 
      background: #e4e4e4; 
      cursor: pointer; 
    }
    

    The game logic

    A tic-tac-toe game can have at most 9 moves. We'll maintain a variable for this and also a variable to check if the game is still going on and hasn't been won by any player yet. The logic for player moves is as follows: Each player goes by pressing on an empty space on the board and also while the game is still going on. We'll use the jQuery click function for this.
    <script>
    $(document).ready(function(){
    
      var move = 1;
      var play = true;
    
      $("#board tr td").click(function() {
        if ($(this).text()=="" && play) {
          // do stuff here for player 1 and 2
        }
      });
    
    });
    </script>  
    
    After either player goes we increment the move variable by 1 and we do this until it hits 9, then the board is filled completely. Player 1 goes when move is equal to 1, 3, 5, 7 and 9. Player 2 goes when move is equal to 2, 4, 6 and 8. If you'll notice, player 1 goes when move is an odd number - we can write this the following way: if ((move%2)==1) then it is player 1's turn, otherwise it is player 2's turn. When either player presses on an empty space, that respective player places either an X or O on the board. For our implementation, player 1 places X's and player 2 places O's. We'll use the jQuery append function to place X's and O's onto the board.
    <script>
    $(document).ready(function(){
    
      var move = 1;
      var play = true;
    
      $("#board tr td").click(function() {
        if ($(this).text()=="" && play) {
          if ((move%2)==1) { $(this).append("X"); } 
          else { $(this).append("O"); }
          move++;
        }
      });
    
    });
    </script>  
    
    If you open up your HTML file now, you'll notice you can place X's and O's on the board and the turns alternate automatically. But the game logic doesn't determine a winner yet, we'll have to implement that. So after every turn, we'll call a checkForWinner() function to check if there is a winner on the board. This function will return either X or O specifying the winner, or -1 if there is no winner. The function will take the value of each space on the board and then check every row, column and diagonal for a winner. It does this by checking if every value is equal in those three spaces. We'll be using the jQuery functions :nth-child and text()
    <script>
    $(document).ready(function(){
    
      var move = 1;
      var play = true;
    
      $("#board tr td").click(function() {
        if ($(this).text()=="" && play) {
          if ((move%2)==1) { $(this).append("X"); } 
          else { $(this).append("O"); }
          move++;
        }
      });
    
      function checkForWinner() {
        var space1 = $("#board tr:nth-child(1) td:nth-child(1)").text();
        var space2 = $("#board tr:nth-child(1) td:nth-child(2)").text();
        var space3 = $("#board tr:nth-child(1) td:nth-child(3)").text();
        var space4 = $("#board tr:nth-child(2) td:nth-child(1)").text();
        var space5 = $("#board tr:nth-child(2) td:nth-child(2)").text();
        var space6 = $("#board tr:nth-child(2) td:nth-child(3)").text();
        var space7 = $("#board tr:nth-child(3) td:nth-child(1)").text();
        var space8 = $("#board tr:nth-child(3) td:nth-child(2)").text();
        var space9 = $("#board tr:nth-child(3) td:nth-child(3)").text();
        // check rows
        if      ((space1==space2) && (space2==space3)) { return space3; }
        else if ((space4==space5) && (space5==space6)) { return space6; }	
        else if ((space7==space8) && (space8==space9)) { return space9; }
        // check columns
        else if ((space1==space4) && (space4==space7)) { return space7; }
        else if ((space2==space5) && (space5==space8)) { return space8; }
        else if ((space3==space6) && (space6==space9)) { return space9; }
        // check diagonals
        else if ((space1==space5) && (space5==space9)) { return space9; }
        else if ((space3==space5) && (space5==space7)) { return space7; }
        // no winner
        return -1;
      }
    
    });
    </script>  
    
    Now we just need to stop the game if there is a winner and notify the players who won. This is the end of our game logic!
    <script>
    $(document).ready(function(){
    
      var move = 1;
      var play = true;
    
      $("#board tr td").click(function() {
        if ($(this).text()=="" && play) {
          if ((move%2)==1) { $(this).append("X"); } 
          else { $(this).append("O"); }
          move++;
          if (checkForWinner()!=-1 && checkForWinner()!="") { 
    	if (checkForWinner()=="X") { alert("Player 1 wins!"); }
            else { alert("Player 2 wins!"); }
            play = false; 
          }
        }
      });
    
      function checkForWinner() {
        var space1 = $("#board tr:nth-child(1) td:nth-child(1)").text();
        var space2 = $("#board tr:nth-child(1) td:nth-child(2)").text();
        var space3 = $("#board tr:nth-child(1) td:nth-child(3)").text();
        var space4 = $("#board tr:nth-child(2) td:nth-child(1)").text();
        var space5 = $("#board tr:nth-child(2) td:nth-child(2)").text();
        var space6 = $("#board tr:nth-child(2) td:nth-child(3)").text();
        var space7 = $("#board tr:nth-child(3) td:nth-child(1)").text();
        var space8 = $("#board tr:nth-child(3) td:nth-child(2)").text();
        var space9 = $("#board tr:nth-child(3) td:nth-child(3)").text();
        // check rows
        if      ((space1==space2) && (space2==space3)) { return space3; }
        else if ((space4==space5) && (space5==space6)) { return space6; }	
        else if ((space7==space8) && (space8==space9)) { return space9; }
        // check columns
        else if ((space1==space4) && (space4==space7)) { return space7; }
        else if ((space2==space5) && (space5==space8)) { return space8; }
        else if ((space3==space6) && (space6==space9)) { return space9; }
        // check diagonals
        else if ((space1==space5) && (space5==space9)) { return space9; }
        else if ((space3==space5) && (space5==space7)) { return space7; }
        // no winner
        return -1;
      }
    
    });
    </script>  
    
    Live DemoDownload Files
    mrdaniel wrote this tutorial on 11/22/14 | html, css, javascript, jquery, front-end
    Comments
  • +
  • 4
  • -
  • How about reset the game!!!!
  • +
  • 1
  • -
  • Actually, got it: Add this into your script tag:
            $('#reset').click(function(){
              var space1 = $("#board tr:nth-child(1) td:nth-child(1)").html('');
              var space2 = $("#board tr:nth-child(1) td:nth-child(2)").html('');
              var space3 = $("#board tr:nth-child(1) td:nth-child(3)").html('');
              var space4 = $("#board tr:nth-child(2) td:nth-child(1)").html('');
              var space5 = $("#board tr:nth-child(2) td:nth-child(2)").html('');
              var space6 = $("#board tr:nth-child(2) td:nth-child(3)").html('');
              var space7 = $("#board tr:nth-child(3) td:nth-child(1)").html('');
              var space8 = $("#board tr:nth-child(3) td:nth-child(2)").html('');
              var space9 = $("#board tr:nth-child(3) td:nth-child(3)").html('');
            })
    
  • +
  • 1
  • -
  • Easy, just add a button which calls to a function to refresh the page. If we use Ajax we could refresh only the html form
  • +
  • 0
  • -
  • You can also remove the var declarations within reset
  • +
  • 0
  • -
  • I'd also like to see a reset button implemented. please.
    Log in to submit a comment.