Interactive JavaScript Exercises: Bouncing Ball, Randy the Raptor, and More
Engage in interactive JavaScript exercises including animating a bouncing ball, controlling Randy the Raptor, transforming people into dogs, adding more animals, and randomly 'killing' animals. Enhance your coding skills with these fun challenges.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
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 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)
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)
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.
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.
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>
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>
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!
