Problems & Solutions. or just how-to.

Main menu

1-Player Tic Tac Toe in AngularJS

Introduction

It’s been sometime I’ve been here. So, I will just get started off. Today, I’m going to write about how to develop tic-tac-toe using AngularJS. The demo is more to understand the possibilities and simplicity of the framework.

What’s needed in the UI

9 boxes arranged in a 3×3 fashion like below:

Each of these boxes are divs and each div is binded to the data behind as usual

Now, the logic is to make the JS think engine. It’s easy when you follow the strategy mentioned in wiki.

AI Algorithm:

Win: If the AI has two in a row, it will place a third to get three in a row.

Block: If the [opponent] has two in a row, the AI will play the third to block the opponent.

Fork: Creation of an opportunity where the AI has two threats to win (two non-blocked lines of 2).

Blocking an opponent’s fork:

The AI will create two in a row to force the opponent into defending, as long as it doesn’t result in them creating a fork. For example, if “X” has a corner, “O” has the center, and “X” has the opposite corner as well, “O” must not play a corner in order to win. (Playing a corner in this scenario creates a fork for “X” to win.)

If there is a configuration where the opponent can fork, the player should block that fork.

Center: AI marks the center. (If it is the first move of the game, playing on a corner gives “O” more opportunities to make a mistake and may therefore be the better choice; however, it makes no difference between perfect players.)

Opposite corner: If the opponent is in the corner, the AI plays the opposite corner.

3 thoughts on “1-Player Tic Tac Toe in AngularJS”

That is very fascinating, You are an overly skilled blogger. I have joined your rss feed and look ahead to searching for more of your wonderful post. Additionally, I’ve shared your web site in my social networks