Lessons Learnt from ISE HTML5


Happy new year everyone! I am glad to be back! On the 29th of December last year, I finished my first HTML5 game. You can find the details here. With this game, my departure from the App space is sealed. Until I redefine my business model, I am sticking with Web. In this post, I will talk about my experiences with rebuilding ISE in HTML5 but now to the headlines …

In deciding to build a gaming community in West Africa, it is easy to become discouraged. I was for a while until I saw this list. The list shows the progression from casual gaming to hardcore gaming. It reinterates what I have always stood by. That by starting, we put ourselves in a position to improve and master whatever skills we desire.

HTML5 didn’t go to sleep either! Computer Weekly has posted on the HTML5 specification being ready. So the remaining question is why have you not started HTML5? In 2012, HTML5 produced some great games. You can find the details of the top 10 games of 2012 here. The list is prepared by NetMagazine. If you are interested in the Web, this is one site you should bookmark.

For upcoming events the first West African Global Game Jam will be holding next year in Lagos. You can find all the details here. Also Mozilla Gameon has been launched. I have submitted Ise to the competition so what are you waiting for? Before you make a submission however, you must make a video of the gameplay.

Now to the main story …

HTML5 Canvas

Was first finished in June 2012. I must state that Foundation HTML5 Canvas by Rob Hawkes is simply the best HTML5 book out there for beginners. For me the use of jquery to teach HTML5 is what makes this book excellent. In the course of the book, the author develops 2 casual games, Space Bowling and Asteroid Avoidance. He does this using a simple jquery based framework. I publicly admit that I copied this framework and used it to build Ise.

Lessons Learnt

  1. Build on top of a framework :- It is much faster to develop a game using a framework. Frameworks force you to code in a certain way and think in a certain way. Once a product has been made with a framework, it then becomes easy to make other products. Think of it like the assembly line.
  2. Use comments judiciously :- In reviewing Ise, when I first wrote it I used a lot of comments in the code. Two years later, I had forgotten how most of the program worked but the comments saved me! My advice is to use as many comments that will make you come back years later and still understand your code.
  3. Variable names should be self documenting :- This is an important programming practice. In my time as a programmer, I have met other programmers who flout this rule. They claim that they want to make it harder for people to steal their source code. Danger comes in when a program must be rewritten.
  4. Keep it simple :- When I first built Ise, I developed my own custom data structure a Circular Linked List. Two year later using JavaScript, I found out that JavaScript did not have such a data structure. Could I write my own? Yes. Did I know how? No. Since I am new to JavaScript I only know the building blocks which are Variables, Functions, Objects and Arrays and that was what I used to write the code.
  5. Avoid magic numbers :- When writing a program, if it has a literal like 8. Define 8 in the declaration section and use it in the code. This above all. NO MAGIC NUMBERS. If it is not a variable, sooner or later, it will cause confusion.


Sometimes the best way to improve a product is to start all over again from scratch. Rebuilding an HTML5 version of Ise gave me a chance to rewrite the seed distribution in a way that was simple and intuitive. The data structures used were only Objects and Arrays which for me means that I can port the same code to any other language that is Object Oriented.

For me entering the new year as an HTML5 Game Developer was the greatest gain of all. As the year begins, I look forward to developing more HTML5 games and improving in my knowledge of HTML5. Do keep in mind that all the tools I have used are free and that the focus of my games is Mechanics not Aesthetics.

The year opens with the stage set for HTML5 to become the “One Ring” all the evidence on the table points to this development so what holds you back? What resources do you feel you need? How can I help?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s