Fun and Games With DHTML

By Stephen DownesAug 18, 1999

Posted to NewsTrolls 18 August 1999

It's been around for a little while now, but DHTML (Dynamic HTML) is finally coming into its own. Part of this has to do with the (very) gradual shift to DHTML compliant browsers - version 4.0 or above - and part of it has to do with developers' increasing ability to tweak the code.

As we see more and more DHTML sites spring up around the internet, we are beginning to see the World Wide Web move toward its true and fundamental purpose: video games!

So today, a few paragraphs to explain what's going on, and then we'll look at the games.

DHTML is actually a mixture of two other technologies: CSS (Cascading Style Sheets) and Javascript.

CSS gives web developers the ability to design, format and place blocks of HTML anywhere on the screen. So, for example, I could design a red block with my name in green and place that onto the screen exactly 200 pixels from the top and 100 pixels from the edge.

Javascript gives developers the ability to modify the values of page elements. Using Javascript, a developer can change the current page location, change images, change the value of elements in forms, and more. Javascript also gives develops the ability to capture user input on the fly: things like keystrokes, for example, or mouseclicks.

Combining Javascript with DHTML gives the developer the capacity to change the properties of a CSS block (or layer). For example, if my red box started out at 200,100 on the screen, a developer could use Javascript to change that location to 200,200. The red box would zip to its new location.

Because Javascript can capture keystrokes and mouse clicks, the actions of layers on the screen can be made sensitive to user input. Thus, for example, a developer could create a click-and-drag box. Or popup windows which respond at the stroke of a key. or more.

As I said, DHTML is just beginning to come into its element on the web. You don't see a whole lot of it on the mainstream sites. But if you dig around a little, you'll find a wide variety of arcade games. Here I am not referring to Javascript Hangman, or Jeopardy, or any of those other word games we've seen so much of in the past. I mean shoot-em-up fly-em-around full motion video games.

And thus, to the games we turn. To use these games, you must have Netscape 4.0 or better, or Internet Explorer 4.0 or better. Best have both browsers up and running - a lot of these games work on one, or the other, but not both. You will also need a reasonably fast CPU - I'm on a 330 and these games all worked just fine for me. Also, remember that DHTML games preload most of their code and images, so be prepared to wait a few seconds before seeing anything meaningful.

By Dan Steinman, creator of the Dynamic Duo workshop. You remember these games: they are little plastic boxes with little square tiles in them. One square is empty. You move tiles into the emply slot, rearranging them until you have assembled the image correctly. Cute and addictive.

Also created by Dan Steinman. Remember Asteroids? This is a bit like that. Two people can play. You each have a space ship, which you can fly around the screen, firing missiles either at each other (more fun) or at targets floating around the screen (less fun). It takes a bit to get used to - remember, the way to stop a space ship is to turn 180 degrees and fire thrusters.

The final entry from Dan Steinman, this is an on-screen version of that famous mind-bender from Russia. It looks and plays exactly the way the arcade version does - and it's just as frustrating. It took a few tries for me to learn how to rotate the falling blocks (you need your NumLock key on), but after that, I became as proficient on the online version as I was in the arcade. Another addictive little treat.

By Kazuhiro Moriyama (his home page is here). Do you remember that video game, a slight improvement on Pong, where you bounce a ball of a paddle into a pile of blocks, destroying a block each time you hit it. That horrible ball would go faster and faster until, inevitably, you missed it. This game is like that - exactly like that, and just as frustrating. Don't try it on 'fast' speed - not until you've mastered 'slow'.

JS Flanker Also by Kazuhiro Moriyama. This game is similar to the traditional arcade game Afterburner. You are at the controls of a jet aircraft - the aircraft is displayed in front of you - which moves left, right, up and down. As enemy aircraft appear, shower them with bullets or track them down with missiles. Destroy as many as you can before time runs out.

Also by Kazuhiro Moriyama. You remember Donkey Kong, right? The original jumping game featuring those rascally plumbers, the Mario Brothers. That's them. This game gives you one Mario, a but of things to jump on, coins to grab, and evil baddies to kill your character. I always hated those games in the arcade, and so I hate this one too. But lots of people loved them...

By Kazuhiro Moriyama. One of the big hits in the mid-80s was a game called Stargate. Your ship flew left-to-right into swarms of enemy aircraft; your mission, of course, was to destroy them. JS Falcon emulates that classis, complete with ground-based SAM based which fire heat-seeking missles. Haven't eluded a missile yet. Will keep trying.

By Kazuhiro Moriyama. This spectacular auto-racing game is styled after the original arcade game, OutRun, and its many clones. The premise is now classic: you drive a car along a race track as fast as you can while staying on the road and passing other cars. This one runs quickly, has great animation, and quirky features. Dig the logo on the back of the trucks! Sorry, this works only with Netscape.

By Kazuhiro Moriyama. I was less impressed with this one - perhaps I'm getting jaded. It's based on PlayStation's Ridge racer. You control a human figure hurtling through rocks and trees - avoid the obstacles or clear a path by blasting them with your ray gun. careful - you will encounter something a bit more challenging than rocks or trees...

By Kazuhiro Moriyama. Yes, folks, it's the return of Pac Man in full DHTML glory. Plays just like the original (though I don't know whether there are 256 levels or whether anyone has ever scored a perfect game). What's most interesting is the mouse control - no clicking; you simply point in the direction you want to go.

By endsite.com. Guess what this one's styled after. Turn over the tiles, find a match. Cute.

By Microsoft. A stunning replication of the original arcade game, Asteroids. Perfect down to the last broken chunk of rock. Two players. Absolutely spectacular. But you need Internet Explorer 4 or better.

By BugsMagazine. This oddly-named game isn't much to play - it's an emulation of one of those hand-held racing games, where you switch from lane to lane as you pass other cars. But the graphics are just beautiful. Sadly, available only for Internet Explorer.

By John Arnold. The best Space Invaders game of the bunch. Beautiful graphics, good functionality, and you can ignore the fact that the screen sometimes slips. use the < and > keys to move - not the arrow keys! Works only in Internet Explorer, more's the pity.

By Scott Porter. Yes, it was probably the silliest arcade game ever invented - the idea is to hop your frog across a busy highway without being squashed. Scott Porter's rendition is a stunning replication of the original. The instructions tell you to use your joystick, but if you press any key it will pop up a window with the keyboard instructions.

Also by Morten Haugaard Jeppesen. A classic shoot-em-up. Gangsters and good guys (or gals) pop up in windows or wherever; your job is to shoot them. Another groovy soundtrack, and the gunshots made a satisfying blood smear when they hit.

By Brett and Matt of Cutting Edge. It was almost a certainty that I would run across a game of Pong - but Pong was never like this. Beautiful graphics, a nice fast gameplay, and a rocking backbeat. Requires two players.

Also by Brett and Matt of Cutting Edge. A very nice race game, and at 30K (even with the soundtrack), quite compact. The controls may take a wee bit to get used to - just manipulate your mouse; there's no clicking - but you'll soon find that they are quite intuitive.

By Scott Porter. Yes, I know, you won't find solitaire in any arcade, but this one was just too nice to pass up. Looks, feels and plays just as easily as the Solitaire you got with Windows - and you don't gave to give Bill Gates $150 to get it, either.

There are so many more games I could probably spend the rest of the week adding to this list. But you get the idea. Anything which could be done on a 1980s style arcade game can now be done on the web using Javascript and HTML. Looking at where arcade games are today, one can only wonder at what we'll see by 2009.

Oh yeah, and a p.s. - as I type these final words I am waiting for my browser to close,crash, or simply hang (I don't know which it will do yet). Why? Well, by accident I went to a site featuring Java games, and it choked. And this is why DHTML holds such promise: it render all the games described above, it can do it efficiently, and it can do it without crashing your browser.