csc 337
play

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

Feb 25, 2024 •586 likes •677 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

  1. CSc 337 LECTURE 13: DOM EXERCISES

  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)

  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)

  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 div s 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' div s 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.

  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.

  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>

  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>

  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!

Recommend

More recommend