Create Snake in JavaScript with HTML5 Canvas
Yesterday I had some spare time, so I decided to write Snake in JavaScript using the HTML5 canvas. If anything, this is a good simple example demonstrating a use of the canvas. So, here's a tutorial walking through the creation of the game.
If, for some reason, you are not familiar with the game Snake, Wikipedia explains it:
The player controls a long, thin creature, resembling a snake, which roams around on a bordered plane, picking up food (or some other item), trying to avoid hitting its own tail or the "walls" that surround the playing area. Each time the snake eats a piece of food, its tail grows longer, making the game increasingly difficult. The user controls the direction of the snake's head (up, down, left, or right), and the snake's body follows.
Here is the final product on jsFiddle (click Result to play):
This tutorial will cover:
- Drawing on the canvas
- Handling events in jQuery
- Handling arrays in JavaScript
- JavaScript math functions
Default Form Values with jQuery
Here's a useful jQuery snippet that clears the default values of form fields on focus and refills them if no text is entered. It uses the attribute called defaultValue which stores the original value of a form field.
$(document).ready(function() { $('input[type=text]').focus(function() { if($(this).val() == $(this).attr('defaultValue')) { $(this).val(''); } }) .blur(function() { if($(this).val().length == 0) { $(this).val($(this).attr('defaultValue')); } }); }); |
For example, assume you have a field like this:
<input type="text" value="Search..." /> |
When the page loads, the text field will have "Search..." filled in. When you focus on it, this text will disappear (assuming it hasn't already been edited by you). When you leave focus without typing anything, the text will reappear.
Data Storage with jQuery
The jQuery data functions provide a clean way to store information for any kind of use. You can assign any amount of data to an element on the page and access it later by referencing the element. Like everything in jQuery, this is very easy to use.
In the following examples, we will be using an element with the id db to store information about fruit.
Store something:
// Store the current fruit $("#db").data("fruit", "orange"); // Store an array of fruit info $("#db").data("orange", { type: "citrus", color: "orange" } ); |
Fetch something:
// Find out what the current fruit is var fruit = $("#db").data("fruit"); // orange // Get the type of the current fruit var type = $("#db").data("orange").type; // citrus |
Remove something:
// Remove all fruit data $("#db").removeData("fruit").removeData("orange"); |
Add Records to a Queue with jQuery
This tutorial will explain how to make an animated "add to queue" type functionality with jQuery. Since it is hard to explain the results, check out the demo. First, I'll show how to create the actual effect, and then how to implement AJAX submission to a back-end script for database storage or some other processing.
Create a Slide-In Panel with jQuery
In this tutorial, I'll explain how to create a slide-in panel effect with jQuery. Basically, this means a hidden panel the slides into view when it is triggered by a button or other action. This is often used to display a contact form in a fun way, which is exactly what I am using it for on the new UltraMega website. As it turns out, this is very easy to do.
