UltraMega Blog

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

Noty Updated with WordPress Support

Noty has been updated to include a WordPress plugin for easy integration. Along with the original standalone version, you now have the option to install it as a standard WordPress plugin. This means that WordPress users never have to see code!

If you want it on your blog, consider checking it out at CodeCanyon.


Noty – HTML5 Notes Widget

Noty is the name of the HTML5 application I developed for the recent HTML5 competition hosted at Nettuts. Unfortunately I did not win, but I did learn a lot about HTML5 and related technologies.

It is available for purchase at CodeCanyon.

Noty is a simple widget for taking notes about the current page. A potential use is taking notes on a blog post for commenting later.

Noty uses several HTML5 and related technologies, using the browser’s native functionality wherever possible. It is designed to work in modern browsers.

  • Drag-and-Drop support via the browser’s native API . You can save excerpts from the page simply by highlighting text and dragging to the widget.
  • Persistent storage of notes for browsers that support it. Notes are saved in the user’s borwser for future visits.
  • Sharing of notes with link via Email or Twitter
  • Automatic URL shortening for sharing via bit.ly
  • Ability to scroll directly to the source of a note on the page (not available in Internet Explorer)
  • Fancy CSS3 effects (box-shadow, gradients and transitions)
  • Fully semantic HTML5 markup
  • Collapsable widget, remembering the state for the next page. This is useful in case the widget covers part of the page.
  • Tested to work in current versions of Chrome, Firefox, Internet Explorer and Safari
Tagged as: , , No Comments

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.


FireFox 3.5 – What does it mean for Web developers?

FireFox 3.5 has been released! Along with a long list of new features and faster browsing, FireFox 3.5 also implements the latest Web technologies such as HTML5 and CSS3. Here is an overview of some of the more interesting features...

New in FireFox 3.5

  • HTML 5 features:

    • audio and video - These elements provide native support for embedded audio and video, which means supporting browsers won't require any 3rd party plugins.
    • Drag and drop - API that allows dragging items within or even between websites.
  • CSS3 features:
    • @font-face - Allows you to use fonts without requiring the user to have them installed. Fonts are downloaded from the server as needed!
    • Media queries - Allow you to specify different CSS rules based on different media types, or even a wide range of specific features (such as screen size).
    • text-shadow - Applies shadow effects to text.
    • -moz-box-shadow - Applies shadow effects from almost any element!
      • -moz-border-image - Specifies an image to use for an element's border.
    • JavaScript features:

    See the full list of developer features available with FireFor 3.5.