Tic Tac Toe 2 in TypeScript
By Jean-Claude Colette Jul 25, 2018
Here we present you a new version of the Tic Tac Toe in TypeScript. This version gives the user more control during a game.
Here you can find an improved version of Tic Tac Toe in TypeScript. We had already implemented a minimalist Tic Tac Toe, in which the computer systematically starts the game and with circles O.
However, this program Tic Tac Toe is also based on the algorithm of minmax which gives a solution in an acceptable time given the few boxes of the grid.
The novelty of this version lies in the game loop which is nothing else than a function running at regular intervals with
gameRunning boolean variable becomes false, the game loop is terminated with
The Tic Tac Toe loop
Many games run around a loop, and external events (pushing a button, pressing a keyboard key, etc.) act on variables in that loop.
This loop executes when the user clicks on PLAY and stops as soon as the game ends or the user voluntarily interrupts the game.
In this game, we retrieve the click events on one of the grid squares, on the reset button, on the radio buttons to impose the current player or the computer's symbol.
So, all the game takes place in the Loop function that handles all the actions.
The variables of the game
gameRunning is a Boolean variable that indicates whether the game runs or not
intervalId is a variable that contains the identifier returned by the
That allows to stop the loop with
computerPlays is an
HTMLInputElement that represents the first radio button indicating when checked that the computer is playing
userPlays is an
HTMLInputElement that represents the second radio button indicating when checked that the user is playing
computerSymbol is a number (equal to 1 or -1) representing the current symbol used by the computer to play
board is a one-dimensional array representing consecutive moves from both players
table is a one-line array of
HTMLElement representing grid cells
position is a number variable that represents the box number that the user plays or equals -1 when he has not played yet
message is an unused variable in this version