Fong

Personal Coding Project I With Pusher API

• By Fong Chin
• 25 July, 2012
• 2 Comments

A few months ago, I wrote a blog about how my boyfriend was teaching me how to code. I was learning about HTML and CSS at that time. I wanted to learn more, but I didn’t have much time then. But now that I’m on my summer break, I have all the time I need to learn and build new stuff.

I started coding in javascript and ruby a few weeks ago. And since I am not interning or working, I can learn programming at my own pace. Last week, I built a multiplayer tic tac toe game. It might not be impressive for a seasoned developer, but I built this all by myself, and I’m proud of it. Here is a screenshot of how it looks like:

I heard about Pusher API at a few hackathons for the real-time updates, so I thought I could use it for my tic tac toe game. I started with their javascript quick start guide, and I was surprised to see how easy it was to use Pusher API even for a beginner like me.

Each game is subscribed to their own unique channel. When a user makes a move, they are triggering events within the channel. To trigger events, Pusher has a feature that excludes a user when you pass in his socket id, so only his opponent gets the event. You can read about excluding recipients here on Pusher.

Remembering which users are on the game was tricky for me because I didn’t have a database. To solve the problem, when a user joins the game, he will trigger an event, and everyone in the game will receive the event. When they get the event, they will trigger another event in response with their names. This is how the users will know their opponent’s names.

I also came up with an algorithm that detects the winning pattern and I’m really proud of it! Here’s the code:

var tempArray = [

          [[0,1,2], [0,4,8], [0,3,6]],

          [[1,0,2], [1,4,7]],

          [[2,0,1], [2,5,8], [2,4,6]],

          [[3,0,6], [3,4,5]],

          [[4,0,8], [4,1,7], [4,2,6], [4,3,5]],

          [[5,2,8], [5,3,4]],

          [[6,0,3], [6,2,4], [6,7,8]],

          [[7,1,4], [7,6,8]],

          [[8,0,4], [8,2,5], [8,6,7]]

        ];

function checkWin(boxNum){

       e = tempArray[boxNum];

       for (i=0; i<e.length; i++){

          if($(‘#’+e[i][1]).text() == $(‘#’+e[i][0]).text() && $(‘#’+e[i][2]).text() == $(‘#’+e[i][0]).text()){

               alert(‘Somebody has won!’);

           }

        }

}

TempArray is an array with all the winning patterns. 0 refers to the top left box, and 8 refers to the bottom right box. I’m not good at explaining all the technical stuff, so I will let you figure out what the code is doing.

Since I just started learning how to code, this project isn’t perfect. Here are a few things that can be improved:

When the users rejoin, I need to save the users’ names and moves. For that, I can use Firebase API because they let you create a realtime database.

I can use Pusher’s presence channel to detect how many users are in the current game and that will allow me to limit two players per game.

I will make these improvement later because I’ve spent too much time on this project, and I want to move on and not spend my whole summer fixing the game.

I know about these APIs because of my boyfriend. He is a developer evangelist at TokBox, and he always talks about all the cool APIs out there.

That’s it for my tic tac toe game! You can play it on fongchin.heroku.com.