Image Is Everything
One of the requirements for our Tic Tac Toe game involves representing the players. We discussed our options and recognized we'll need a visual representation for the game's human user, and a data representation for the game program itself. After thoughtful consideration, we decided image files offered the best approach to visually represent the "X" and "O" players on screen. In fact, presenting a bitmap representation of the players provides us the control we need over both the visual and data properties. We can display an "X" visually with an image file, and also name the file "X" so that we only need to manage a single element whenever we need to manipulate "X" as a value. Likewise, we may do the same with "O."
Since the visual state of both players does not change while the game is in progress, no matter how many cells each occupies (Figure 1), we realize we can reuse the same image file for each player. We do know that when a player wins, we'll need to draw a line through the three adjacent cells occupied by the winner (Figure 2).
Fortunately, we can accomplish this visual representation by preparing a few additional image files for each player in advance. Each image will present a single line marked through the player's letter. We'll need four versions of the winning representations for each player, identifying the direction the line must traverse to connect three adjacent cells. The four directions are; horizontal, vertical, diagonal-left, and diagonal-right.
Exercise #9
A. Create the two sets of image files you'll need to represent each player. Create one additional file to represent an unoccupied cell. You will have eleven image files in all. Use the same horizontal and vertical dimensions for all files. Use a consistent file-naming convention for all image files, and use abbreviations or initials to indicate the line directions.
B. Test your work. Create a copy of your HTML grid and place a few of your player image files in the cells. Try an arrangement with a game in progress. Try variations of winning positions. Try to have fun!