CSE 154

Section 3: JavaScript Animations and the DOM

Exercise 1: Bouncing Ball

Create a page which contains an animated bouncing all. You are given ball.html and ball.css and you will write ball.js (running solution).

  • The bounce area is 600px by 400px, and the ball takes up 40px by 40px of space.
  • Every frame of animation (every 20ms), apply a "gravity" ot the ball and increase its downard speed by 1.
  • If the ball hits the ground, make it "bounce" up to 3/4 the velocity it previously had.
  • Center the ball within the ballarea and use that element's width/height as boundaries.
  • Optional: Make the code generic enough to work with any size ball and any size bounce area (ie., don't hard code these numbers

Exercise 1: Solution

Solution (JavaScript)

Exercise 2: Squirtles All the Way Down

In this exercise, we will implement a version of "turtles all the way down" (yes, this is a thing).

The provided squirtles.html contains the earth, elephant, and a single Squirtle.

Write JavaScript code squirtles.js to give the page infinitely-scrolling Squirtles (running solution).

You will need to add a new Squirtle to the bottom of the page every time the user scrolls to the bottom. To add a Squirtle, append to document.body a new div with the class of squirtle (See slide below for more implementation details).

Exercise 2: Implementation Details/Hints

Use these events and properties to help you implement your solution:

Exercise 2: Solution

Solution (JavaScript)

Exercise 3: Gnar - Sweet and Fluffy?

A furball is on the loose! Rawr! At first glance, he might look cute, fluffy, and all-around harmless, but the townspeople have a reason to be terrified. Write JavaScript code to bring Gnar to life, and ultimately let him achieve his true ultimate form. The HTML and CSS are already written. Start from this skeleton of gnar.html (sample solution).

Exercise 3: Part I - Prepopulating Peeps

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.



            <div id="people">
              <!-- add your code here -->
              <div class="person"></div>
              <div class="person"></div>
              <div class="person"></div>
              <div class="person"></div>
              <div class="person"></div>
            </div>

HTML

Exercise 3: Part II - Adding Peeps

Implement the Add button functionality so that it adds 5 more boys to the page. A person is a div with the classes of person and a class of either boy or girl.


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

HTML

Exercise 3: Part III - Killing Peeps

Implement the Kill button functionality so that clicking it will randomly "kill" 1/5 of the boys on the page. Kill them by giving them a class of splat.


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

HTML

Exercise 3: Part IV - Boys and Girls

Add functionality to the boy and girl radio buttons with a function that returns which of the two genders is currently selected. Modify the code from your previous two exercises so that you can choose which of the two genders to add and kill. 

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

HTML

Exercise 3: Part V - Clean Up

Add functionality to the "clean up" button so that it removes any dead "splatted" people from the page (any divs with the class splat). 



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

HTML

Exercise 3: Part VI - Stomp

Add functionality to the "stomp" button so that when clicked, Gnar moves up or down by 75px and also kills 1/5 of both genders on the page. Gnar is an img tag with an id of gnar.



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

HTML

Exercise 3: Part VII - Beast Mode

Now this is when Gnar shows his true form... Add functionality tothe "Beast Mode" button so that Gnar's img tag and the page's top h1 tag have the class of enrage applied. In addition, Gnar should be made to be 50px wider than his current width. Clicking the button again removes the class both the img and h1 tags and returns the width to the previous value. The h1 has an existing CSS that should not be removed.



<button id="enrage">Beast Mode!</button>

HTML

Exercise 3: Part IX - Patrol

Finally, add animation functionality to the page! Add a function so that when the "patrol" button is clicked, Gnar moves right by 4px every 20ms until his left position style is at least 300px. Gnar should then immediately change directions and start patrolling to his left unitl his left position is 10px or less, at which he stops patrolling.



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

HTML

Exercise 3: Solution

Solution (JavaScript)