In this lab, you will use a timer to animate the movement of a heart image to the location where the mouse clicks, as shown below. The given web page shows a heart image. When the user clicks anywhere in the page, the startAnimation() function is called. startAnimation() determines where the user clicked and calls moveImage() with the clicked (x, y) coordinate. moveImage() moves the heart 1 pixel in the direction of the given (x, y) coordinates.
Make the following JavaScript modifications using clearInterval() and setInterval() where appropriate:
In startAnimation(), add an if statement that stops the timer with the ID timerId if timerId is not null.
In startAnimation(), start a timer that calls moveImage(clickX, clickY) every 10 milliseconds. Save the timer ID in the timerId variable.
Add an if statement in moveImage() that stops the timer with the ID timerId if (imgX, imgY) is equal to (centerX, centerY). Also set timerId to null.
After the modifications are complete, the user should be able to click anywhere in the browser, and the heart will move to the clicked location.