CSc 337 LECTURE 13: DOM EXERCISES Exercise : Bouncing Ball Create a - - PowerPoint PPT Presentation

▶
csc 337
SMART_READER_LITE
LIVE PREVIEW

CSc 337 LECTURE 13: DOM EXERCISES Exercise : Bouncing Ball Create a - - PowerPoint PPT Presentation

Feb 25, 2024 586 likes •681 views

CSc 337 LECTURE 13: DOM EXERCISES Exercise : Bouncing Ball Create a page which contains an animated bouncing ball. You are given ball.html and ball.css , and you will write ball.js . (sample solution) The bounce area is 600px by 400px, and the

slide-1
SLIDE 1

CSc 337

LECTURE 13: DOM EXERCISES

slide-2
SLIDE 2

Exercise : Bouncing Ball

Create a page which contains an animated bouncing ball. You are given ball.html and

ball.css, and you will write ball.js. (sample solution)

  • The bounce area is 600px by 400px, and the ball is a 40px square.
  • Every frame of animation (every 20ms), apply a "gravity" to the ball and increase its downward

speed by 1.

  • If the ball hits the ground, make it "bounce" up at 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 those numbers)

slide-3
SLIDE 3

Exercise: Randy the Raptor

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 written; start from this skeleton of attack.html. (sample solution)

slide-4
SLIDE 4

Exercise: Randy part A

Make it so that when the page first appears, 5 dogs are visible in the town. There are already 5 persons in the HTML, but they have no type. These are stored in the div with id of people as

divs with the class of person. Assign them the additional class dog when the page loads (while

retaining the class person).

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

  • HINT 1 (select): You can access all of the 'person' divs using the document.querySelectorAll function.
  • HINT 2 (select): Code to run when the page first appears should be put into a window.onload handler.
  • HINT 3 (select): Add/remove CSS classes from an element with the classList property.
slide-5
SLIDE 5

Exercise: Randy add

Add! Adds 5 more dogs to the page (Later we will make it so that you can add cats too!). A person is a div with the classes of person and a class of either dog or cat. <button id="add">Add!</button>

  • HINT 1 (select): Create a new element using the document.createElement function.
  • HINT 2 (select): Add a new element to the page using an existing DOM object's appendChild

function.

slide-6
SLIDE 6

Exercise - Randy kill

Kill! Randomly "kills" 1/5 of the dogs on the page. Kill them by giving them a class of splat (in addition to their existing person class, but in place of their type class such as dog or cat). <button id="kill">Kill!</button>

slide-7
SLIDE 7

Exercise: Randy - dogs and cats

Dogs / Cats: Add a function that returns which type is currently selected. Modify the code from your previous two exercises so that you can choose which type to add or kill.

<label><input id="dogs" type="radio" name="type" /> Dogs</label> <label><input id="cats" type="radio" name="type" checked="checked" /> Cats</label>

slide-8
SLIDE 8

Exercise: Randy stomp

Stomp! Makes the raptor move up or down by 75px and also kills 1/5 of both types. The raptor is an img tag with an id of raptor. <button id="stomp">Stomp!</button> HINT 1 (select): Move the raptor by setting his top style attribute to be either 10px or 85px. HINT 2 (select): Get an object's existing style properties with

window.getComputedStyle(element).propertyName .

HINT 3 (select): Stomp should kill 1/5 of both types - make sure to use the functions you have already written!