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; 
    }
    


    You need to be logged in to see the rest of this tutorial.
    mrdaniel wrote this tutorial on 11/22/14 | html, css, javascript, jquery, front-end
    Comments
  • +
  • 4
  • -
  • How about reset the game!!!!
  • +
  • 1
  • -
  • I'd also like to see a reset button implemented. please.
  • +
  • 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
  • -
  • 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('');
            })
    
    Login to submit a comment