JAVASCRIPT URGENT TASK

Task 3: Romeo and Juliet (3-romeo, 8 pts)

After taking the life of Tybalt, Romeo must flee, but he visits his young wife one last time under the cover of night to say farewell. Everyone in the house is already sleeping, only Juliet is dreaming of her lover by the candlelight. To get her attention, Romeo knocks on her window with a stone so that they can be together one last time. Let's help Romeo hit the illuminated window! To do this, we will create an application using canvas where we first determine the strength and direction of the shot, then throw the stone.

a. (1 pt) Draw the stone (ball), bush (bush), and windows (windows) as rectangles.

b. (1 pt) Use the appropriate images (ball, bush) instead of rectangles.

c. (1 pt) Choose a window (random integer between 0 and 2) and draw it in yellow colour!

d. (1 pt) As you move the mouse over the canvas, read the mouse's position (offsetX, offsetY) and draw a 3px wide red line from the arrow object's fx, fy point to the mouse position (you can store this in the arrow object's tx, ty properties).

e. (1 pt) Start moving the stone when a click occurs. The direction of the red segment will be the direction of the shot and the length of the segment will be the strength of the shot. Give the stone horizontal and vertical velocity and acceleration. The velocities should be given by the x and y extent of the red segment (i.e. the difference between the mouse's x and y coordinates and the arrow object's fx, fy point). This value should be multiplied by a factor of e.g. 3, to give the stone sufficient speed. The vertical acceleration should be fixed, e.g. 300 px/s².

f. (1 pt) If the stone touches the bush, stop the movement of the stone (e.g. by setting its speed and acceleration to zero) and write "Oooops!" to the canvas.

g. (1 pt) If the stone touches a window, also stop the movement. If the touched window is yellow, then write "Come, my lover!" to the canvas, otherwise write "Oooops!".

h. (1 pt) If the stone touches reaches the ground first, stop its movement and write "Oooops!" to the canvas.

It can be useful to use a variable to track the game's state. The game can be restarted by reloading the page.