JavaScript Alien Invaders Game Project Course

Name: JavaScript Alien Invaders Game Project Course
Rating: 3.9 (8 reviews)

Learn JavaScript by applying JavaScript to build a fun interactive Game based on DOM element interaction

Created byLaurence Svekis

Last updated 11/2024

English

What you'll learn

How to use JavaScript
How to create elements dynamically
Manipulate elements using JavaScript
Explore JavaScript Document Object Model

Course content

3 sections • 34 lectures • 1h 58m total length

Alien Invader JavaScript Game Introduction1:55

Game Play Setup using HTML and JavaScript4:56
Set up the basic game structure for the alien invaders, connect HTML elements to JavaScript with querySelector, and implement a top bar, score, start button, ship, and projectile.
Code setup source0:09
Start Game Action adding JavaScript Event handlers8:05
Source Code0:28
Move Player Keyboard with Keyboard events JavaScript4:57
Source Code0:39
Starting the Game - Game structure and design JavaScript3:51
Source Code0:44
Container Boundary - moving and animation of character JavaScript2:24
Restrict the ship’s movement to the container boundaries by checking left and right positions, using temp position and container dimensions, and incorporating the ship’s width to prevent off-screen movement.
Source Code0:45
Fire Away Shooting element style updates JavaScript7:08
Source Code0:54
Start Game Prep Aliens - creating the bad guys JavaScript7:13
Hide the start button, set game over to false, and dynamically set up aliens with x and y placements across rows using a dynamic container width and adjustable alien width.
Source Code1:07
Create some Alien dynamically add elements to page JavaScript6:14
Source Code1:19
Add Eyes and Features and more complex element structures JavaScript5:05
Source Code1:33
Lets Get Moving animation and movement of aliens JavaScript6:26
Source Code1:42
Tweaks and Fixes apply gameplay fixes6:26
Implement game over logic for the JavaScript alien invaders project by detecting when aliens cross the bottom boundary, stopping updates, and enabling restart with clearing aliens.
Source Code1:50
Hit Detection collision detection of element overlap JavaScript7:50
Learn to detect collisions between the red projectile and aliens using bounding client rectangle values, an is collide function, and looping through aliens for dynamic projectile support.
Source Code1:55
Hit Target handle element overlap JavaScript5:09
Source Code2:03
Final Code Tweaks and Updates and debugging JavaScript5:52
Source Code2:08
Quick Fix Alien Count - JavaScript1:45
implement a quick bug fix to cap alien creation based on screen height, ensuring a smooth start across small and wide screens by adjusting rows, width, and other variables.
Source Code2:09
Alien Invader Code Review - Game review JavaScript12:44
Review the dynamic alien invaders game code, showing how aliens are created, moved, colored, and shot by keyboard controls to prevent them from reaching the bottom and to update score.

Requirements

Fundamental JavaScript concepts
Access to computer
Use of editor to write code
HTML and CSS knowledge

Description

HTML CSS and Fundamental JavaScript IS a prerequisite for this course.

Course scope is to practice and explore how to apply JavaScript to build an interactive web based game from scratch

Learn and see how element can be selected and manipulated to create game effects and animations. Apply logic to construct the game in a step by step format.

This is a FAST PACED course DESIGN FOR STUDENTS WHO WANT TO SEE JAVASCRIPT APPLIED IN A PROJECT FORMAT

Source code is included so you can build your own version of the game. Step by step lessons constructing the game from a blank page.

Course covers

DOM element selection and element manipulation
Update of style attribute and screen position
Use of JavaScript methods like Math(), getBoundingClientRect() and others
Check element collision detection
Adding keyboard event listeners and tracking them
Use of animation frame for smooth animations
Tracking and movement of page elements
Apply JavaScript to create a web based game

No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.

Step by step learning with all steps included.

Beginner JavaScript knowledge is required as the course covers only JavaScript relevant to the building of the game. Also HTML and CSS knowledge is essential as scope of this course is all JavaScript focused.

Along with friendly support in the Q&A to help you learn and answer any questions you may have.

Try it now you have nothing to lose, comes with a 30 day money back guarantee.

Start building your own version of the game today!!!!

Who this course is for:

Beginners to JavaScript
Anyone who wants to practice writing JavaScript
Web developers
Anyone who wants to learn to make a JavaScript game without any libraries
Beginners to JavaScript curious about Document Object Model and JavaScript Methods

JavaScript Alien Invaders Game Project Course

What you'll learn

Explore related topics

Course content

Introduction to creating JavaScript DOm game from scratch1 lecture • 2min

Create JavaScript DOM Game Alien Invaders31 lectures • 1hr 56min

Bonus Section2 lectures • 1min

Requirements

Description

Who this course is for: