Learn to implement the game on your website
The first step is to create an HTML file with the general HTML structure, a
canvas element, and a
canvas element will be used as the game’s scene, but you could also implement the game in other elements, such as a
div tag, however, it will require some modifications to the code in this tutorial.
Square (See figure 2).
TicTacToe is used to instantiate the game by passing the id of a canvas element to the class’ constructor. This ensure the class can be used with several canvas elements on the same HTML page by simply creating multiple instances of the class for each canvas id.
The second class
Square is used to represent a square on the board. This class keeps track of each square’s position, size, and whether or not a player has clicked on it. It also contains the behavior for drawing the visual of the square and the symbol of the player.
Square class is used to instantiate a square object for each square for a 3×3 grid (see figure 3).
The class will require five properties:
y define the square’s position,
height define the square’s dimensions,
ctx is a reference to the canvas’ rendering interface, and
actor specifies the player who filled out the square with either an ‘x’ or ‘o’.
All the properties, except
actor should be passed to the constructor upon instantiation (see figure 4). However, the
actor property should be set to
null within the constructor to ensure the property exists on
The class will also need a method, called draw() which is responsible for drawing a square and the symbol of the player who clicked on it.
The method calls another method on the
ctx property called
strokeRect(x, y, width, height) to draw the square (see figure 5, line 20). The
ctx property also contains another property called
strokeStyle which can be used to set the border’s color (see figure 5, line 19).
The draw method uses another method from the
ctx property called
fillText(text, x, y) to write the symbol of the player who clicked on the square (see figure 5, line 27). The text is positioned at the center of the square. The center position can be found by adding the square’s
y position to half of its
height (see figure 6). The
ctx property contains another property called
textAlign which can be set to
center to ensure the text is aligned toward the center (see figure 5, line 26).
The next step is to create the
TicTacToe class. The class will require a constructor and three methods:
4.1 The Constructor
The constructor of the
TicTacToe class is designed to require a string with the id of a canvas element to be instantiated.
getElementById(id) and the element is set to a property called
canvas (see figure 7, line 15).
After configuring the
canvas property, the property is used to get an instance of its
CanvasRenderingContext2Dwhich is set to a property called
ctx (see figure 7, line 16). The
ctx property provides the interface to draw within the canvas.
The next step is to instantiate the
Square objects. This is done by looping 3×3 and instantiating a
Square object for each iteration which is added to a property called
squares (see figure 7, lines 19–28).
The loop starts by creating a square at the position (x=0, y=0) and then loops from top to bottom until 9 squares are created (see figure 8).
The class will require three other properties called
gameOver (see figure 7, lines 31–37).
actors is an array of two strings defining both the number of players and their symbols (‘x’ & ‘o’).
turn defines a number between 0–1 which is specifying the
actor from the
actors array who should have the next turn.
gameOver is a bool that returns
true if the game is ended.
The last part of the constructor is to call the square objects draw() method and add a click event listener to the class’ click() method (see figure 7, lines 40–43).
4.2 The Click Method
The click method is designed to be executed whenever a user clicks on the canvas, and the position of the cursor at that moment can be read from the argument
The first section of the click method includes a guard clause which resets the game if the
gameOver property is set to
true. This gives the user the ability to start a new game by clicking on the canvas (see figure 9, lines 21–24).
The next part of the method loops all the
Square objects and checks if the mouse position was within one of the squares. If the check evaluates to
truethe current actor is added to the
actor property to signal the player has selected the square, and the
turn property is set to either
1 to allow the next player to select a square (see figure 9, lines 27–43).
Last, the method calls the
checkForWinner() method to see if a winner can be found (see figure 9, line 46).
4.3 The Check for Winner Method
checkForWinner() method is designed to check if one of the players has selected three squares on a horizontal line, vertical line, or diagonal line (see figure 10).
The beginning of the method defines an array of arrays specifying the different win combinations (see figure 11, lines 26–33).
The array of arrays is used to loop all the win combinations and check whether or not three squares match one of the combinations (see figure 11, lines 36–66). If the check evaluates to
gameOver is set to
true to signal that the next click on the canvas should reset the game.
The method also draws a line showing the winner combination and writes a text displaying the winner (see figure 11, lines 54–63).
The last part of the method checks whether or not all the squares have an
actor which is not
null to see if the game should end as a draw. It is important the check is added after checking whether or not the game has a winner to avoid the game evaluating to a draw in cases where a winner is found by selecting the last empty square (see figure 11, lines 69–75).
4.4 The Reset Method
The reset method is designed to set the properties of an instance of the
TicTacToe class to a state where the players can play a new game.
The method starts by clearing the pixels of the canvas by using the
clearRect(x, y, width, height) method (see figure 12, line 31).
After clearing the pixels of the canvas, the squares’
actor property is set to
null and the squares are drawn within the canvas again.
Last the method sets
0 to reset the players turn, and set
falseto signal the
click() method can add players to squares again and look for a new winner, or draw.
4.5 Starting the Game
The game is now ready to be played. Add a new line below the class definitions which creates a new instance of the class (see figure 13, line 13).