Retaining the classic maze and your favourite four ghosts, this version of Pacman runs smoothly and authentically as you steer Pacman around the maze collecting dots and power pills.

Classic Pacman action

Comments from the Author:

This is most of the Pacman game everyone knows and loves. I wanted to play with new web technologies so writing a simple browser game seemed like a good idea. It currently uses localStorage, HTML5 Audio, Canvas and @font-face.

Dale has also made the code available on Github.

Tiler switches between images with 3D transitions

Comments from the Author:

The transitions happen randomly transforming each image in a grid of 3D tiles which rotate and translate to end up showing the next image. Since it is a tiny 3d engine, it uses the canvas element intensively, mainly transforming 3d geometry into 2d image projections. A good benchmark for the javascript vm and processor power as well.

Google Chrome for Windows or Linux is recommended for this demo.

Particles flow around the magnets

You can drag the magnets around to make different effects, add additional magnets by double clicking, remove magnets by dragging them off the canvas and press left/right on the cursor keys to try different skins.

Getting stuck on naming Eastern Europe

Comments from the Author:

I’ve offered it (for free) to the Khan Academy, http://www.khanacademy.org/ , to use this code on their educational website and they have accepted it and plan on adding it to their group of educational tools.

Reflections

Use the list on the left to choose which object to display and the list on the right to choose what texture to apply.

Choose a photo and play with the effect

Comments from the Author:

I use a combination of drawImage and clip to render a 8 triangular portions of an image on a square canvas. Moving the mouse causes the masks (created by clip) to move over the original image thus creating the kaleidoscope effect.

Joe has recreated this effect using canvas and some beautiful graphics by Mark J Ferrari. Mark cleverly used color cycling for environmental effects such as rain, snow, ocean waves and smoke.

Graphics by Mark Ferrari

Comments from the Author:

In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640×480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That’s a very big array to traverse, and some browsers just couldn’t keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen.

It's a duck!

William’s tutorial takes you step by step through the development of a simple web drawing application combining the HTML5 canvas element and JavaScript. There are progress demos, screenshots, code samples and clear instructions to help you on your way.

It starts with a big bang

Comments from the Author:

Now that three.js was starting to get stable and also thanks to some sequencing code I had done some months ago I had no excuses to get working on it. So, from Friday midnight until Saturday afternoon, I managed to get this.

Your best option for viewing this demo is using Chrome on Windows. Enjoy!

I always wanted you to go in to Space man

As with all the retro classics, the game chucks you in at the deep end of the difficulty scale. Use the cursors to move left and right and the space bar to jump!