You're in the Games section...
HomeArcade Games

Most of my games are versions of my favourite arcade machines from the 80's and 90's. These are good candidates for converting to javascript, since most are 2D and sprite based. Most of my youth was spent pushing coins into the hungry slots of arcade machines, so I guess it's a nostalgia thing :-)

Playing the games currently taking up floor-space in arcades and motorway service stations, I find most to be far too linear, and obviously geared toward taking cash from as many people as possible in the shortest possible time. Many have a strictly limited time limit, which often cannot be exceeded no matter how good you are. Sure, the graphics are awesome, but the gameplay is lacking. Maybe it's just me, but I'd still rather play a single game of Pacman for 1/2 hour straight than 3 minutes on some snowboarding machine.

Play Donkey Kong now! (Internet Explorer or Netscape/Mozilla required)

Donkey Kong

This game actually started out as another demo for gamelib, and I suppose it still is in a way. The game uses gamelib for all of the animated elements, and keyboard handling code.

I'd fancied writing a platform game in javascript for a while, and since I loved Donkey Kong, and all the Mario games, it seemed like the idea conversion. One of the hardests aspects of the game to implement was its use of uneven floors and conveyor belts/platforms. I used a "character map" approach, in which an array is used that defines the height of the floor in each tile of the screen. This works pretty well, and doesn't use much CPU time (always in the back of my mind when using JS).

Since I used gamelib, all the collision detection is handled automatically, and the paths and rudimentary intelligence for the enemy sprites was simple to add. I decided to make Kong jump around when the player lost a life, to annoy the player and give Kong an air of arrogance. The backgrounds for the various stages, and title screens are actually all on one huge image, implemented as a sprite itself. This has its frame changed to change the backgrounds! This is much faster than downloading all the background elements and positioning them separately, and helps speed things up with Mozilla/NS6, as the gameplay sprites are only moving over 1 background image, rather than potentially hundreds!.

I still play this game quite a bit, although I'm not that good at it I suppose! I think I've managed to roll through all stages 3 times in a game before it became too challenging...

Play Frogger now! (Internet Explorer or Netscape 4 required)

Frogger

Such a simple concept, but great to play! Man, I must have poured hundreds of pounds through the original arcade machine of this game when I was a youngster, and I still enjoy it now. I wrote this years ago, which is why it only runs on IE and Netscape 4 (Mozilla wasn't around in any usable form then, and Netscape 6 didn't exist).

The idea is to walk your frogs across the road and river to the other side avoiding the traffic and not falling into the river... Now I think about it, what a stupid premise for a game - I mean, sure I understand the whole not-getting-into-a-fight-with-a-truck hazard, but a frog dying from falling into water??! Anyway, as time passes there are more hazards popping up, from wiggly snakes to snapping crocodiles and more and faster traffic!

I'd seen a pretty slow version on the web which used Flash and thought I might be able to come up with something a bit more playable at the time, but it took some work to get the speed up. The logs and traffic are not separate sprites, but long thin layers of images. Animation for the turtles, crocs and snakes is via image clipping. This helped the game run quickly on pretty slow machines at the time (266mhz P2s and lower). I added the high-score list too, to see how other players would faire with it...

I've written a version of this game to run on Java enabled mobile phones! Take a look over in the phone games page.

Play Galaxian now! (Internet Explorer or Netscape 4 required)

Galaxian

This was the first game I ever wrote in Javascript! I'd been playing with dHTML for a while at that point and wondered what to do next. Since I had keyboard control and the ability to script layer movement a game seemed a must!

I'm not sure how the original game implemented the alien intelligence, but I found a very simple method. I won't mention it here, as it'll make the game too easy to beat, but it works well. The game only uses a few actual sprites, as when the aliens are inthe main convoy they are just images held in a large table that moves left and right. This worked out much faster than moving a lot of small sprites over the moving background. The game can easily run far too fast to be playable, and is throttled back quite a lot on the site.

This game originally used sound effects for the bullets firing and explosions, but I became sick of the problems people were having with different plugins under Netscape at the time, so removed support. Since then I've learned much more reliable methods, and so sound may return!

Play Hard Driver now! (Internet Explorer or Netscape 4 required)

Hard Driver

Another pretty early game, and for Explorer and Netscape 4 only. I think this was like the 4th or 5th game I wrote. It uses fast layer clipping/movement to create the impression of 3D movement.

This game runs pretty quickly under NS4, at least 50 frames per second with a P3 600, and demonstrates how quick that old browser was with this type of animation. I actually wrote another game using a similar technique but instead of the track it was a space-flight type game, shooting 3D aliens. I never actually got around to finishing that though. Or this either :-)

If you try it, you'll notice the advertising boards are all clickable, as I abandoned the game aspect and began changing it over to a navigation system.

Incidentally, the car image was rendered by me, while I was in my 3D object fiddling stage :-)

Play Ice Blox now! (Internet Explorer or Netscape 4 required)

Ice Blox!

Perhaps still my favourite game! The original was called Pengo and I loved that so much I had to write a version. The game revolves around you, the penguin trying to kill off the snowbees wandering around your icy world.

To kill the Snowbees and finish the levels you must squash them with the ice blocks by pushing them. As the Snowbees get angrier they start smashing through the blocks, which is when the fun really starts!

This game uses a maze generating algorithm to create the random maps. If you look closely you can see each map has only one path from the top to the bottom! It appears slowly as I though that looked cooler than having it suddenly appear - much like the original. This game used an early modified version of gamelib for the animation and keyboard handling. As it was an early version, Mozilla and NS6 support is not totally in there.

I've written a version of this game to run on Java enabled mobile phones! Take a look over in the phone games page.

Play Pacman now! (Internet Explorer or Netscape 4 required)

Pacman

THE classic arcade game. Along with Space invaders, this is probably one of the few games everyone has heard of, if not played. I knew how the original worked, having owned one of the original machines and worked on the circuit boards, so implementing this was fun!

The original machine was very short on RAM, so only one map was used, and only half of it was stored! If you examine the maps you can see they're all mirrored along the vertical centre, so this game too only stores the left hand side! I doubt the ghost movement algorithms have much in common with the originals though.

This was the second game I wrote, and I admit I made some mistakes. One was using animated gifs which is a terrible idea in dHTML! Another was actually drawing the 4 maps using small gifs, when I could have just stored images of the maps and saved a lot of time and energy. It plays pretty quickly though, maybe a bit too fast. I added the between-stage animations for the sake of it, as I liked playing with the sprites.

I've now written a version of this game to run on the Java-enabled mobile phones! If you have one of these, and wish to play Pacman (Pman) then hop on over to the phone game page!

Play Retake now! (Anything but Opera required)

Retake

I wrote this to see if simple action games were a viable option with WebTV browsers. It was sort-of successful, but to be honest, the WebTV machines are a little too slow to make this much fun once a few balls are bouncing around.

The idea is to try to retake the screen by walling off sections, trapping the balls in smaller and smaller sections until you've captured a high enough percentage to move on to the next level - with more balls :-) It has a very simple control mechanism: you just click where you want a wall to start growing. If a ball hits the wall before it's walled off a section you lose a life, and that section of wall.

This game probably works with all browsers except Opera (maybe Opera too, who knows? I hate that browser :-) It uses a recursive function to check which blocks have been walled off, which seems to work about 5 times as quick with Netscape 4 as any other browser - go figure!

Play Rio Muerto now! (Internet Explorer or Netscape 4 required)

Rio Muerto

This is a strange game! It was commisioned by a company called "High-Noon productions" over in the States. It's based on the very very old game "Outlaw" that appeared on one of the first home games systems from Atari, called the VCS.

The idea was to keep it as close to the original as possible, with monochrome graphics (although I did add a gradient background to make it more appealing). The game uses sound effects for the guns shooting and the splat as a fighter is hit. I still quite like this game, it's a nice quick blast for a laugh, although it initially seems primitive.

While researching for this game, I found it amazing how the original programmers managed to get anything useful out of the old VCS system. It only had a couple of "sprites", no graphic RAM, and everything had to be timed in the code otherwise screen corruption would occur. Oh, and it had a miniscule amount of memory - 4k of ROM, and 128 bytes of RAM! That's 1/8th of 1k :-) Mind you, it had perfect collision detection and the joystick ports could also send output signals! If you'd like to read up on this bizarre machine, try looking here.

Play Super Collider now! (Internet Explorer or Netscape/Mozilla required)

Super Collider

This started as yet another demo for gamelib. It's based loosely on the old game "Snake", made famous by the Nokia phone amongst other things. In the original snake, you could move in 4 directions, and had to eat food to increase your score and make you grow. You lost when your snake's head hit its body or a wall.

I decided it would be interesting to allow the snake to move through 360 degrees instead and have moving obstacles and explosions :-) So in this game you move around, trying not to hit yourself or the other hazards. You have to collect a set amount of red gems per level, but can also increase your score by collecing bonus gems. The game has 3 maps at the moment, and can easily be extended by anyone with the gamelib!

As it's a demo, it's fully commented (well, mybe not fully, but much more so than most of my code). It's also pretty playable on a fast machine, although as always Netscape 6 and Mozilla are almost excrutiatingly slow! I really hope the Mozilla people pull something out of the bag and fix their rendering engine - I've heard some promising things lately, so here's hoping...

Play Tempest now! (Internet Explorer 5+ required)

Tempest

I remember thinking "wow!" when I found out Explorer had a new plugin to allow vector graphics to be created from markup or scripting. This was VML, vector markup language and it was Microsoft's proprietory answer to SVG (scalable vector graphics).

Immediately I thought "Tempest!!" - the best arcade game of all time! It seemed the perfect fit, all vector lines and lots of empty screen. However about 1/2 way into development, it became clear that VML had some limitations... First off it was ssslllooowww when a few vectors were overlapping on the screen. The early versions of the game sucked bigtime on my machine at the time (a 400mhz P2). So I didn't want to throw all the work away and used a few tricks to extract a little more speed.

The rotating cube and tunnel fly-in sections couldn't really be changed and still look realistic, but I realized that once a tunnel had landed in position the enemies, player and bullets were locked onto a fixed number of positions. So after the fly-in, the game pre-renders the player, enemies and bullets in all their positions, and then during gameplay the neccesary vectors are shown and hidden to simulate movement. It's actually probably more difficult code-wise than just moving the vectors, but it's much much faster using the trick! It's not really up to the standard of the original, but on a fast machine now it really flies!

For anyone interested, the different tunnels are all extruded from a small set of 2D points, and the player, enemy and bullet objects are mapped onto them, which means adding extra levels is pretty simple!

Of course, Asteroids was another good candidate for vector graphics, but maybe I'm too dumb to take the easier option!

Play Tetris WebTV now! (WebTV required)

Tetris WebTV

This was my most recent attempt to create a playable arcade type game for WebTV users. This actually seems to run quite well on the set top boxes, and uses a custom control method so the players can just press the up/down/left/right arrows on their remote controls to play!

To increase speed, I used 2 colour images throughout the game (apart from the title graphic) - changing colour depths during image swaps is very slow with WebTV and using high-colour images would be wasteful and take longer to download. This game seemed perfect for WebTV, as all the action usually happens in a very localised section of the screen which suits it just fine. Changing elements in different locations around the screen causes all sorts of problems with games on WebTV in my experience. Either the box crashes, or visual artifacts appear.

For the control method, I used 5 gifs, arranged in a cross and all with hrefs attached. The webTV navigation method uses an outline the viewer moves between links, so I set the cross up so the outline was focused on the centre point. Then using onmouseover events the game was notified of movements, and the outline immediately re-focused to the centre again. This seems to work very well for this game, although it obviously makes it virtually unplayable with a mouse!

My Test code was left in though, so it can be played in Explorer using the cursor keys...

Play Video Pool now! (Internet Explorer 5+ or Netscape 6/Mozilla  required)

Video Pool

As a youth, I like many others spent a significant amount of time playing pool in pubs, bars and arcades. So why not have a version to waste a bit of time on the Net too!

This is my first networked Javascript game - maybe the first anywhere? I don't know, but I enjoy playing it anyway. It's a DOM2 browser only game, so IE5/6 or Netscape 6/Moz are required to play. It uses XML HttpRequests to the server to transfer information back and forth between players when it can, or it falls back on an iFrame to do the same if the browser doesn't support that method. It seems to run pretty fast with IE, and the network code is pretty reliable I think.

By far the hardest part of this game was trying to get realistic ball movement. It's far more complex than you might initially think, especially for multi-ball collisions where a lot of energy has to be transferred to make for a decent simulation. My method is not perfect, but pretty easy on the CPU and works most of the time - there are the odd times it goes a little wierd though!

For the cue rotation, I've used one huge canvas image with the cue in 180 rotation positions (2 degrees at a time). This isn't as big as you might think, as it's only a 4 colour image, and clipping is used to show only one position at a time. All the graphics were created using Fireworks - my graphic tool of choice. I also use the much under-rated PaintShop Pro 6 for raster image manipulation.

On the server-side, this game uses my XML script called socketMonkeyXML.cgi. I'm not sure where I came up with the name, but during testing it was pretty funny to run top on the server (top is a unix program that displays running processes) and see all these socketMonkeys on the screen! The socketMonkey will be included in the next version of Gamelib (2.0), along with the network library...

Play Tetris WebTV Invaders now! (WebTV required)

WebTV Invaders

This is an example of me attempting to exceed the limits of the WebTV machine ;-) I use an emulator on my PC at home to test WebTV games, which is all well and good, however, the emulator doesn't emulate just how slow the WebTV machine actually is. The result of this was that this game, whilst very playable on the emulator, is pretty unplayable on the actual machines! The biggest problem was that the remote control used on the actual box doesn't have key-down-repeat, so the player has to keep pressing left or right to move!

It's basically a Space Invaders clone, which plays pretty much like the original - same graphics, movement and scoring etc. I've left it up as an example of when things go wrong - I could add keyboard support and turn it into a normal browser game I guess, but there are already several versions of this on my games site, so I don't think it's required!