Creating AIs for 4×4 TicTacToe – Part 1 – General

In this series, which will be divided into six parts, we are going to create four different AIs playing the game of TicTacToe in a 4×4 field.
For this we will use Javascript. All the code will be available online.

The six chapters are:
1. Part 1: General
2. Part 2: A Heuristic-Driven AI
3. Part 3: The MinMax-Algorithm
4. Part 4: An Expert-AI
5. Part 5: Monte-Carlo Simulation
6. Part 6: Hardcore AI

Today we only have a rough look at the general game-framework.
We kept it as easy as possible so you do not need much time to understand it (the whole code is at the end of this post).

One TicTacToe-Cell is represented by a div, with the correpsonding class.
We create these divs by using the function “generateGameArea()”.

This function creates the divs and fills the javascript array gameAreaArray.
The array is used to save and mark positions with “X” (Human-Player) and “O” (AI-Player).
We also implemented a “checkWin” function, “setCross” and “setCircle” functions, which should be pretty self-explanatory.
This TicTacToe is won if you have exactly “size”-many (in our case size=4) “X”s or “O”s in one row, col or diagonal.

The first AI we want to implement is a Random AI. So this AI always selects a random empty cell and places the “O” in it.
The code for this AI is pretty straight-forward. That is why we skip big explanations and just share the code with you.

This was a very short and easy first step. However the next post will be more interesting.
In the next post we will give our AI some real intelligence by using heuristics to perform better than the random one did!

Final TicTacToe:

Open in new window

One thought on “Creating AIs for 4×4 TicTacToe – Part 1 – General

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.