Update the game object and detect collision of page elements exercise:
- Create a paddle element that can move from side to side.
- Add values in the game object, to be able to stop the game play, and keep track of a score. Create different speeds for the paddle and the falling box elements. Track the main page width so that elements can be randomly placed within the game screen width.
- Randomly set the x axis values for the box elements so they are spread out randomly across the top of the screen.
- Once the paddle goes off the container then set it to move the opposite direction.
- Add the paddle movement within the animation frame.
- Within the animation frame check the position of the active elements, checking for both x and y axis overlaps of corners of the elements.
- If the position of the box plus its height is greater than the paddle y position, and the box y position is less than the paddle plus its height then there is an overlap on the y axis.
- If there is overlap of the values of the 2 objects, and box x position is less than paddle x plus the width, and also the box plus its width is greater than the paddle x position then there is a hit on the x axis.
- If a hit occurs then remove the element.
- If the element ends up having a y position off screen, then reset the random x position and update the y to the top of the screen again.
- The gameplay will continue removing only the elements that hit the paddle and resetting the misses back to the top.
- Add tracking of the hits and misses, add the element x,y and the paddle x,y to the message area for debugging if needed.
- Make adjustments to the position of the page elements to enhance the game screen area.