Tic Tac Toe 2 in TypeScript
By Jean-Claude Colette
Jul 25, 2018
Description:
Here we present you a new version of the Tic Tac Toe in TypeScript. This version gives the user more control during a game.
Tags: TypeScript
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 setInterval function.
When the gameRunning boolean variable becomes false, the game loop is terminated with clearInterval.
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 setInterval function
That allows to stop the loop with clearInterval
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
