Play Pac-Man in HTML5

By Michael Calore

Programmer Dale Harvey has created a playable version of Pac-Man using only web standards.

To rebuild the same gameplay found in the arcade classic using browser-native code, he’s relying on local storage, HTML5 audio, Canvas and @font-face. Harvey is sharing all the code on Github as well, so you can run it locally.

Reminiscent of Google’s recent Pac-Man port, Harvey’s attempt is yet another example of web standards being used instead of Flash to create animated, interactive experiences in the browser.

The Flash plug-in is still the most popular platform choice for browser-based games, and it has some advantages over HTML5. Most notably, a Flash game would work in any browser that allows the plug-in, but to play Harvey’s game, you’ll need to use a browser that supports the elements he’s using — Firefox, Opera and Chrome work just fine, but IE8 is a no-go.

On his blog post about the project, he notes some of the other stumbling blocks he encountered when porting the game. For instance, there’s no easy way to loop HTML5 audio, there isn’t a convenient tool for drawing Canvas shapes, and using Canvas/HTML5 for a game even this simple still puts more strain on your CPU than using Flash.

[via Hacker News]

See Also:

Tags: Animation, canvas, Games, HTML5, Pac-Man

Post Comment |
Permalink

gfk

So HTML 5 standards are signed off and done and released and official and all that? They really are standards?
jzsteed

I played this for a couple of minutes and my fan started running. Checked Activity Monitor and Safari goes from using 20% to 110% while running pacman.
Jean-Sebastien B. Miousse

Google did it on May 22th...

http://www.google.com/pacman/
alen b

Wow, they achieved something I did in Flash 12 years back. In fact no, my sound was working properly.
Paul Neave

I made the Flash version of Pac-Man in 2000, and HTML5 is only now catching up! Here's my Flash version for comparison: http://neave.com/pacman
christophe Le Besnerais

congratulation ! With HTML5 innovative technology you can actually barely manage to recreate program that exist since 30 years !! Well, almost, there is still no sound, but this is still the way of the future !
Gomezvi

I have a somewhat older machine, running Windows XP SP3 on Mozilla Firefox.
I played it for about six minutes. At first the ghosts were running super fast and it was very challenging. After I died, the sound seemed to fall out of synch, then went out for a solid minute. It was a little annoying to be playing, then to hear the sound of a new maze starting, or your pacman dying at random times during gameplay.
Also noticed the ghosts would remain blue into new mazes, and the 'eyes' would randomly choose not to go back to their starting position, but just become ghosts in random locations in the maze.
I had a BLAST with this, as the errant behavior meant I could not necessarily count on previous experience. Really tops, and thanks for sharing.
Iloveverdana

Microsoft did this 13 years ago :-)

http://www.microsoft.com/typography/web/embedding/demos/7/about7.aspx
ArrowSmith

Worked well enough, the ghosts were too fast though.
Alittle

It's not iPad friendly.
Czechmate

That's because Apple didn't sell it to you through the iStore. Nothing is Apple-friendly unless it's blessed in some weird monetary machine that makes you think a glass case for a portable device is a great idea.
yo2boy

Anything that uses more CPU than Flash is shit.
JJR512

Needs a "decent" browser? LOL. If you can figure out how to make it work with a standards-supporting browser, like Safari, let me know.
Inspirationfeed

this is awesome!
Dale Harvey

dinomate, I just noticed after I put it up that that playing ogg audio fails in safari, I will get that one fixed.

StareClips, as the post mentioned it was just a learning experiment, googles implementation was done in the dom which is very different from canvas.

Very surprised when I noticed webmonkey in my referrers, cheers for the writeup :)
Michael Calore

No problem, keep up the cool hacking. And thanks for jumping into the comments to answer questions!
Chris

Could you add in support for Android's version of Chrome? I'd bee interested in seeing how this runs on my Nexus One(Froyo 2.2).
dinomate

yeah, and google's actually worked for me.. no bleeps or bloops here in safari 5 on this one.
StareClips.com

Ummm... the Google logo version was ALSO HTML5. The only part of the Google logo version of Pac-Man which used Flash was the audio portion, which is precisely a problem the author of this version admits to. In other words, he did exactly what Google did with their logo. How many times are we going to reinvent this wheel and pat ourselves on the back?
Chriswininger

Many more times I'm sure. When a new language comes out it is useful to first recreate existing apps so that you can seen where the advantages and pitfalls are. It is a nice proof of concept and unlike google he provides access to the code so we can all learn from it.
mrzimm

Google's was just an interesting use of their logo whereas Dale's is part of a discussion on web development which means he kind of has to put the code front and center. If you view Google's source you can see everything that's going on, the code isn't hidden, there's just no need to zip it up and send you a link.
dazweeja

HTML5 != Javascript. Google's version is just some fancy Javascript. This version actually uses HTML5 (Canvas element).
Chris

HTML 5 is jus a markup language, it requires a scripting language like JavaScript in order to add any type of behavior.
mrzimm

If you look at the source code you will see "pacman.js" right after the canvas element. You have to use JavaScript to essentially redraw the canvas by editing style information. Canvas, on it's own, is static.
dazweeja

Of course, I would never suggest otherwise.
Chriswininger

I'm pretty sure there is still JavaScript involved. What the HTML5 Canvas element does is to give your javascript more control over the form by exposing an object that is easy to draw to. I think javascript is considered part of web standards now so as long as you don't use Flash, Silverlight, or some other plug-in you are adhering to HTML5.
dazweeja

You can use plug-ins and still have a valid HTML5 page. In fact, the 'embed' tag is part of the HTML spec for the first time. But that wasn't my point. See my reply to Chris above.

Webmonkey

Play Pac-Man in HTML5

Webmonkey’s Picks

Browse Our Tutorials

Cheat Sheets

Color Charts

Cut & Paste Code

Recent Comments

Recent Articles