Basketball

SVG and JavaScript. Class of 2016–2017.

       

             

Objective: Draw a basketball in SVG. Move it around a canvas using JavaScript. Respond to mouse clicks and drags on the canvas. Change the color of the basketball.

Problem: How can we provide a user interface for choosing color, speed, etc.? What happens to the spin when the ball bounces off a wall?

Solution: Provide color wells for changing the color. Speed buttons increase or decrease the speed by a factor of 1.4 (two increases will double the speed). Check the current direction of motion to provide a sensible rotation.