Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
JavaScript DOM Games course for Beginners Get started Coding
Rating: 4.3 out of 5(12 ratings)
3,313 students

JavaScript DOM Games course for Beginners Get started Coding

Create Interactive and Dynamic Web Page content with JavaScript DOM manipulation All JavaScript Document Object Model
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • JavaScript DOM manipulation
  • JavaScript to create interactive web pages
  • Dynamic web pages with JavaScript
  • JavaScript code to interact with HTML elements
  • JavaScript to create a game
  • Keyboard key press events using arrows to move page element div
  • Use of animation frame for smooth web page movement

Course content

2 sections • 16 lectures • 2h 26m total length

  • Introduction to JavaScript to Create Interactive and Dynamic Web Content2:34

    The DOM is an object-oriented representation of the web page, which can be modified with JavaScript to Create Interactive and Dynamic Web Content

    Select elements from the page

    Update Elements on the Page

    Apply Styling to the style attribute

    Track user interactions with Click events and keyboard events

    Move and manipulate page elements with JavaScript

    Upcoming lessons will show you how - to make you web pages come to life

    Creating a basic game project - where the player can move a page element using the keyboard. Also create new page elements - and automatically have new page elements added to the page when conditions are met. Creating a dynamic and interactive game that detects element collision and adds to the score. Move your element to hit the other elements on the page, score and see how new elements are created with a max number in from the code. Basic JavaScript Game structure that can be extended upon to build your own games and more.


  • Course Source Code Guide - Lesson Challenges and Resource Links0:06
  • Web Dev Setup Coding IDE and Top Resources and how to use this Course9:53

    Web Dev Setup Coding IDE and Resources

    Introduction to setting browser, code editor and how to use the course content. JavaScript Document object example using console.dir(document) JavaScript code to see document object.

    Lesson Challenge

    1. Setup your Browser and Editor ready to write code

    2. Open the html file in a browser

    3. Try console.dir(document)

    4. try document.body.textContent = 'Hello';

    5. Create HTML basic structure connect JavaScript File


  • JavaScript DOM Document Object Model Introduction to Selection11:37

    JavaScript DOM Document Object Model Introduction to Selection

    The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM tree includes elements such as <body> and <table>, among many others. Setup of Index file and JavaScript file. JavaScript element selection and manipulation of the text content. Selection of page elements into JavaScript - select single or multiple Page elements with QuerySelector


    Lesson Challenge

    1. Select an element from the page using querySelector

    2. Update textContent value of selected element

    3. Use QuerySelectorAll to select all matching selectors

    4. Select using the index value from the NodeList

    5 Update element values using JavaScript Code


  • Element Style Manipulation with JavaScript Update Color and Background Color12:09

    Element Style Manipulation with JavaScript Update Color and Background Color

    With JavaScript explore how to update and manipulate the element style attribute. Using JavaScript to make the element change colors with click events tracking clicks on the element using JavaScript. Update manipulate the Element Style properties and add click events with JavaScript Event Listeners. Create a mini project that updates the element background color when it is clicked.


    Lesson Challenge

    1. Select an element from the page using JavaScript

    2. Assign a variable value to the element

    3. Update style properties with JavaScript

    4. Create Random values 0-255 generating random RGB colors for color and background color for the element with JavaScript

    5. Add an event listener to the element, update the color background and padding dynamically with JavaScript Code.


  • Update Element Position Using JavaScript Move div with JavaScript Code5:55

    Update Element Position Using JavaScript

    Select an element and update its position - move the element with JavaScript. Move elements on the page update the element style left and top values with JavaScript.


    Lesson Challenge

    1. Apply Style properties to selected element

    2. Move the element on the page

    3. Add position to set position of the element


  • AnimationFrames with JavaScript and KeyBoard EventListeners Movement Click Event13:29

    AnimationFrames with JavaScript and KeyBoard EventListeners Movement

    Select an element and update its position - move the element with JavaScript. Introduction to animation frames to move elements on the page. Add keyboard event listeners move the element depending on key presses. Use of AnimationFrames to have smooth continuous movement of elements on the page. Adding keyboard key presses to move element according to keypress event listeners. Update element position with JavaScript.


    Lesson Challenge

    1. Add the animation frame to the code

    2. Move the element with key presses

    3. Update the element position depending on keypresses

    4. Use the arrow keys to move the element on the page dynamically changing the position


  • Create Element using JavaScript and Randomly Place within Page Container Div17:53

    Create Element using JavaScript and Randomly Place within Page Container Div

    Create multiple elements that move on the page and have the click event listener added to them. New ones appear randomly positioned. Make new elements with JavaScript - using document create Element method to dynamically generate elements and add them to the HTML page.


    Lesson Details

    1. Add EventListener that can be used as a trigger to create an element on the page with JavaScript

    2. Once invoked the event should create a new div element on the page.

    3. Add a class with classList.add()

    4. Add Style left and top position values randomly

    5. Get the boundaries of the parent div place all newly created Elements randomly within the main parent.


  • How to Move element Randomly make clickable with JavaScript DOM12:32

    How to Move element Randomly make clickable with JavaScript DOM

    Randomly move elements on the page with JavaScript, click the element and get points. Make new elements clickable and randomly move on the page.


    Lesson Challenge

    1. Create Page elements with JavaScript set a max amount of items to be created in the game object

    2. Add new page elements into an array

    3. Contain movement into the main parent element so the new elements move only within those boundaries

    4. Add option to click the elements

    5. Set Direction of movement within the element using a variable that can be updated to either negative or positive.


  • How to add Collision Detection with JavaScript elements game JavaScript19:30

    Collision Detection with JavaScript elements

    Add options to check collision between page elements. Check top to bottom element dimensions and left to right comparing to detect if there is overlap. If overlap happens, track as a collision. Add the collision check to the JavaScript project checking for any collision between page elements.

    Lesson Challenge

    1. Keep movement of element within parent element boundaries with conditions

    2. Use the getBoundingClientRect method to get 2 element values

    3. Check for overlap with left and right corners and also top and bottom corners.

    4. Return true on collision and false on no collision

    5. Check every enemy element when moved for collision with main box element from player.


  • Scoring and Game Development with JavaScript Page Elements Final Gameplay8:53

    Scoring and Game Development with JavaScript Page Elements Final Gameplay of JavaScript DOM project

    Adding scoring to the gameplay - create gameplay and allow the user to progress in the game. Game design and game concepts and how to apply it with JavaScript. Test and debug any issues. Plan and play the game to ensure functionality. Game design and game concepts and how to apply it with JavaScript.


    Lesson Challenge

    1. Make adjustments and debug the gameplay

    2. check and ensure the game is functioning as expected

    3. Add scoring to the game

    4. Add option to stop and start gameplay

    5. Add and extend on the game adding additional functionality as needed.


  • Final Source Code for Simple Game Project1:23

Requirements

  • JavaScript HTML and CSS
  • Coding experience

Description

JavaScript Explore what you can do with the Document Object Model making your web pages come to life!!!

The DOM is an object-oriented representation of the web page, which can be modified with JavaScript to Create Interactive and Dynamic Web Content

  • Select elements from the page

  • Update Elements on the Page

  • Apply Styling to the style attribute

  • Track user interactions with Click events and keyboard events

  • Move and manipulate page elements with JavaScript

Upcoming lessons will show you how - to make you web pages come to life

Creating a basic game project - where the player can move a page element using the keyboard. Also create new page elements - and automatically have new page elements added to the page when conditions are met. Creating a dynamic and interactive game that detects element collision and adds to the score. Move your element to hit the other elements on the page, score and see how new elements are created with a max number in from the code. Basic JavaScript Game structure that can be extended upon to build your own games and more.

Source Code is included - Step by step PDF guide and more.

Selection of page elements into JavaScript - select single or multiple Page elements with QuerySelector

Course Covers

  1. Web Dev Setup Coding IDE and Resources - links and resources to setup introduction to course content.

  2. JavaScript DOM Document Object Model Introduction to Selection JavaScript element selection and manipulation of the text content.  Selection of page elements into JavaScript - select single or multiple Page elements with QuerySelector

  3. Element Style Manipulation with JavaScript Update Color and Background Color - Update manipulate the Element Style properties and add click events with JavaScript Event Listeners.   Create a mini project that updates the element background color when it is clicked.

  4. Update Element Position Using JavaScript - Move elements on the page update the element style left and top values with JavaScript. 

  5. AnimationFrames with JavaScript and KeyBoard EventListeners Movement - Use of AnimationFrames to have smooth continuous movement of elements on the page.   Adding keyboard key presses to move element according to keypress event listeners.  Update element position with JavaScript.

  6. Create Element using JavaScript and Randomly Place within Page Container Div Make new elements with JavaScript - using document create Element method to dynamically generate elements and add them to the HTML page.

  7. Move element Randomly make clickable Make new elements clickable and randomly move on the page. 

  8. Collision Detection with JavaScript elements Add options to check collision between page elements.  Check top to bottom element dimensions and left to right comparing to detect if there is overlap.  If overlap happens, track as a collision.  Add the collision check to the JavaScript project checking for any collision between page elements.

  9. Scoring and Game Development with JavaScript Page Elements Adding scoring to the gameplay - create gameplay and allow the user to progress in the game.  Game design and game concepts and how to apply it with JavaScript.

  10. Final Gameplay of JavaScript DOM project

Source Code is included

Taught by an instructor with over 20 years of web development experience ready to help you learn more about JavaScript

Who this course is for:

  • JavaScript beginners
  • Anyone who wants to create web pages
  • Webmasters and web designers
  • Web application developers
  • Anyone who wants to create modern websites

Report abuse