Creating A puzzle game ‘Lights Off’ using HTML5 canvas

This is a very interesting post about HTML5, which make you educate about creating a nice puzzle game 'Light Off' in account of HTML5 and employing a little bit of jQuery. This is one amongst most useful HTML5 tutorial including code and snapshot that make you more ease and comfortable to comprehend this post.

Though earlier I have presented various earnest HTML5 Tutorial post, however today I am not going to say more about HTML5. Even, tons of HTML5 tutorials are becoming online on the internet and proliferating in numbers every day. As HTML5 has been emerged as an robust web-development program or application which is highly efficient to bring great amusing result that will verily make you or either users or client more amused and delighted like never before.

Though HTML5 flaunts over various advantages and features out of which one most interesting elements of HTML5 elements is <canvas>. With this element the web-developer can draw anything whatever they want by employing JavaScript. Though I am also not familiar and never play with this <canvas> element, but still I am also avid to play finger on this.

Therefore, I attempt to re-built a native game for iPhone, but with HTML5 <canvas>. Further, I would like to add here that though I am attempting to built this game but it might be not a real application, however, the basic motive of this HTML5 tutorial is not to create a game application but is to show the functionality of <canvas> element. Hence, the demo for this application being provided here works only with those browsers who are compatible with this <canvas> element.


However, just take a chance to see whether you can solve this puzzle. Simply you are required to click on panel of light which toggle it along with another four adjacent light. Or just go into the insight of code and learn some additional thing about <canvas> element.

Below I have incorporated a video for the game in action for those users who don’t have a compatible browsers that can support HTML5 <canvas> element.


The HTML and CSS are not too spectacular: just simply the HTML5 <canvas> element with an assigned ID and a container styled with some CSS.

The Idea

For your better comprehension, I have included some snapshots to elaborate the idea, that hopefully make the things more clear to you.

HTML5 canvas

First of all you are required to create the playing field. This field contains light panels of dimension 5×5.

HTML5 canvas

Now, we are required to implement logic regarding light switch. As you can view the example, it turns on or off the light panels as well as diagonal and horizontal panels. When the panel is on, it will be turned off, and if it is off it will turned on. In the snapshot, the marked red arrows instruct the users where they have clicked in an empty field.

HTML5 canvas

Next, attempt to create the beginning position and enable the users to switch off the lights in order to end the game.


And, this is the JavaScript where a little bit of jQuery has been employed.

In my standpoint a two dimensional array would be perfect to build a playing field. It is very easy and convenient to work with the code, but it also matters that how the playing field will appeared eventually, since it is the code which represents the field exactly.

To the playing field, this function include mouse listener which is useful to check the field clicked by users. On the ground of that information, it used to flips the adjacent fields in account of single line IF statement. We analyze for >=0 and <5 though we are not supposed to get out the array bounds.

Now, you may see here that this function calls the repaintPanel() at the bottom. Now, just go ahead to see how this function will appear:

Hopefully, my comments transforms this tutorial more interesting. Simply, we are retrieving the canvas in order to draw filed on it. Since the drawing is not clear by element, therefore we attempted to re-draw this manually be clearing the contents. Therefore, firstly we call clear() method.

It’s all about the code we needed to create this nice little game.

Steven Bowen

Steven Bowen is an ardent team member of No-refresh - Web to Print Design Tool Provider Company bestowed with professionalism in to develop fully-functional solutions. Having adroitness in this arena, he has served an array of blogs that are basically based on the technology advancement & improve the end users’ information level.