Tic Tac Toa Game using Cool JS Features Tutorial

Hi Folks,

Today we will be looking into some interesting plugins of our favorite language Javascript.

I have developed a small Tic Tac Toa game to demonstrate the scope and advantages of these scripts so that you can get a good understanding of it.

The plugins that I will be focusing on today are

 publish-subscribe library

 Handlebars library.

So lets get started. Download the starter file and import it to your Aptana workstation.

If you run the index.html file you should see something like this.

At Start

Let’s first look at how this table has been formed.

Below you can see the context of the index.html file and the Driver.js file.

Driver.js Code

index.html code

If you look at the code in the Driver class you will realize that the table has been generated using javascript using the GRID_NAMESPACE object. The object data consist of a 2D array which holds the "id" property of each <td> cell.

Later the runTemplate() method extracts the generated source code and pushes into the "board" div tag content where the game board will be shown.

The plugin used for this is the Handlebars library.

Furthermore if you click on each cell of the game you will see that the game can be played until all squares are marked but the game does not have an output for winning.

Now lets fix that using publish-subscribe library.

Go to your Player.js class and insert the following code snippet in the isWinner function right before the return true statement.

$.publish('APlayerWon', symbol);

This creates a publish event under the event 'APlayerWon' and sends out a ping to all listeners. The variable 'symbol' will be an argument on the other end.

Next lets create a listener for the event 'APlayerWon'. Go to your Game.js class and insert the following code.

function restart(){
  board.resetSquares();
  player1.resetScore();
  player2.resetScore();
 };

 function afterWinning() {
  var values = [].slice.call(arguments, 1);
  alert("Player "+values[0]+" won");
  restart();
 };
 
 $.subscribe('APlayerWon', afterWinning);

The $.subscribe function listens to all events related to 'APlayerWon' (such as the one we created in Player.js class) and when it gets a response it fires the 'afterWinning' method. This method method retrieves the arguments sent by the publish event and alerts the symbol of the winner.

Now when you play the game and win, you should get a response similar to this.

So what happens when the game reaches a no win scenario? Nothing. The game will not have any response to that at this point. Lets fix it! publish-subsribe to the rescue!

Go to the Game.js class and look for the takeTurn function. You will find an if statement. Add the following code inside the if statement before the end.

if(board.isAllMarked()){
    $.publish('NoWinScenario');
 }

Now you have created a publish event for the NoWinScenario. Lets add the subscribe code as well. In the game class add the following code.

function NoWinner() {
  var values = [].slice.call(arguments, 1);
  alert("Game Tied! Please Try again");
  restart();
 };

 $.subscribe('NoWinScenario', NoWinner);
 

Your subscribe method calls the NoWinner function whenever a 'NoWinScenario' is fired. Try playing the game again and see what it does for a No Win Scenario. You should be getting something like this.

We are almost done! Notice that when the game comes to an end the squares do not reset? It would be a pain if the User has to refresh the page every time the game ends. Lets fix this.

In your Driver.js class we will create a subscribe for both 'NoWinScenario', 'APlayerWon' events. Both subscriptions should call the method restartGUI method defined below.

function restartGUI(){
  runTemplate();
  GRID_NAMESPACE.addHandlers();
 }
 

Add this code to the Driver.js and if you have correctly defined the two $.subscribe methods, your game board should refresh after the game reaches and end state.

Download the final project files if you need so.

I hope you enjoyed my tutorial.

Thanks for visiting.

Nuzair Nuwais