Arcade-quality Pac-Man in HTML5
April 12, 2011 5:15 PM   Subscribe

Arcade-quality Pac-Man in HTML5
By "arcade-quality", I mean that I captured the graphics and sound from the Pac-Man arcade ROM (via MAME), implemented the original ghost movement strategies, and tried to get the animation as smooth as the original. This implementation includes a high-score board, and can be expanded to accommodate multiple mazes.

I haven't done much serious programming in nearly a decade, but felt compelled to learn more about this HTML5 that I've been learning so much about. I've also always wanted to code up a Pac-Man, so Pac-5 is the result.

From the link I provide, you can click "Play!" in the menu to get going. I've put up some information elsewhere on the site that describes the project in more detail. I hope to continue to pick away at this thing, and provide more content, more mazes, and improved implementations of the game.

I built a high-score board using MySQL, but that turned out to be a bit of a disaster on the free webspace I was using. So now it's in XML, which is must more robust.

Any feedback would be much appreciated. Thanks!
Role: programmer, designer
posted by hiteleven (22 comments total) 4 users marked this as a favorite

What are the keys to steer? I can't seem to control pac-man at all (Firefox 4 / Ubuntu)
posted by COD at 5:48 PM on April 12, 2011


The arrow keys should do it. Maybe you have to click on your browser to give it back focus?
posted by hiteleven at 5:52 PM on April 12, 2011


I think that was it. At 45 FPS the arrow keys were really unresponsive, but worked normally at 30 FPS. My laptop is old and creaky - bought new in 2004.

Nice job!
posted by COD at 6:06 PM on April 12, 2011


Thanks! Yeah, unfortunately HTML5 tends to be a resource hog...my 2007-era laptop also has trouble with it sometimes.
posted by hiteleven at 6:20 PM on April 12, 2011


implemented the original ghost movement

Nice!

What browser would you recommend trying this on? Firefox 3.6 loaded a blank screen. I'm downloading Firefox 4 at the moment.
posted by odinsdream at 6:39 AM on April 13, 2011


Nice job. Works pretty well in Firefox 4 for me.
posted by exogenous at 7:42 AM on April 13, 2011


Firefox 4 on Mac ; I just get a zero and two pac-man lives at the top, the rest of the screen is black.
posted by odinsdream at 7:50 AM on April 13, 2011


Needs touchscreen support!
posted by Burhanistan at 8:00 AM on April 13, 2011


FYI: Doesn't seem to work right in Safari on the Mac. The game is playable but none of the walls are visible and dots only appear when sprites approach them.
posted by The Winsome Parker Lewis at 8:05 AM on April 13, 2011


- There is a section on the website that describes the performance of the game in various browsers (to the best of my knowledge). No HTML5 implementation is perfect, unfortunately.

- If the graphics are not displaying, you might have to wait and let the pacman5.html page load up completely. I really do need to add a status bar to indicate when the game is loaded and ready to go.

- There is actually touchscreen support built in! But HTML5 performance in Safari for iOS is so utterly terrible right now that it wasn't worth coding up fully. Hopefully that will change someday.

Thanks for the feedback, everyone!
posted by hiteleven at 9:15 AM on April 13, 2011


Ah, it seemed to work fine on a Galaxy Android tab running Firefox, minus lack of controls of course.
posted by Burhanistan at 9:19 AM on April 13, 2011


@Burhanistan, Hmm, how interesting! Try swiping the space under the score area, if you have a moment. I think the swipe functionality is active in that area.
posted by hiteleven at 9:56 AM on April 13, 2011


FYI -Ironport doesn't like it:
This Page Cannot Be Displayed

Based on your corporate access policies, this web site ( http://pac5.t15.org/pacindex.php ) has been blocked because it has been determined by Web Reputation Filters to be a security threat to your computer or the corporate network. This web site has been associated with malware/spyware.

Threat Type: Phishing
Threat Reason: Identified as a phishing or spam-related site.

If you have questions, please contact your corporate network administrator and provide the codes shown below.

Notification codes: (1, MALWARE, Phishing, Identified as a phishing or spam-related site., BLOCK-MALWARE, 0x0823aac3, 1302720632.890, AAAD6wAAAAAAAAAAIv8ACP8AAAD/AAAAAAAAAAAAAAE=, http://pac5.t15.org/pacindex.php)

posted by dirtdirt at 11:51 AM on April 13, 2011


I suck. Which is fine since I suck anyway. I guess that makes it perfect, although it's kind of hard to test that theory.

Anyway, do you have plans to do anything else?
posted by theichibun at 11:52 AM on April 13, 2011


Pretty amazing. I had to click my mouse in order to get my second life to start, but other than that, very smooth.
posted by adamrice at 2:02 PM on April 13, 2011


@dirtdirt, thanks for letting me know. I can check into that.

@adamrice, yeah, that's a bug that still has me flummoxed. If you hit one of the directional keys a few times that should also make he maze appear. I still have to isolate whatever is making these blank screens appear on occasion.

@theichibun, I really want to expand the maze offerings, and bring in the Ms. Pac-Man mazes in particular. I'd also like to have a maze editor. Beyond Pac-Manning, I have a pretty decent arcade engine I can work with now, so I am making plans for other projects!
posted by hiteleven at 4:18 PM on April 13, 2011


Firefox 4, Windows 7 x64, 60fps. Runs well for me on a nearly 3 year old laptop, though it did momentarily twitch a few times. I found a weird bug on level 3 or 4 where the ghost would get stuck just outside of the doorway coming out of the respawn room and then I died ;)

Seems a lot faster than I remember on the 4th level. I could just be getting old now :)
posted by starscream at 7:32 PM on April 13, 2011


THE FRUITS ADD IN THE FRUITS

(this is awesome btw)
posted by magnificent frigatebird at 7:37 PM on April 13, 2011


Did you implement the kill screen?
posted by Plutor at 10:27 AM on April 14, 2011


@starscream: I tried to ramp up the difficulty about as quickly as it happens in the arcade game. You'd be surprised how hard it gets early on. Remember that these machines were designed to eat quarters...they didn't really want you to get in a long game.

Also, I'll probably get to the fruits sometimes, but it's not a part of the game that particularly thrills me. Still, for the sake of authenticity, I suppose they should be there. No plans on making the kill screen, though!
posted by hiteleven at 11:15 AM on April 14, 2011


Firefox 4, Windows 7, 64-bit: first time, got the two pacmen and 0. Came back here, went back to the game - started immediately.
posted by alasdair at 12:30 PM on April 19, 2011


Oh, this is great.
posted by booknerd at 7:57 PM on April 21, 2011


« Older Destination Truth Blog (i.e. Wannabe-Exhaustive Fa...   |   Fun With Internet Dating... Newer »


You are not currently logged in. Log in or create a new account to post comments.