Lesson 1

We have provided you with a basic HTML template that has taken care of all the boring stuff allowing you to concentrate on the more challenging and interesting stuff! Copy and paste this into your editor and make sure you fully understand why everything is there before you start adding to the code.

Our first task is to set the starting currX and currY values and then, using these calculate the goalX and goalY for each side. These will be our target coordinates. The method that we recommend is simple trigonometry. To do this we first need to draw a right-angled triangle with the hypotenuse being the distance between the start and end point (we called it distDiff). To make it easier make the start point be in the middle bottom of your background, below your goal.
This is an example for shooting right

Let the ball move at an angle of 60 degrees so Θ=60 and the distDiff will be 500px (the unit we use for positioning in HTML). To find goalX and goalY simply use SOHCAHTOA.
So...

NB
We use The Y positioning is minus the λY. This is because on an HTML file, the X,Y origin is in the top left hand corner of the page. Very annoying!

This is now our goal coordinates for the shootingRight function. Can you calculate the coordinates for the shootingLeft function?
Now you can initialise the variables currX, currY, goalX and goalY in both of the shoot functions. Make sure to use the different goal coordinates you found for both sides within the two functions. The while loop is what makes the object move. It causes the current position of the object to be changed after each iteration. You need to add a condition to the while loop. Seeing as we want the object to move until it has reached our goal coordinates, can you predict the condition?

HINT
the loop will run as long as the condition is true. How would you make it stop when currX=goalX and currY=goalY considering this?

Finally you need to re-assign the current coordinates so that the ball moves towards the goal. Don't forget about the weird coordinate system (moving up means subtracting from currY).