A lot of interesting developments can be performed with the help of HTML5 <canvas> element. In today’s tutorial, we would create a simple puzzle game with the help of this element. The HTML and CSS that we would need for initial stages is quite easy to comprehend. Specifically, we would need <canvas> element with specified ID and a container styled with some CSS:

<div id="lightcontainer">
<canvas id="lightpanel" width="500" height="500"></canvas>
</div>

#lightcontainer { margin:20px auto; width:500px; }
#lightpanel { background-color:#002B33;
-moz-box-shadow:0 0 5px #999; -moz-border-radius:10px;
-webkit-box-shadow:0 0 5px #999; -webkit-border-radius:10px;
box-shadow:0 0 5px #999; border-radius:10px;
}

A brief explanation of the steps involved in development is in order. First of all, we need to create a field with 5 by 5 light panels. Since the light switch in the game turns on and off at regular intervals, we need to apply that logic accordingly. The starting position and coordinates of the game can be adjusted with the help of JavaScript.

$("#lightpanel").click(function(e) {
// e will give us absolute x, y so we need to calculate relative to canvas position
var pos = $("#lightpanel").position();
var ox = e.pageX - pos.left;
var oy = e.pageY - pos.top;
// Check which fields we need to flip
// 100 = width of the tile
var yField = Math.floor(oy / 100);
var xField = Math.floor(ox / 100);
// The field itself
lightField[yField][xField] = lightField[yField][xField] == "x" ? "o" : "x";
repaintPanel();
});

Code for the remaining directions can be added accordingly. The function repaintPenal () is explained as follows:

function repaintPanel() {
var canvas = document.getElementById("lightpanel");
if (!canvas.getContext){
alert("This demo requires a browser that supports the <canvas> element.");
return;
} else {
clear();
var ctx = canvas.getContext("2d");
var allLightsAreOff = true;
for(var i = 0; i < lightField.length; i++) { // Rows
for (var j = 0; j < lightField[i].length; j++) { // Columns
ctx.lineWidth = 3;
ctx.strokeStyle = "#83BD08";
ctx.beginPath();
// arc( x, y, radius, startAngle, endAngle, anticlockwise)
ctx.arc(j * 100 + 50, i * 100 + 50, 40, 0, Math.PI*2, true);
// Actual draw of the border
ctx.stroke();
// Check if we need to fill the border
if(lightField[i][j] == "x") {
ctx.fillStyle = "#FFBD38";
ctx.beginPath();
ctx.arc(j * 100 + 50, i * 100 + 50, 38, 0, Math.PI*2, true);
ctx.fill();
// Since we need to fill this field, not all the lights are off
allLightsAreOff = false;
}
}
}

// Check if all the lights are off
if(allLightsAreOff) {
// User can't click anymore
userCanClick = false;
// Show message
alert("All lights are off, you finished the game!");
}
}
}

Above function was the most important in the implementation of this simple game and with this, you can try out this game on your browser. It might not be as good as the original version of the game but you would certainly enjoy it.

Related articles:

1. Creating Vector Masks with HTML5 Canvas Element
2. Graphics with Canvas element in HTML5
3. Creating a Portfolio with HTML5