JavaScript Plane Bomber Game - DOM practice exercise
Explore how you can build a JavaScript DOM game from scratch - Perfect to explore and practice JavaScript
Lectures -16
Resources -1
Duration -1 hours
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
This course is perfect to practice and learn more about the Document Object Model, while building a fun interactive game from scratch. build your own version of this JavaScript game. Step by step lessons with explanations of JavaScript methods and applying logic to create this mini application.
Its not always fun and games to learn JavaScript, but in this case it can be :)
Source code is included so you can try the code at the end of the lessons to see it in action. Useful coding concepts and JavaScript methods are covered to get you more familiar with using them and building out customized applications from scratch.
Scope of the course is to introduce you to element manipulation via the DOM. Content covered relates to effectively creating interactive and dynamic content for web users. I keep non JavaScript coding to a minimal to focus directly on JavaScript. This is a fast paced course straight to the point on how to apply JavaScript.
Element selection using querySelector
Elements as objects in JavaScript
Adding addEventListener Keyboard events
Getting Key press values
Setup of global variables and objects for gameplay
Element creation on the fly createElement() method
Adding new elements to the page appendChild()
Setting of element attributes setAttribute()
Adding animation of content requestAnimationFrame()
Updating element position depending on key press
Updating element style values
Tracking element position within data objects
Using offset values of element to get position X,Y
Adding classes to elements classList()
Applying scoring and game logic for gameplay functionality
Creating dynamic values that can scale with game
Updating element content innerHTML
Applying logic and game concepts.
Adding enemy target to gameplay
Moving targets and document element with gameplay
Adding elements to the page and tracking movement
Dynamically creating elements
Automation of movement for non player elements
Checking element position and determining element overlap
Collision Detection between two elements on the page
Getting element details getBoundingClientRect()
Returning the size of an element and its position relative to the viewport.
Debugging and game checking
Code review and adjustments
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Goals
- How to use JavaScript
- How to create elements dynamically
- Manipulate elements using JavaScript
- Explore JavaScript Document Object Model
Prerequisites
- Fundamental JavaScript concepts
- Access to computer
- Use of editor to write code
- HTML and CSS knowledge
![JavaScript Plane Bomber Game - DOM practice exercise JavaScript Plane Bomber Game - DOM practice exercise](https://d3mxt5v3yxgcsr.cloudfront.net/courses/3392/course_3392_image.jpg)
Curriculum
Check out the detailed breakdown of what’s inside the course
Introduction
14 Lectures
-
Bomber Plane Game Introduction 02:32 02:32
-
Game Area Setup 02:58 02:58
-
JavaScript eventlisteners KeyBoard Events 06:19 06:19
-
JavaScript Start Game 04:51 04:51
-
Add animation frame. 07:48 07:48
-
JavaScript quick Game fixes 04:39 04:39
-
Introducing Game Scoring 02:58 02:58
-
Show Scoreboard to player 02:25 02:25
-
Add Enemy Base 05:13 05:13
-
Make the bomb Dynamically creating elements 07:30 07:30
-
Move bombs Automatically 04:49 04:49
-
Collision Detection 05:23 05:23
-
Final Gameplay Tweaks 07:31 07:31
-
Bomber Plane Code Review 07:20 07:20
Course Resources
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Laurence Svekis](https://www.tutorialspoint.com/assets/profiles/212399/profile/200_204767-1592451022.jpg)
Laurence Svekis
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)