University of Washington, CSE 190 M
Section 6: Raptor Attack
JavaScript DOM

section idea/code by Stefanie Hatcher

This section is about using JavaScript's Document Object Model (DOM). The following links may be helpful:

• Firebug
• W3C Validators: XHTML, CSS
• JSLint

(Click the image below to run the sample solution for today's section.) (solution JS code attack.js)

A raptor is on the loose. Rawr! He wants to stomp the townspeople. Write JavaScript code to allow the raptor to eat them. The HTML and CSS are already completely written; start from this skeleton of attack.html.

Here are the behaviors to add:

• Make it so that when the page first appears, 5 boys are visible in the town. There are already 5 persons in the HTML, but they have no gender. These are stored in the div with id of people as divs with the class of person. Assign them the additional class boy when the page loads (while retaining the class person).

  <div id="people">
      <div class="person"></div>  <!-- give these 5 divs the class 'boy' -->
      <div class="person"></div>
      <div class="person"></div>
      <div class="person"></div>
      <div class="person"></div>
  </div>
  

  • HINT 1 (hover)
  • HINT 2 (hover)
  • HINT 3: Add/remove CSS classes from an element with Prototype's addClassName function.
• Add! Adds 5 more people of the currently selected gender to the page. A person is a div with the classes of person and either boy or girl.

  <button id="add">Add!</button>
  

  • HINT 1
  • HINT 2
• Kill! Randomly "kills" 1/5 of the people of the currently selected gender. Kill them by giving them a class of splat (in addition to their existing person class, but in place of their gender class such as boy or girl).

  <button id="kill">Kill!</button>
  

• Boys / Girls: Selects which gender to add or kill.

  <label><input id="boys" type="radio" name="gender" /> Boys</label>
  <label><input id="girls" type="radio" name="gender" checked="checked" /> Girls</label>
  

• Clean Up! Removes any dead splatted people from the page (any divs with class splat).

  <button id="cleanup">Clean up!</button>
  

  • HINT: You can remove an element from the page by calling its DOM object's remove method.
• Stomp! Makes the raptor move up or down by 75px and also kills 1/5 of both genders. The raptor is an img tag with an id of raptor.

  <button id="stomp">Stomp!</button>
  

  • HINT 1: Move the raptor by setting his top style attribute to be either 10px or 85px.
  • HINT 2: You can find out an object's existing style properties by calling Prototype's getStyle method.
• Enrage! Applies the CSS class of enrage to the raptor and the page's top h1 heading. In addition, the raptor should be made to be 50px wider than his current width. Clicking the button again removes the class from both elements and returns the width to its previous value. The h1 has an existing CSS class that should not be removed. You are guaranteed that there is exactly one h1 element on the page.

  <button id="enrage">Enrage!</button>
  

• Patrol! (advanced) Makes the raptor animate. He should move right by 4px every 20ms until his left position style is at least 300px, he should change directions and start patrolling to the left until his left position is 10px or less, at which point he stops patrolling.

  <button id="patrol">Patrol!</button>
  

  • HINT: Set a timer with the setInterval method.