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

Learn JavaScript FULL Course 11 hours+
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 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.
Learn JavaScript DOM element update create a Game
Course content web development and web design courses with coding examples and source code for the lesson content. Source Code is available within my Github account. Lessons posted are designed to help students learn more about a specific topic related to modern web development and applying code.
Laurence Svekis is a professional top selling course author having instructed over 1 Million students both online and in person. Laurence Svekis is a Google Developer Expert specializing in Google Workspace automation using Google Apps Script Code.

Tags and Keywords

#AppsScript #googlesheets #workspace #accounting #finance #automation modern web design online course #onlinecourses #modernwebdesign #tips #appsscript #coding #codingtutorial #script #scriptinghelp #google #Viral #subscribe #helping #GoogleAppsScript #Gmail #Attachments #Spreadsheet #Automation #GmailAttachments #GoogleAppsScript #EmailProductivity #Automation #SpreadsheetLogs #AttachmentDetails #TechTips #ProductivityHacks #GoogleDrive #GmailSearch #GoogleAppsScript #Spreadsheet #Email #Automation #Iteration #subscribe
#GoogleSheets #GoogleAppsScript #CustomUIMenu #SpreadsheetTips #ProductivityTips #TechTutorial #CodingTutorial #BeginnerFriendly #StepByStepGuideSubscribe -