Creating the tic-tac-toe game is not difficult, but without the use of arrays (which we will be covering next chapter) it does have a lot of repeating of code. For that reason, when I am showing code fragments, most of the repetition will be removed, with just a few lines demonstrating what is happening. When we get to arrays in the next chapter, we will be re-writing this game as a demonstration of the advantages of using arrays.
The first thing to do is to set up the CSS for the game. I have the instructions and game arranged into a flexbox container so it will fit nicely in the display. If there is room to have both the game and instructions in one row, that will be done otherwise the game will be on the top portion of the display and the instructions underneath.
The game is made up of 9 tiles arranged in a grid, a message that indicates who’s turn it is to play as well as any win or tie messages, and a button for starting the game if the game is finished.
The CSS for this sets up the color scheme size, and fonts, with media queries used to set the size of the game display based on the size of the screen.
The game also has to be set up. This uses a grid to hold the tiles that make up the game, with media queries used to determine the appropriate size for the grid component.
There are additional CSS classes for the TTTCell, message, newGame and instructions, but these are all straightforward styling so are omitted from the text but are available in the repo.
The HTML portion of the game is fairly easy to set up as we just need to nest our elements appropriately and let the CSS handle the heavy lifting. Here is the relevant portion of my HTML code:
The JavaScript to run everything first needs to be able to know which player is the current player and get the elements for all of the tiles on the board. A simple init() function will do this work.
The game is played using the mouse. My version has Keyboard support but gets this by using a feature that we won’t discuss until chapter 7. That said, the keyboard can be handled just like the click if you want to have keyboard support. Clicking simply gets information about the game, figures out which letter represents the player and the opponent, and makes sure that the tile selected is not already used. If a valid tile is selected then it sets the tile, calls our checkWin function and if the game isn’t won, calls to checkCat function to see if the game is tied which is also known as the cat’s game. Most games should end here.
Checking to see if the game is won is handled by looking at all the possible winning lines and seeing if the values in that line are all the same. If you are using spaces, you would also need additional logic to make sure that the three tiles were not all empty but as I number the tiles, we know that unused tiles will all be distinct.
Because we know we will call checkWin before calling checkCat, we can simply see if there are any empty tiles remaining and if not then we know it is the cat’s game.
Finally, I have a restartGame function for handling the restarting of the game. It just resets all the tiles and the player to the starting condition. In the next chapter, we will be learning about arrays and classes which would have made creating this game a bit easier.
This chapter's summary cheat sheet.
Why layout is complicated for web pages.
The basic display types.
A box that contains other components and sizes them to fit the available space.
A flexible grid where you can lay out your design.
Using templates to make laying out components in a grid easy.
Using the columns attributes to easily allow for multiple columns.
Having images (or other blocks) have text wrap around them.
There are other ways of placing elements by using the position attribute.
Altering CSS based on the properties of the device the page is being rendered on.
The project for this chapter.
Solution for this chapter's project