ANSWER #2. #1 is for REFERENCE ONLY 1. [20pts] JS Events and animation Consider
ID: 3843630 • Letter: A
Question
ANSWER #2. #1 is for REFERENCE ONLY
1. [20pts] JS Events and animation
Consider the following XHTML:
We want to create the following effect: Initially the "container" div should appear empty, but when the user clicks somewhere in the container the img element with the id ball appears at the location of user's click.
a) Write the function init(). In this function we will set the display property of the ball to none. Then connect a handler function called create_ball to an onclick event of the container div.
b) Write the handler function create_ball. This function should make the ball appear at the location the user clicked.
Hint: Recall the example from class that displayed our mouse position. The key was the following function that gives us the x and y coordinates of the mouse:
2. [20 pts] Animation
This is question is a continuation of question 1.
Once the ball is visible at the spot the user clicked, we want the ball to start falling as if there is gravity. We will use our animation methods to achieve this. Write a function called falling() that animates the fall of the ball. The key is to have a time variable t that we will increase in steps of 30ms. The distance fallen (in pixels) in a single 30ms time interval is:
d = t /150;
where t is the total time elapsed since the ball started dropping. If you use global variables, indicate what they are. The ball should stop falling once it reaches the bottom of the screen. You may assume that the screen is 600px high.
Hint: Recall that parseInt(s) can be used to extract a number part of a string variable s.
Explanation / Answer
1.
<html>
<head>
</head>
</html>
2.
<html>
<head>
</head>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.