DHTML Example: Video Game
Use these to jump around or read it all...
[All The Parts]
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:
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:
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.
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.
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.
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 PartsThere 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
- The Images
- cannon.gif: This is the cannon shot. (2.24KB)
- earth.gif: This is the page background. (64.6KB)
- f14.gif: This is the plane. (4KB)
- firea.gif: This is the explosion. (27.6KB)
- laser.gif: This is the UFO's laser shot. (.15KB)
- missileh.gif: This is the missile shot. (.6KB)
- ufo.gif: This is the bad guy. (4KB)
- The Sound
- thrush.mid: This is the background music. (17KB)
- The Whole Thing
- invaders.zip: This is everything. (116KB)
Have FunThanks 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 #4: Folder Trees
DHTML Example #5: Moving Note Cards
DHTML Example #6: Color Changing Links Flips
DHTML Example #7: Color Changing Button Flips
[All The Parts]