
How to Write a Pac-Man Game in JavaScript (2004) - franze
http://www.masswerk.at/JavaPac/pacman-howto.html
======
mrspeaker
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
Are the "pixels" DOM elements or how does this work?

~~~
Jasper_
The background is always black. The hole graphics are overlaid bits of black
pixels.

[https://github.com/spMohanty/lemmings/blob/master/img/hole_d...](https://github.com/spMohanty/lemmings/blob/master/img/hole_digger.gif)

[https://github.com/spMohanty/lemmings/blob/master/img/hole_e...](https://github.com/spMohanty/lemmings/blob/master/img/hole_exploder.gif)

------
zappo2938
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/)

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

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

------
ck2
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.

------
hguillermo
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
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.

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

~~~
masswerk
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
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.

------
Quiark
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...

------
a3voices
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
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
Awesome, thanks.

