4 ms·

How to Write a Pac-Man Game in JavaScript (2004)

87 points by franze 11y ago

mrspeaker 11y ago
My favourite bit of JavaScript game dev from 2004 was DHTML Lemmings (http://www.elizium.nu/scripts/lemmings/ http://www.elizium.nu/scripts/lemmings/) - a great implementation of Lemmings, including destructible terrain, without canvas/webgl!
- kyberias 11y ago
  Are the "pixels" DOM elements or how does this work?
  - Jasper_ 11y ago
    The background is always black. The hole graphics are overlaid bits of black pixels. https://github.com/spMohanty/lemmings/blob/master/img/hole_digger.gif https://github.com/spMohanty/lemmings/blob/master/img/hole_d... https://github.com/spMohanty/lemmings/blob/master/img/hole_exploder.gif https://github.com/spMohanty/lemmings/blob/master/img/hole_e...
ck2 11y ago
This brings back memories of me trying to figure out how make breakout in level 1 BASIC (4K) on a TRS-80 Model I in the early 80s I would use the store demo computers at Radio Shack and so I had to either memorize it or rewrite it from scratch every time I wanted to attempt it.
bwooceli 11y ago
They'll want to update ghost movement http://gameinternals.com/post/2072558330/understanding-pac-man-ghost-behavior http://gameinternals.com/post/2072558330/understanding-pac-m...
- Someone1234 11y ago
  The tutorial specifically addresses this. Seems like a fair tradeoff to keep the game simpler and easier to implement.
Quiark 11y ago
lol I actually wrote PacMan in "DHTML" back then when DHTML actually was a thing... The source seems to be lost, it required IE4 to run anyway...
hguillermo 11y ago
and I wrote this in 2005/2006: http://www.harryguillermo.com/games/pacman/pacman.php http://www.harryguillermo.com/games/pacman/pacman.php And this in 2013: http://www.hg10101.com/games/jspacman/index.html http://www.hg10101.com/games/jspacman/index.html You can find the code in my github account: https://github.com/hguillermo/jspacman-canvas https://github.com/hguillermo/jspacman-canvas
- masswerk 11y ago
  Please mind that this is a tutorial based on a game for Netscape 3.0, written in 1996 and later updated to DHTML. For a bit more recent versions (2008/2009), see http://www.masswerk.at/JavaPac http://www.masswerk.at/JavaPac P.S.: Your games were seminal tributes to browser gaming for sure! Edit: These are my own favorites: [1] http://www.masswerk.at/JavaPac/JS-MsPacMan3D.html http://www.masswerk.at/JavaPac/JS-MsPacMan3D.html [2] http://www.masswerk.at/JavaPac/LostInMaze.html http://www.masswerk.at/JavaPac/LostInMaze.html and of course [3] http://www.masswerk.at/JavaPac/JS-PacGal3D.html http://www.masswerk.at/JavaPac/JS-PacGal3D.html – the 1982-"Scuba Swatch" color mod of Ms Pac-Man.
zappo2938 11y ago
Jake Gordon at Codeincomplete.com has lots of great write ups about javascript game development. It's worth checking out. Start with the pong implementation to see the most basic parts of a game including game loop, painting to canvas, and collision detection. http://codeincomplete.com/games/ http://codeincomplete.com/games/
paulpauper 11y ago
I wonder when the earliest this could have been feasible on a web browser
- masswerk 11y ago
  The game this tutorial is based on was done in late 1996 for Netscape Navigator 3.0 (which was introduced in September, I think, and allowed you for the first time to change the image source attribute). The whole point of the code laid out in the tutorial was about being fast enough to do it in realtime. (E.g., string operations and string comparisons were slow and even crashed Netscape 3.0 on a PowerMac [bringing down the whole machine], when there were too many too fast, or avoiding function calls, which were expensive, too.) The granularity of animations was actually limited by bandwidth and dial-ups then commonly in use. There's a demo [1] for smooth animations for NS 3, achieving sub-animation by the image equivalent of 8-bit programmable character-set animation. But this would have been to heavy in load/bandwidth to be used for a full featured game. DHTML came in August 1997 (NS 4.0 and layers) and would finally let you do you whatever you wanted (or rather, some of it). Also, both JavaScript and average machines had become a little faster by then (but there were a few surprise in JS 1.2, like minus zero). [1] http://www.masswerk.at/JavaPac/legacy/JS-SmoothMaze.htm http://www.masswerk.at/JavaPac/legacy/JS-SmoothMaze.htm [Edit:] A real issue with early browser games was the amount of available screen estate. Average screens were 12"@72dpi (640 × 480), leaving a quite small usable space when taking into account the space occupied by the task bar, the menu bar, the quite heavy window chrome of the browser, etc. (No way to squeeze a full featured Pac-Man layout into the remaining area.) Before Netscape 3, there were some visual interactive games that were typically running in a textarea element as ASCII animations, since this was the only spacial element that could be directly manipulated by JS. I remember an Invaders game done this way, very much like http://www.masswerk.at/termlib/sample_invaders.html http://www.masswerk.at/termlib/sample_invaders.html but in black on white in a textarea. (Another way to do animations was to write a new document into a frame, but this was too slow for interactive realtime games, aka "video games".)
  - masswerk 11y ago
    PS: Here is the 1996 implementation of the Pac-Man game: http://www.masswerk.at/JavaPac/legacy/JS-PacManSR.htm http://www.masswerk.at/JavaPac/legacy/JS-PacManSR.htm (click cancel in the popup-prompt) (Mind the small maze for 640 x 480 screen sizes and the unusual connection of the "teleports" to add a bit of complexity to the maze layouts. There was another, even earlier implementation to this one, but I don't have the sources anymore.) Maybe interesting backstory: The games (JS-PacMan and an Invaders game) were done explicitly as demos for brand-able browser games, but – while listed in all those "What's cool" directories of the day – marketing people didn't catch the idea of games in the browser then. I ended up providing the Invaders game for free to USA Today Marketplace (they opted for the Pac-Man game first, but settled on the Invaders game for legal concerns), since there wasn't a commercial market for this. (Some years later, all those mails like, "I need this for my homework, can I have it?", started to drop into my mailbox, this is, why there is the tutorial. That's also why there are some gaps left in the tutorial, meant to force people to do their own, rather than just copying the code.) Ironically, when the originally iPhone came out, the game was just up to date again, in terms of screen size, performance requirements, and touch-friendly input. There were means to transfer it onto the iPhone and someone sold a pirated version on CD as a dedicated iPhone game.
a3voices 11y ago
This is a tangent, but does anyone know the max number of sprites you can have animated in JavaScript before it gets sluggish on a typical computer running Chrome?
- drhayes9 11y ago
  Lots of variables enter into this, but here's Pixi.js' bunnymark if you want to try this yourself: http://www.goodboydigital.com/pixijs/bunnymark/ http://www.goodboydigital.com/pixijs/bunnymark/ My system (OSX 10.10.5, 2.6 GHz Intel Core i5, 16 GB RAM) running Chrome 45.0.2454.101 (64-bit) gets north of ~80k bunnies before dropping FPS below 60. Don't measure when adding, add a bunch and let it run for a bit.
  - a3voices 11y ago
    Awesome, thanks.

87 points by franze 11y ago

My favourite bit of JavaScript game dev from 2004 was DHTML Lemmings (http://www.elizium.nu/scripts/lemmings/ http://www.elizium.nu/scripts/lemmings/) - a great implementation of Lemmings, including destructible terrain, without canvas/webgl!

kyberias 11y ago
Are the "pixels" DOM elements or how does this work?
- Jasper_ 11y ago
  The background is always black. The hole graphics are overlaid bits of black pixels. https://github.com/spMohanty/lemmings/blob/master/img/hole_digger.gif https://github.com/spMohanty/lemmings/blob/master/img/hole_d... https://github.com/spMohanty/lemmings/blob/master/img/hole_exploder.gif https://github.com/spMohanty/lemmings/blob/master/img/hole_e...

ck2 11y ago

This brings back memories of me trying to figure out how make breakout in level 1 BASIC (4K) on a TRS-80 Model I in the early 80s I would use the store demo computers at Radio Shack and so I had to either memorize it or rewrite it from scratch every time I wanted to attempt it.

bwooceli 11y ago

They'll want to update ghost movement http://gameinternals.com/post/2072558330/understanding-pac-man-ghost-behavior http://gameinternals.com/post/2072558330/understanding-pac-m...

Someone1234 11y ago
The tutorial specifically addresses this. Seems like a fair tradeoff to keep the game simpler and easier to implement.

Quiark 11y ago

lol I actually wrote PacMan in "DHTML" back then when DHTML actually was a thing... The source seems to be lost, it required IE4 to run anyway...

hguillermo 11y ago

and I wrote this in 2005/2006: http://www.harryguillermo.com/games/pacman/pacman.php http://www.harryguillermo.com/games/pacman/pacman.php And this in 2013: http://www.hg10101.com/games/jspacman/index.html http://www.hg10101.com/games/jspacman/index.html You can find the code in my github account: https://github.com/hguillermo/jspacman-canvas https://github.com/hguillermo/jspacman-canvas

masswerk 11y ago
Please mind that this is a tutorial based on a game for Netscape 3.0, written in 1996 and later updated to DHTML. For a bit more recent versions (2008/2009), see http://www.masswerk.at/JavaPac http://www.masswerk.at/JavaPac P.S.: Your games were seminal tributes to browser gaming for sure! Edit: These are my own favorites: [1] http://www.masswerk.at/JavaPac/JS-MsPacMan3D.html http://www.masswerk.at/JavaPac/JS-MsPacMan3D.html [2] http://www.masswerk.at/JavaPac/LostInMaze.html http://www.masswerk.at/JavaPac/LostInMaze.html and of course [3] http://www.masswerk.at/JavaPac/JS-PacGal3D.html http://www.masswerk.at/JavaPac/JS-PacGal3D.html – the 1982-"Scuba Swatch" color mod of Ms Pac-Man.

zappo2938 11y ago

Jake Gordon at Codeincomplete.com has lots of great write ups about javascript game development. It's worth checking out. Start with the pong implementation to see the most basic parts of a game including game loop, painting to canvas, and collision detection. http://codeincomplete.com/games/ http://codeincomplete.com/games/

paulpauper 11y ago

I wonder when the earliest this could have been feasible on a web browser

masswerk 11y ago
The game this tutorial is based on was done in late 1996 for Netscape Navigator 3.0 (which was introduced in September, I think, and allowed you for the first time to change the image source attribute). The whole point of the code laid out in the tutorial was about being fast enough to do it in realtime. (E.g., string operations and string comparisons were slow and even crashed Netscape 3.0 on a PowerMac [bringing down the whole machine], when there were too many too fast, or avoiding function calls, which were expensive, too.) The granularity of animations was actually limited by bandwidth and dial-ups then commonly in use. There's a demo [1] for smooth animations for NS 3, achieving sub-animation by the image equivalent of 8-bit programmable character-set animation. But this would have been to heavy in load/bandwidth to be used for a full featured game. DHTML came in August 1997 (NS 4.0 and layers) and would finally let you do you whatever you wanted (or rather, some of it). Also, both JavaScript and average machines had become a little faster by then (but there were a few surprise in JS 1.2, like minus zero). [1] http://www.masswerk.at/JavaPac/legacy/JS-SmoothMaze.htm http://www.masswerk.at/JavaPac/legacy/JS-SmoothMaze.htm [Edit:] A real issue with early browser games was the amount of available screen estate. Average screens were 12"@72dpi (640 × 480), leaving a quite small usable space when taking into account the space occupied by the task bar, the menu bar, the quite heavy window chrome of the browser, etc. (No way to squeeze a full featured Pac-Man layout into the remaining area.) Before Netscape 3, there were some visual interactive games that were typically running in a textarea element as ASCII animations, since this was the only spacial element that could be directly manipulated by JS. I remember an Invaders game done this way, very much like http://www.masswerk.at/termlib/sample_invaders.html http://www.masswerk.at/termlib/sample_invaders.html but in black on white in a textarea. (Another way to do animations was to write a new document into a frame, but this was too slow for interactive realtime games, aka "video games".)
- masswerk 11y ago
  PS: Here is the 1996 implementation of the Pac-Man game: http://www.masswerk.at/JavaPac/legacy/JS-PacManSR.htm http://www.masswerk.at/JavaPac/legacy/JS-PacManSR.htm (click cancel in the popup-prompt) (Mind the small maze for 640 x 480 screen sizes and the unusual connection of the "teleports" to add a bit of complexity to the maze layouts. There was another, even earlier implementation to this one, but I don't have the sources anymore.) Maybe interesting backstory: The games (JS-PacMan and an Invaders game) were done explicitly as demos for brand-able browser games, but – while listed in all those "What's cool" directories of the day – marketing people didn't catch the idea of games in the browser then. I ended up providing the Invaders game for free to USA Today Marketplace (they opted for the Pac-Man game first, but settled on the Invaders game for legal concerns), since there wasn't a commercial market for this. (Some years later, all those mails like, "I need this for my homework, can I have it?", started to drop into my mailbox, this is, why there is the tutorial. That's also why there are some gaps left in the tutorial, meant to force people to do their own, rather than just copying the code.) Ironically, when the originally iPhone came out, the game was just up to date again, in terms of screen size, performance requirements, and touch-friendly input. There were means to transfer it onto the iPhone and someone sold a pirated version on CD as a dedicated iPhone game.

a3voices 11y ago

This is a tangent, but does anyone know the max number of sprites you can have animated in JavaScript before it gets sluggish on a typical computer running Chrome?

drhayes9 11y ago
Lots of variables enter into this, but here's Pixi.js' bunnymark if you want to try this yourself: http://www.goodboydigital.com/pixijs/bunnymark/ http://www.goodboydigital.com/pixijs/bunnymark/ My system (OSX 10.10.5, 2.6 GHz Intel Core i5, 16 GB RAM) running Chrome 45.0.2454.101 (64-bit) gets north of ~80k bunnies before dropping FPS below 60. Don't measure when adding, add a bunch and let it run for a bit.
- a3voices 11y ago
  Awesome, thanks.