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 Game Part 1 set up
Objective of the game is to click the elements, as they drop, try to land them on the moving platform to score. First lesson is to set up the basic game board and simple interaction with elements and movement.
Use the requestAnimationFrame to create smooth movement between elements on the page.
Create basic interactive elements that move exercise:
- Create a function that can set up new page elements. Using parameters of the parent element the new element should be added too. The element tag type string name. The inner html content of the element and a class that gets added to the new elements that are created.
- Add an event listener that waits for the DOMContentLoaded to invoke an init function that creates the game board content.
- Add click events to the new elements
- Create random background colors for the new element boxes that are created. Math.random().toString(16).slice(2,8)
- When the element box is clicked add the active class to the element.
- Create a new function that will handle the animation of elements. This function should be invoked once the start game is pressed, and within itself run the requestAnimationFrame() to the function.
- Within the mover() function get all the active elements, get the offset top value of the element, and increment it by the game speed value. Apply the new top style position value to the element to make it move.
- Add a condition to stop the element from moving by removing the active class from the element once it reaches the bottom of the game container.