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:
Dr.Burns,
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.
Sincerely,
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.
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)
- 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)
- 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)
- cannon.gif: This is the cannon shot. (2.24KB)
- The Sound
- thrush.mid: This is the background music. (17KB)
- thrush.mid: This is the background music. (17KB)
- The Whole Thing
- invaders.zip: This is everything. (116KB)
- invaders.zip: This is everything. (116KB)
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.
Enjoy!
[The Name Of The Game Is “Invaders”]
[What’s Happening?]
[All The Parts]
[Have Fun]