Learn JavaScript DOM element update create a Game  Element Catcher Part 2 movement and collision detection

by

Learn JavaScript FULL Course 11 hours+

https://www.udemy.com/course/javascript-dom-js/

JavaScript DOM Projects InterActive Dynamic WebPages Games

JavaScript DOM makes your web pages interactive and dynamic update page elements add event listeners create Games JS DOM

Learn JavaScript DOM element update create a Game 

Learn JavaScript DOM element update create a Game  Element Catcher Part 2 movement and collision detection

Update the game object and detect collision of page elements exercise:

  1. Create a paddle element that can move from side to side.
  2. 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.
  3. Randomly set the x axis values for the box elements so they are spread out randomly across the top of the screen.
  4. Once the paddle goes off the container then set it to move the opposite direction.
  5. Add the paddle movement within the animation frame.  
  6. Within the animation frame check the position of the active elements, checking for both x and y axis overlaps of corners of the elements.
  7. 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.
  8. 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. 
  9. If a hit occurs then remove the element.
  10. 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.  
  11. The gameplay will continue removing only the elements that hit the paddle and resetting the misses back to the top.
  12. 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.
  13. Make adjustments to the position of the page elements to enhance the game screen area.

Leave a Comment