Creating Simple Puzzle Game with HTML5 Canvas
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:
|
1 2 3 4 5 6 7 8 9 10 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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.
BlueHost | HostGator | Media Temple
