Day: December 2, 2002

Categories
Burningbird

Burningbird flies south for the winter

I started out taking a break because I needed it, and I came back because of work on the RDF book. I opened my mouth — again — which has not had universally postive results. News that started out good turned out to be not so good; and friendships have been permanently lost. Friends mean a lot to me.

This is a time of holidays and family and friends for all of you. You do not need the Burning Bird of Gloom perching over your heads waiting for a bright glimmer of joy so that I can swoop down and tear it to shreds. Gloom just does not become me — all that black.

I am resuming the break I took earlier and stopped prematurely, in order to focus on things that you all don’t really need or want to know about.

Happy Chanukah! Merry Christmas! Bright Kwanza!

See you next year.

Categories
Technology

Save Dr. Dotty from the Quicksand

Copy from the Wayback Machine Archive.

Dr. Dotty is exploring in the jungle and accidently walks into quicksand. The object of the game is, of course, to save Dr. Dotty.

The Save Dr. Dotty from the Quicksand games are a variation of the old paper game “Hangmans’s Bluff”. The object of the game is to fill in all the missing letters from one or more words within a phrase and save Dr. Dotty from DOOM.

Playing the Game

-The playing board for each of the Quicksand games is 800 x 600 pixels.
-Each game has an opening animation, and an ending animation if you correctly find all the missing letters.
-Pressing the “ENTER” key after the opening animation stops will start the game.
-Type a letter into your keyboard and every place that the letter exists gets filled in.
-If you type in an incorrect letter, poor Dr. Dotty sinks a little further into the quicksand.
-Close the playing window at any time by clicking the space bar.

The Dr. Dotty games work with Navigator 4.x, Netscape 6.x, IE 4.x, IE 5.x, and IE 6.x, and Mozilla.

 

  • Game 1 If you know about hurricanes, you know the answer to the question in this game. However, you can find the answer in the How the Game Works section, below.
  • Game 2 If you know about minerals and mineral identifications, you know the answer to this game. However, you can find the answer in the How the Game Works section, below.

 

How the Game Works

The Dr. Dotty games use DHTML for all interactive effects. This includes the use of CSS to position elements as well as alter their presentation; and JavaScript to perform all actions, interactive or otherwise.

The elements of the game page are positioned using CSS2 absolute positioning. Doing this I can control the layout of the page at any time. Using absolute positioning also exposes all of the elements to script access once the page is loaded for a browser such as Navigator 4.x. All elements are exposed as part of a Document Object Model (DOM), and hence exposed to interactive scripting access for the IE 4.x and IE 5.x, Mozilla, and the upcoming Navigator 5.x browsers, but to ensure cross-browser and cross- version compatibility, I code to Navigator 4.x, which requires that the elements be positioned absolutely:

   <DIV id="dotty1" style="position:absolute; left: 20px; top: 20px">
   ...
   </DIV>

To ensure that the games work with both IE, Mozilla, and Netscape I used the Burning Bird X-Objects to hide most DHTML implementation techniques. Because of this, when I want to move an object to an absolute position of 100 pixels from the left, I can use the method exposed on the cross-browser objects:

   theobjs["dotty1"].objSetLeft(100);

I’ve also created a set of higher-level animation objects that use the cross-browser scripting objects and JavaScript timers to manage all animation effects. These Animation objects, are basically arrays of animations, with each step in the animation synchronized with matching steps in the other associated animations.

So, to show an element that both moves and clips, I create a new animation sequence (co-ordinated animations that are all performed sequentially in the order they are added to the sequence), and then attach one animation object to the sequence. The animation object is defined with a set number of animation steps, each played out after a specified number of microseconds. After the animation object is created, I then crate new Animator objects, one for the clipping animation and one for the move animation: 

   var seq = new animatorSequence();
	
   anim = seq.newAnimator(10,100);
   anim.addAnimator(theobjs["dotty4"],"M",180,160);
   anim.addAnimator(theobjs["dotty4"],"C",0,0,330,200);

When the animation sequence is played, each successive steps of the animations contained in the sequence is synchronized and played:

    seq.play();

So, when Dr. Dotty moves across the screen in the opening sequence, one Animation Sequence is created for the entire opening animation; several Animations are created to handle such things as moving Dr. Dotty, showing the different word bubbles and words that he says, and even changing Dr. Dotty’s expression. Different types of Animators objects are created for each animation effect, and the Animators are added to Animation objects to provide for the synchronization for multiple-animator effects.

Want to see the code creating the animation sequence, animations, and animators for the opening animation? Well, it’s a bit long, but here you go:

function setup_start(){
   seq = new animatorSequence();

   // add animation objects to sequence
   // this animation plays for 200 microsecond, with each
   // step in the animation sequence timed at 20 microseconds --
   // 10 animation steps in all
   var anim = seq.newAnimator(20,200);

   // add animators
   anim.addAnimator(theobjs["dotty1"],"M",180,160);
   anim.addAnimator(theobjs["bubble1"],"M",180,400);
   anim.addAnimator(theobjs["bubble1"],"Z",4);
   anim.addAnimator(theobjs["words1"],"M",230,460);
   anim.addAnimator(theobjs["words1"],"Z",5);

   // second animation, this time one step at 100 microseconds 
   anim = seq.newAnimator(1, 100);
   anim.addAnimator(theobjs["words1"],"H");

   // third animation, 1 step, 1500 ms
   anim = seq.newAnimator(1, 1500);
   anim.addAnimator(theobjs["dotty2"],"S");
   anim.addAnimator(theobjs["words2"],"S");
   anim.addAnimator(theobjs["words2"],"Z",5);

   // fourth animation, 1 step 200 ms
   anim = seq.newAnimator(1, 300);
   anim.addAnimator(theobjs["dotty3"],"S");
   anim.addAnimator(theobjs["dotty2"],"H");
   anim.addAnimator(theobjs["words2"],"H");
   anim.addAnimator(theobjs["words3"],"S");

   // fifth animation, 1 step 2000 ms
   anim = seq.newAnimator(1, 2000);
   anim.addAnimator(theobjs["dotty1"],"H");
   anim.addAnimator(theobjs["words3"],"S");
   anim.addAnimator(theobjs["words3"],"Z",5);

   // sixth animation, 1 step, 100 ms
   anim = seq.newAnimator(1, 100);
   anim.addAnimator(theobjs["words3"],"H");
   anim.addAnimator(theobjs["dotty3"],"H");
   anim.addAnimator(theobjs["dotty4"],"S");
   anim.addAnimator(theobjs["words4"],"Z",5);

   // seventh animation, 1 step, 1000 ms
   anim = seq.newAnimator(1, 1000);
   anim.addAnimator(theobjs["words4"],"S");

   // eighth animation, 1 step, 1000 ms
   anim = seq.newAnimator(1, 1000);
   anim.addAnimator(theobjs["words4"],"H");
   anim.addAnimator(theobjs["words4"],"Z",5);

   // ninth animation, 1 step, 3000 ms
   anim = seq.newAnimator(1, 3000);
   anim.addAnimator(theobjs["words4"],"H");
   anim.addAnimator(theobjs["words5"],"S");
   anim.addAnimator(theobjs["words5"],"Z",5);

   // tenth animation, 1 step, 1000 ms
   anim = seq.newAnimator(1, 1000);
   anim.addAnimator(theobjs["words5"],"H");

   // eleventh animation, 1 step, 3000 ms
   anim = seq.newAnimator(1, 3000);
   anim.addAnimator(theobjs["bubble1"],"H");
   anim.addAnimator(theobjs["dotty5"],"S");
   anim.addAnimator(theobjs["bubble2"],"S");
   anim.addAnimator(theobjs["bubble2"],"Z",4);
   anim.addAnimator(theobjs["words6"],"S");
   anim.addAnimator(theobjs["words6"],"Z",5);

   // twelth animation, 1 step, 1000 ms
   anim = seq.newAnimator(1, 1000);
   anim.addAnimator(theobjs["words6"],"H");

   // thirteenth animation, 10 steps, 100ms (10 ms each) 
   anim = seq.newAnimator(10, 100);
   anim.addAnimator(theobjs["words7"],"S");
   anim.addAnimator(theobjs["title"], "M",200,500);

    // fourteenth animation, 10 steps, 100 ms
    anim = seq.newAnimator(10, 100);
    anim.addAnimator(theobjs["dotty5"],"H");
    anim.addAnimator(theobjs["words7"],"H");
    anim.addAnimator(theobjs["words8"],"S");
    anim.addAnimator(theobjs["words8"],"Z",5);
    anim.addAnimator(theobjs["title"], "M",300,500);
	

     // play all 14 animations, in order 
     // as they are defined in sequence array
     seq.play();
}

At the very end of the function that creates the opening animation sequence, the sequence is played.

One last aspect of the Dr. Dotty games is the interactive portion. This is handled by capturing the keypress event for the Web page, and passing the event to a function:

// handle keyboard events
if (navigator.appName != "Microsoft Internet Explorer") 
   document.captureEvents(Event.KEYDOWN);

document.onkeydown=keypress;

In the function, the keycode for the keypress event is accessed and compared to the letters for the answer: if a match is found, the letter is “filled in” in the answer (using DHTML to replace the existing underscore character with the letter); if a match is not found, Dr. Dotty is lowered into the quicksand further (using clipping to lower the good doctor, and DHTML “hide and show” to change Dr. Dotty’s message and expression).

Download the game source code from the link to the right and make your own version of the game. Have fun!

 

Categories
Just Shelley

George and the Mixture

Robert approached the area with caution, continuously checking to make sure he wasn’t followed. At one point he stopped, sure that he heard the soft sound of footsteps echoing faintly behind him. Listening, hardly daring to breath, he strained his hearing until his head ached with the effort. “Must be my imagination”, he thought to himself.

Entering the room, his eyes were drawn to the containers on the table. Two contained the Substances necessary for the work he was about to perform — inert and non-reactive, looking as harmless as he knew them to be in their separate, isolated state. Combined, however, and they transformed, becoming a Mixture unique in the world, most likely the Universe.

The Crew had chosen straws this year to see who would have the task of making the Mixture, and Robert had chosen the short straw. Looking at the rest of the Crew with suspicion — he always seemed to get the short straw for tasks such as these — he had demanded assistance from the other: they had to keep George away from the mixing area until he, Robert, was finished. George must not be allowed near the Mixture.

In an odd way, George was not unlike the Substances used to make the Mixture. He was friendly and pleasant to be around, totally innocuous. However, let him once be exposed to the Mixture and something seemed to take him over, transforming him as much as the Substances were transformed. He would get an obsessive, mad glint in his eyes and determinedly move towards the Mixture, almost as if the stuff had a mind of its own and called to him in a voice no one but he heard. No matter how hard the Crew tried, nothing they did seemed to be able to stop him in his quest.

Though George’s headlong, mindless flight towards the Mixture was bad enough, the consequences of him actually reaching it was more than anyone wanted to contemplate, or consider. George and the Mixture meeting must be stopped, by any means and at any costs.

Robert shook off his considerations of George and began the process of carefully preparing the Substances. He heated Substance A, slowly, until it lost its solid shape. He also measured and poured Substance B into the Mixture container. Once Substance A reached the appropriate state of liquidity, Robert carefully poured it over Substance B, doing everything possible to make sure none of the Substance or the Mixture got onto him or his clothes. “Now”, he thought to himself. “If I can only get these mixed without George hearing me, we’re out of the woods for this year.”

Robert began to slowly stir the two Substances together, watching as the transformation began to occur. The stirring became more difficult as the effort progressed, but he would rest a moment and then keep on stirring. Stir and rest. Stir and rest.

He tried to keep all noise of his efforts to a minimum, but this was virtually impossible as the Mixture seemed to fight his efforts with each stir, and he began to hit the sides of the container with increasing frequency, wincing at each clang that resulted.

Finally, just as the Mixture looked to be at its final stages of transformation, and an exhausted Robert was beginning to hope that this year, there would be no problems, some sixth sense warned him that he was no longer alone in the room. Turning with a mixed sense of dread and resigned hopelessness, he saw him standing there, in the doorway. George.

George looked curiously at Robert and seemed about ready to speak — until he saw what Robert had in his hands. Then the strange obsessive gleam that Robert feared above all things appeared in George’s eyes. He began to move towards Robert, slowly at first, but more quickly as he got closer.

In sheer terror, Robert screamed out at the top of his lungs for help from the Crew and far off in the distance he could hear multiple footsteps, running towards him as fast as they could. However, he knew they would be too late.

Maintaining his fright-stiffened grasp on the Mixture container, Robert turned away from George, trying to keep his body between the stalker and the stalked. However, George was nimble and quick, and no matter how Robert turned and no matter where he ran in the room, George was there. George was always there. At times it seemed to Robert as if a hundred, then a thousand Georges surrounded him; no matter where he turned, George was always in front of him, always getting closer.

In desperation, Robert dropped a little of the Mixture on the floor, hoping to slow George down and keep him away from the bulk, but no such luck — George wasn’t going to be fooled by a pathetic attempt such as that. He glanced at it with a look of scorn and continued his remorseless progress closer towards Robert. Towards the Mixture.

As happens in times such as this, when Robert next ran over the floor in that area, he actually slipped on the spill and down he fell, him and the container of Mixture clasped so carefully in his arms.

George sensed his chance and sprang for the Container. Robert tried to keep him away, and was astonished when George actually bit him. As he yelled out from the pain, the other Crew members ran into the room, taking in the events at a glance. They also tried to grab at George, and were subjected to bites from George and elbows in the face from each other.

Finally, the inevitable, as inevitable events always go, happened: George and the Mixture met.

The Mixture oozed out of the container under its own volition, and coated George until nothing could be seen of him but his eyes — crazed, demented eyes, no longer recognizable as the eyes of their old friend.

Once coated, George then fled around the room in an insane fury of movement, transferring Mixture to walls, furniture, and floor, anything that George touched.

Robert and the Crew, previously doing everything to capture George, were now fleeing from him just as strenuously… and just as futilely. George would catch them.

George always caught them.

Eventually the Mixture — now tripled in volume, a normal occurrence when it connected with George — soon spread over them just as completely and devastatingly as it did George. In their hair, in their eyes, even up their noses and in their ears; the stuff was literally everywhere.

One of the Crew, in a desperate bid for safety, ran into a closet and George followed. The rest of the Crew shut the door and jammed a chair underneath to keep George and the hapless Crew member inside. Ignoring the screams he could hear on the other side of the door, Robert took a moment to survey the devastation surrounding him. Only one thing to do. Call Doc Bronson.

Robert dialed the doctor’s number and was relieved when the phone was answered on the second ring. “Doc, this is Robert.” he said. “George got into the Mixture again this year. We’re going to need a sedative to calm him until we can get things fixed up.”

“Dammit, Robert! You promised me you’d be more careful this year!”

“Next year you’re going to have to buy your Rice Krispie treats, or get rid of the cat!”