Geekman's Blog

Geekman's Blog

Tic-Tac-Toe with JavaScript and HTML5

May 31, 2017. Posted by Rohit Mulange

Tic-Tac-Toe is an age old classic Game. Recently I decided to start making open source html5 games. I started with Tic-Tac-Toe. This post is a little explanation of the code for beginners in html5 and JavaScript. Though I encourage any readers to simply explore the code at github.com/tinyjsgames/tictactoe. Tic-Tac-Toe is relatively very easy to implement. All you need to do is keep track of turn and write a victory Condition. The job is complicated if you decide to build a game that allows playing against a computer.

  1. Use table element to represent the board.
  2. Write a victory Condition.
  3. Write the Computer AI function to play the best possible move.

The Board

In most games, the visuals you see are merely a representation of things and objects handled in the background. Even in this very simple game I decided to take the same approach.

This approach also allows us to test the game with different initial states when testing the AI function we are about to write.


The Victory Condition:

The Victory condition is very easy to write. You simply loop through rows and columns and see if any row or column have the same move. In this example I test the diagonals separately. Since I use the same loop for column and row test, I have maintain extra variables to save a victory state. The Victory condition function takes a board as input, instead of just using the present game state. This allows us to use this function later in AI.


The AI:

The AI is by far the hardest to implement. We loop through each possible future move recursively and give ratings based on if the move leads to victory.

  1. Play all possible current moves for current Player
  2. Call the function recursively with board after playing each move (separately)
  3. Repeat this until a victory is detected
  4. Negative Rating if the victory belongs to enemy

This function basically iterates through all possible moves(of the computer and player) and decides the best one.


Putting it all together.

Explore the complete code on github at github.com/tinyjsgames/tictactoe/blob/master/js/tictactoe.js Play the game at tinyjs.games