Tic Tac Toe 2 in TypeScript

By   Calendar icon Jul 25, 2018   Level 1 icon


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