arandomurl.com

HTML5 Pacman

25th July 2010
shim for font face

This is most of the Pacman game everyone knows and loves. It isnt a complete implementation yet and I do plan on working some more on it, however it should mostly be playable. (who knew the ghosts have a strategy!)

Why? 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. Here are some of the issues and bugs I have had while writing the game, hopefully it might prevent some poor web developer throwing their laptop out the window. The code is up on Github.

Things to consider

Issues

Configure your server to serve media files

If your audio works locally, but not from a server, remember to configure your server to serve media files with the correct media types. I had to add video/ogg ogg; to /etc/nginx/mime.types

Checking the progress of a file loading

Firefox and Webkit implement different ways to determine if a media file is loaded, firefox supports the more well documented progress event attributes (e.total and e.loaded) however this has been removed from the w3c standard which is supported by Webkit where you access the duration and buffered attributes on the audio object. If you just want to find out if a whole audio file has loaded, look for the canplaythrough event.

Looping Audio

I could not find a way to reliably loop sound, the loop attribute is not currently supported in firefox this blog provides a workaround however the ended event has a 2/3 second delay on ubuntu, I havent found a way round that yet.

Comment on Hacker News