Create a basic Tic-tac-toe in 7 steps – for absolute beginners
Download and see the final code in action
- Download the code from Automation School GitHub repo: tictactoe-basic-in-7-steps-for-absolute-beginners
- Go into the folder Step 7
- Open the file game7.html in Chrome browser
- Start playing.
- To play again, just refresh the page in the browser and start again.
- Using simple HTML, create a starter Tic Tac Toe grid with some dummy data and basic styling.
- HTML Concepts : html head, html body, table, row, column, header h1, div, span (label)
- CSS Concepts : height, width, table / cell’s border & color, font-size, text alignment (center, left justified etc)
- End Result: Open the file Step 1/game1.html in Chrome browser
- See image: images/step1.png
- Quick overview of DOM
- Quick overview of CSS selectors by class, element, attributes
- End Result: Open the file Step 2/game2.html in Chrome browser
- See image: images/step2.png
- HTML + JS : Set the starting player as ‘X’
- CSS: Style the buttons with different colors. Light Blue (X) and Light Green (O) backgrounds.
- JS + DOM + CSS: To indicate which player is playing next, add a yellow highlight around the button for ‘X’ and unhighlight the button for ‘O’
- End Result: Open the file Step 3/game3.html in Chrome browser
- See image: images/step3.png
- HTML : Clear the tictactoe grid, so it’s empty to start with. Let’s give a name to each row and column (row name: 0, 1, 2, column name: 0, 1, 2)
- JS + DOM + CSS:
- When a player clicks on a tictactoe cell, put a X or O in the cell, based on the current player.
- In preparation for the next move, change the current player to the other player (i.e., X -> O, O -> X), and highlight/unhighlight the players’ buttons accordingly.
- Update the next player’s name in the “Next move by: ” section.
- End Result: Open the file Step 4/game4.html in Chrome browser
- See image: images/step4.png
- HTML : Add html to show a message when a player make a winning move
- CSS: For the html that shows the message that the game is over, add a green background.
- HTML + CSS: Put a game container div in html and style it with margins in css
- JS: Only show the newly added html to display “Game Over” information when the game is actually over! Hide it until that point.
- JS: Write the logic to check if the game is over. For now, check only the horizantal rows and vertical columns. (We will deal with diagonals later.)
- End Result: Open the file Step 5/game5.html in Chrome browser
- See image: images/step5.png
- JS: Add logic to figure out if the game is over because there are 3 X’s or O’s in the diagonals
- End Result: Open the file Step 6/game6.html in Chrome browser
- See image: images/step6.png
- JS : If a cell is already occupied with an X or O, do not let the player change it!
- JS : Once the game is over, players can not continue to play and change the grid any longer
- JS : Once the game is over, hide the line that says “Next move by: “
- End Result: Open the file Step 7/game7.html in Chrome browser
- See image: images/step7.png
varetc. (The code in the above Steps 1-7 is written in a quick-n-dirty fashion to keep things moving fast, and also to give you this exercise :p )
Questions or need help?
- Please use the comments section below to ask a question or make a suggestion etc.
- Drop us a line if you need any help and we will try to get back to you. Please leave your email and name and we may invite you to our Slack channel.
- Also, we have a quick-n-dirty beginner friendly Object-oriented design (OOD) course coming up with up to 5 hours of video. Enter your email and name here and we will follow up to give you access to the OOD content.