Powerups to the people

Mattias

Avatar
Image

Games with HTML5, Canvas and JS

by Mattias on the 19th January 2010

Browser games doesn't necessarily mean Flash anymore. Get lined up for HTML5 and the canvas!

Google Chrome, as well as Safari 4 and Firefox 3.5, supports the new web coding standard of HTML5. The most noticeable changes for a non-technical user will be the <canvas> tag which will allow the browser to directly use the graphic processor (think Flash without Flash"think Flash without Flash"). As an example, this can be used to be able to view a video without having Flash installed or handle sprites, a core component of game development. There is also true drag-and-drop support (oooh!).

Sure, all of this does not sound impressive. Well, frankly it isn't. Web development has always been hindered by the slow rate that users get their browsers updated and the need for backwards compatibility.

But that doesn't stop creative developers from trying to push the boundaries of what the browser can do. Check out some of these nice games developed with this technology.

Before you do, make sure your browser is up-to-date - if your browser icon is a blue "e" you might want to slip into something more comfortable...

Games developed in HTML 5, Canvas and JavaScript
Another World JS
Impressive and faithful clone of this classic game (also known as Out of this World).

Twitch
One-click browser window game. Clever (and more fun than it sounds).

Chain Reaction
Click once. Get points. Second try. Click again. Get more points. Get addicted. Sit there clicking and swearing for the rest of the day. Don't say we didn't warn you.

Crystal Galaxy
Experimental 2D space shooter game demo with quirky controls, developed using a pure JavaScript / DHTML game engine.

Why not develop your own game?
If you want to try out game development with Canvas and HTML 5 yourself, Matthew Casperson has written a nice tutorial on game development with HTML5, Canvas and JS over at Brighthub.

Character

© 2010 Lavasoft. All rights reserved.