Latest
A few years before the dawn of the iPhone, we all had Nokias with the addictive Snake game installed. The premise of snake was simple: eat all the food on the screen without hitting your tail or a wall. The more food you eat, the longer your tail became.
Paul Jensen has returned to that era for his addictive Snake canvas game, and has also provided a handy tutorial on how he created it.
Green dots never tasted better!
Comments from the author:
The canvas element is used to map the playing area of the game where the Snake moves. The Snake consists of a collection of xy coordinates on the canvas element, and the movement is simulated by drawing and removing the xy coordinates from the canvas element.
The tutorial itself is a handy guide for those who are a little unsure of where to start when it comes to using user interactions to manipulate the canvas from reading the key pressed to checking your object is still within the boundaries of the canvas.
Play the game, or check out the tutorial
We’ve previously featured a canvas emulator for Spectrum and NES – well, here’s another for the original Gameboy – this time created by Pedro Ladaria. JSGB contains the emulator and a debugger, and plays many commercial games. It uses the canvas tag for displaying graphics on scanline basis using putimagedata().
Retro gaming at it's greenest
Runs best in Chrome.
Please ensure you follow the relevant laws regarding ROMs for your country before trying this demo.
Check out the JSGB canvas demo!
Szenesprachenwiki is the German equivalent to Urban Dictionary, a wiki site dedicated to German neologisms, created by the makers of the German dictionary Dudan.
9elements, creators of the HTML5 Love demo, have used the data from Szenesprachenwiki to create a canvas representation of their Szenesprachenwiki service known as Konfetti. Using the categories on the right, users can filter the words that are available for viewing, and the dots sequence changes to match these colours.
Love for words
Using the Szenesprachenwiki words service and adding categories, it gives the HTML5 Love demo a bit more substance and meaning to the original demo.
Check out Szenesprachenwiki
Madcap Studios, formed by Eric Reedy and Nate Friedman, have made their canvas implementation more than just an application, using canvas for parts of their user interface.
Their iPhone comic book app looks rather cool
Canvas is used for the scrolling tile animation at the top of the page, and also for the revolving cog.
Please note: This site does not work optimally in Internet Explorer. Canvas animation has been disabled thanks to some framerate issues.
Visit Madcap Studios
Gil Megidish has a bit of an obsession with Another World, the famous platform puzzle game from 1991 also known as Out of this World in North America.
Over the years, he’s ported the game to PSP, PS2, GBA and PC.. and now he’s ported it over to canvas!
Retro gaming goodness
There are a few graphical glitches within the game due to the nature of the port, but the version is playable with patience and a great example of what canvas can do!
For those of you who are stuck from the start, you’ll need to swing the cage to escape and find a gun to stand a chance of survival! If you’re looking for further guidance, there are many walkthroughs available. Start at Part 2.
Check out the Another World canvas game
After being inspired by 9elements HTML5 Love demo, Kent Brewster decided to have a go at creating his own canvas demo, called Collide-O-Scope, which displays an effect similar to that found in a kaleidoscope.
The demo uses several sets of randomly-generated circles, which are projected seven times using translations and reflections to create the kaleidoscope effect. Each set has an X and Y vector and before each move the demo runs collision detection, altering those vectors if they make contact. By clicking on an area within the canvas, you can alter the effect.
No, you're not intoxicated.
Kent explains how he produces the blurry circle effect:
The fuzzy/translucent effect comes from building up a number of very faint circles, on on top of the other. Depending on the colors, you’ll see fuzzy blobs, sharp stained-glass sections, and other interesting stuff when two sets of circles overlap.
Nice work Kent!
View the Collide-O-Scope demo
