|
Moving Towards Mouse Click
|
ASSIGNMENT: Mouse coordinates with JavaScript and Canvas are a bit of a hassle. The method which seems to work the best on all browsers is to use clientX and clientY and then subtract away the offset between the edges of the page from the edges of the canvas area. This involves the use of getBoundingClientRect. See if you can follow the section of code where the x and y coordinates of the mouse click are calculated. Open the Console in Developer Tools provided by your browser to see information about the coordinates for mouse clicks. Your assignment is to change the behavior of this applet so that the circle only moves closer to the mouse click by five pixels either horizontally or vertically, but not both. If the x distance between the mouse click and the circle is greater than the y distance, then move the x-coordinate five pixels closer to the mouse click location. If the reverse is true, then move the y-coordinate five pixels closer. |