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
Record HTML Canvas Animations to Video
Sometimes it might be useful to be able to record your canvas animation to a video format. Maybe you want to use your JavaScript skills to create fancy effects for a video. You could use some kind of screen capturing program and crop the video, but I'll show you how to do it with code!
Note: You'll need an HTTP server with PHP running on your local machine to do this. Don't try this with your website over the Internet, unless you don't mind waiting for tons of images to upload... Also, I recommend using Chrome for best results.
Let's start with our simple animation. You can see it in action here.
CodeRun – Full Featured Online IDE
I've recently started using CodeRun for quickly testing live code. It's a free full featured web-based IDE which you can use to develop applications or simply test code snippets. It also allows you to share working code with others to test and review. Here's the official description:
CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser.
CodeRun supports popular languages including PHP, JavaScript, HTML, CSS, and C#. If you are a developer, you should check it out.
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.
Degradable Tabs With jQuery UI
Creating tabbed content is easy with jQuery UI. Using a simple HTML layout and calling the tabs function is all it takes. Here, I'll show you how to make a degradable tabbed interface. That is, we'll make it so the page is still readable when JavaScript is disabled. This involves hiding and showing elements using JavaScript before enabling tabs.
See the live demo. Try turning off JavaScript to see how it degrades.
Categories
- General (7)
- News (4)
- Projects (13)
- Noty (2)
- TempServers (9)
- Software (8)
- Tips & Tutorials (51)
Archives
Links
Meta
