Web Data Management JavaScript Animation Worksheet

Having Trouble Meeting Your Deadline?

Get your assignment on Web Data Management JavaScript Animation Worksheet  completed on time. avoid delay and – ORDER NOW

Do my paper

Platform

You will do this project on your own PC/laptop. You may use Google Chrome web browser or a Chromium based browser, such as Brave, to run and debug your JavaScript code. To run your program on your browser, go to file:/// and navigate through your files until you find your project1/soccer.html. On the Chrome browser, you can activate the Debugger from More Tools then Developer tools. Note: You should not use any JavaScript library, such as JQuery or d3.js. You should not use the JavaScript canvas object nor svg graphics.

Documentation

The following web pages contain various tutorials. Use them as a reference only. The class slides contain enough information on JavaScript and DOM.

• JavaScript TutorialLinks to an external site.
• JavaScriptLinks to an external site.
• JavaScript DOMLinks to an external site.

Project Description

You are asked to write a JavaScript program that moves a number of soccer balls around a court window. The balls bounce on the court borders and on each other. Please watch the following demo video of how your animation should look like:

Download project1.zip Download project1.zipand unzip it. You should put your code in the JavaScript file soccer.js inside project1, which is used by the file soccer.html, that implements the following actions:

• initialize: initialize the animation
• setBallNum: set the number of soccer balls between 1 and 9
• setSpeed: set the ball speed to 0 (slowest), 1, or 2 (fastest)
• resumeOrSuspend: it starts, suspends, and resumes the animation (when you click the mouse inside the court)

The court is 1000x600px and the balls have height 40px, but you should make your program work for any size of court, and any size of soccer ball. The initial position of each ball is a random place inside the court. When you click on the court, balls will start moving in random directions and random speeds. The balls bounce on the court sides and on each other. When you click on the court again, the animation is suspended, when you click again, the animation resumes, etc. So each time you click, it suspends or resumes. You select the speed from the radio box and the number of soccer balls from the menu.

Hints:

• The position of any element is dictated by the three style properties: position, left, and top. If an element is nested inside another and its position is “relative”, the top and left properties are relative to the enclosing element.<p id=”x” style=”position: relative; left: 50px; top: 100px;”> … </p>
  To move this element, just change the left/top attributes using code:document.getElementById(“x”).style.top = “10px”;
  Note that the values that you set the left/top attributes must have units (e.g., “10px”). It will not work if you set them to numbers.
• You can get the top coordinate of a regular element x (such as, the court) using x.getBoundingClientRect().top (also: left, width, and height).
• To animate an element, it must be moved by small amounts, many times, in rapid succession. For example, you can use setTimeout(“fun()”, n) that calls fun() after a delay of n milliseconds (you have to put it in a loop or use recursion).
• You need to define a time period (the “tick”) dt to calculate the new x/y coordinates from the current. This dt may change using setSpeed.
• The speed coordinates vx/vy are determined when a ball is kick-started. The new position x of a ball is x+vx*dt, but if the new value is beyond the right border, then the ball must be bounced by setting vx = -vx and x = 2*width-x, assuming that the court x-coordinates are from 0 to width. You do something similar for the left, top, and, bottom borders.
• When two balls touch (their frames intersect), then they bounce by exchanging their vx and their vy.
• To clear the court, you may use the replaceChildren method. To add a soccer ball, you may clone one using the cloneNode and add it to the court using appendChild.