Placed in: Home 
Programming Webdesign Lights Off - A puzzle game using HTML5 canvas
Programming Webdesign Lights Off - A puzzle game using HTML5 canvas | Lights Off - A puzzle game using HTML5 canvas |
|
More and more HTML5 tutorials are popping up on the internet. Although it still is future talk, it's still great to see what this upcoming web standard can do for us. One of the most interesting new HTML5 elements, has to be Therefor, I re-created Lights Off, one of the first native games for the iPhone, but now using HTML5 
I know my attempt to create the game isn't nearly as great as the real app, but the goal for this tutorial is to see how the 
 Can you solve the puzzle? Simply click on a light panel to toggle it along with the four adjacent lights. Or dive into the code and learn some more about the Video Here's a video of the game in action (shown in Firefox 3.6) for those who don't have a browser that support the HTML5 Let's see how you can create something like that yourself. HTML/CSS The HTML and CSS isn't that very spectecular: Simply the <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; } Now on to the next, more interesting steps. The idea Here are a couple of images to explain the idea. I hope it makes things clear.
First, we'll need to create the playing field. This is a field with a size of 5x5 light panels.
Next, we'll need to apply logic for the light switch. As you can see in the example, it turns on or off the panel and the horizontal and diagonal surrounding panels. If the panel was on, it'll be turned off; When it's turned off, it'll be turned on. The red arrows show where the user would have clicked in an empty field.
Now to create the starting position and let the user try to get off all the lights to finish the game! Of course, after each click we need to check if all the lights are off and the player is done. JavaScript And here's the JavaScript I created (I used a little bit of jQuery). I'm not going to dive really deep into the code, since comments are added which explain a lot. // Two dimensional array that represents the playing field // A "x" stands for "on" // A "o" stands for "off" var lightField = [ [ "x", "o", "o", "x", "x" ], [ "o", "o", "x", "o", "x" ], [ "o", "x", "o", "x", "o" ], [ "x", "o", "x", "o", "o" ], [ "x", "x", "o", "o", "x" ] ]; I think a two dimensional array is perfect to create a playing field that we want. It's easy to work with (in code), but also great to see how the field is going to look like eventually, since the code exactly represents the field. // Attach a mouse click event listener $("#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"; // The field above if(yField-1 >= 0) { lightField[yField-1][xField] = lightField[yField-1][xField] == "x" ? "o" : "x"; } // The field underneath if(yField+1 < 5) { lightField[yField+1][xField] = lightField[yField+1][xField] == "x" ? "o" : "x"; } // The field to the left if(xField-1 >= 0) { lightField[yField][xField-1] = lightField[yField][xField-1] == "x" ? "o" : "x"; } // The field to the right if(xField+1 < 5) { lightField[yField][xField+1] = lightField[yField][xField+1] == "x" ? "o" : "x"; } repaintPanel(); }); This function attaches the mouse listener to the playing field and checks which field ths user clicked on. Based on that information, it flips the surrounding fields (using the single line IF statement). We check for As you can see, this function calls the function repaintPanel() { // Retrieve the canvas var canvas = document.getElementById("lightpanel"); // Check if the browser supports <canvas> if (!canvas.getContext){ alert("This demo requires a browser that supports the <canvas> element."); return; } else { clear(); // Get the context to draw on var ctx = canvas.getContext("2d"); // Create the fields var allLightsAreOff = true; for(var i = 0; i < lightField.length; i++) { // Rows for (var j = 0; j < lightField[i].length; j++) { // Columns // Set up the brush ctx.lineWidth = 3; ctx.strokeStyle = "#83BD08"; // Start drawing 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!"); } } } I hope my comments made this part - the most interesting part of this tutorial - clear. We're simply retrieving the canvas and draw the field on it. Since the element doesn't clear the drawing after we re-draw, we need to manually clear the contents. That's why we first call the function clear() { var canvas = document.getElementById("lightpanel"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500); } That's all the code we need to create this neat little game! Conclusion and Download I know the design could be improved in loads of ways, but I just wanted to experiment with the
I hope you learned something and use the Tags: puzzle game tutorial html5 canvas Interested in this topic? You might enjoy another article I've written called
Did you like this article? Subscribe to my feed or email to keep updated on new articles. Spread the word and submit to:    
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| < Prev | Next > |
|---|
| Subscribe | ||
|---|---|---|
|
| Search |
|---|
| Or try the sitemap |
Friends of Marcofolio.net
2007 - 2013 Marcofolio.net
This (we)blog brings you information about (web)design, blogging tips, (programming) tutorials and much, much more. I can't describe Marcofolio.net in words: Just look around and be amazed. Many (new) visitors have a habit to stick around, just because of the variety of articles.
Have fun reading this blog and don't forget to subscribe to the feed to keep updated on the latest articles.