DHTML Example: Video Game

By Joe Burns

DHTML Example provided by Francoise White at the SFAN Experimental Multimedia Page

Use these to jump around or read it all...

[The Name Of The Game Is "Invaders"]
[What's Happening?]
[All The Parts]
[Have Fun]

     This is the second of what I hope to be many examples of DHTML contained on the HTML Goodies Web site.
     Shortly after being posted, the DHTML tutorial quickly became one of the most popular pages on this site. Apparently this stuff is pretty hot. Soon after, I received this letter:

     We are developing DHTML authoring software that utilizes inverse mechanic and artificial behavior. Our Web site has numerous examples of interactive DHTML with JavaScript. We would be pleased if you could have a look and send us your comments.
Thank you
Francoise White

     So, I went and looked. SFAN Experimental Multimedia Page is a great site that will only get better, I'm sure. Visually, it's stunning. Things just fly everywhere. So, in my most humble tone, I wrote back asking if I could use one of the site's examples as a DHTML tutorial. Here's what I got back:

Dr. Burns,
     Yes you have our permission to use our site and our demos for your tutorials. We would reciprocate. Let us know. We will contact you when our beta version [of a program to help you create your own DHTML events] is available for downloading.
Francoise White

     That said, here's what I've got for you:

The Name Of The Game Is "Invaders"

     This is a great, visually pleasing video game. Here's the concept: You are flying an f14 in space. (I know it's impossible, but work with me here.) There is a spaceship that wants to blow you up. You wish to do the same to it, obviously. Your fighter jet is given missiles and cannon shots. The spaceship has lasers.
     Avoid the lasers and shoot the spaceship. What's even better about this is that when you shoot the spaceship, it blows up! Ha!
  • "M" fires the missiles. You get five.
  • "C" fires the cannons. You get fifteen.
  • The mouse moves the fighter jet up and down.

     You must be running Microsoft Explorer 4.0 to play the game. Good luck. Come back when you're done to get all the parts.

Click Here To Play

What's Happening?

     The news gets even better. This game is fully self-contained. Simply take all the parts and place them in the same directory. Then run the file named "invaders.htm" and you're good to go.

     Now, this is an example, so it would help for you to open and look at the codes. You'll see that two pages are actually at work here. There is the main page (invaders.htm) and an external JavaScript that work on the images.
     Each image is placed in a specific place through an absolute position Style Sheet command and then given a span in which it can move. The remainder of the scripts outline paths for that image. You'll note the randomness of the spaceship and the rather deliberate vertical movement of the f14 jet.
     In addition, there are commands that inform the computer that when two specific images intersect, it should run a third image. For instance, if the missle.gif image and the ufo.gif image occupy the same space, a third image, firea.gif, runs at that spot. The effect gives the impression that a missile hit the spaceship and the spaceship blew up.
     It's the same thing with the spaceship, the lasers, and the f14. If they intersect, the game is over and you're dead. R.I.P.
     It's very clever and very involved. Be thankful that it comes to you ready-to-go.

All The Parts

     There are 10 items you need for this to work. Forget one and you're out of luck. You can either grab each one by itself or grab them all in a big Zip file.

Here you go...

  • The Text Documents
    • invaders.htm: This is the main page. It is still in html format. Right click to download; MAC users, hold the mouse down to perform a straight download. (30.9KB)
    • getpos.js: This is the external JavaScript. (29.9KB)
  • The Images
  • The Sound
    • thrush.mid: This is the background music. (17KB)
  • The Whole Thing

Have Fun

     Thanks again to Francoise White at the SFAN Experimental Multimedia Page for allowing me to post this DHTML example. Good luck putting it on your site. It really is a clever piece.

     If you haven't already, you should really read over the DHTML Tutorial so you go into this having a fairly clear picture of what's going on. Or just bull forward onto these:

DHTML Example #3: Power Point Style Transitions
DHTML Example #4: Folder Trees
DHTML Example #5: Moving Note Cards
DHTML Example #6: Color Changing Links Flips
DHTML Example #7: Color Changing Button Flips

Your choice.


[The Name Of The Game Is "Invaders"]
[What's Happening?]
[All The Parts]
[Have Fun]

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date