Coding Space Invaders in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas

In this exciting video we are going to make the classic game Space Invaders with JavaScript on a HTML canvas. Best of all we will code everything from scratch starting with an empty project.

In this classic game we have our enemies at the top of the screen; they move side to side and down towards our player. At random the enemies will shoot bullets. At the bottom of the screen we have our spaceship which can shoot at the enemies. Unlike the original game our bullets shoot much faster, which also makes the game much more fun. The objective is to stay alive, avoid the enemy bullets and eliminate the enemies before they reach the bottom of the screen.

We will cover the following topics and more:
Game loop
Keyboard input
Moving our enemies
Collision detection
Shooting bullets
Game Audio

GitHub:

Try the game:

Download Images and Sound:

MDN 2D Collision Detection:

enemyMap = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[2, 2, 2, 3, 3, 3, 3, 2, 2, 2],
[2, 2, 2, 3, 3, 3, 3, 2, 2, 2],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
];

Chapters
00:00:00 Intro
00:00:50 Project Setup
00:02:55 CSS
00:04:46 Canvas and Game Loop
00:07:14 Enemy Controller - Setup
00:09:02 Draw Enemies
00:19:11 Move Enemies Intro
00:22:19 Move Enemies Right
00:25:50 Move Enemies DownLeft
00:30:24 Move Enemies Left
00:32:19 Move Enemies DownRight
00:33:25 Draw Player
00:35:34 Move Player
00:38:00 Player Wall Collision
00:39:20 Player Shooting Bullets
00:57:11 Enemy Shooting Bullets
01:02:22 Collision Detection - Player Shoot Enemies
01:11:29 Game Over - Enemies Shoot Player
01:12:22 Display Win & Game Over
01:13:48 Enemies Collide With Player
01:15:50 Game Win Check
01:15:50 Win The Game

#gamedev #gamedevelopment #coding #programming #javascript

[RoddieH]

Honestly, Adam, your videos and channel deserve way more views and subs. I'm not a coder or dev, and have no desire to be one (I'm a few years from retiring out the Network world), but I do enjoy dabbling from time to time or teaching myself enough code to use for a work task, and sometimes even just exercising my brain.

On a whim I decided to follow your tutorial because I've never actually used JavaScript before and I was curious to see how it flows. I'm only just starting, but I'm already absorbing a lot of it, and I'm already having ideas in my head about how to implement the barriers at the bottom (building them like bullets, maybe?) or adding the enemy that randomly floats across the top. Whether this motivation sticks, who knows, but I just wanted to throw out a thanks.

[databasemadness]

This channel is about to blow up! Love your tutorials man! You are a master

[rutsoluo]

Great video! but there is a tiny bug. to reproduce:
1. shoot all the enemies in the middle columns
2. avoid the enemies and enemy bullets
3. Eventually all the enemies will go past the player
4. Actual: player will not win or lose
5. Expect: player to lose as the original Space Invader as enemies invade your base

[cleverprogrammeruz]

I'm from Uzbekiston. This video just very good.

[josephcieplak]

I ddid really learn a lot with your previous game Pac-man. thank you so much!

[edtrewin]

Hey Adam, keep up the "great" work. Coding aside, I could not avoid feeling nostalgic though. My son loved it, and it has boosted his interest in programming, Thanks!!!!

[theotaylor]

Almost got 50 videos mate 6 more to go! it will be a milestone, keep it up!

[benbrown]

Great tutorial man! Thanks for making it! Just finished creating the game and it's pretty awesome.

[aldesianvero]

Your tutorials are amazing! Love the UI!

[BryanChance]

Brilliant! Very concise and great presentation. Thank you.

[Radu]

Nice! I see you have quite many things on your channel. Subscribed!

[llamazing]

Thanks, I’m doing this for a school project but I haven’t learned parts of it yet

[dinoman]

this is a very good tutorial. i would request you to improve this game by created more parts which features powerups, random enemies spawning locations and changing the background. Wishing you well❤❤

[benatakaan]

Your tutorials are amazing! Love the UI! Thank you for doing such a great job.Do you plan on sharing tips around how to add different levels and score keeping to your games?

[animalemagico]

Great video :) You are a phenomenal teacher!

[karolyenyed]

Hey Adam! Good job! I like your video! I'm wondering how would you add different music if you win or if you lose? And how would you create a restart function? Thanks in advance!

[rubentxogg]

Thank you very much, I enjoyed a lot!

[norman]

This is incredible! Do you do zoom mentoring sessions?

[technologic]

So I'm still learning js and watching this tutorial, am at 00:12:12 currently but I have a ton of questions, hope you don't mind answering!
1. How does the forEach work in this case?
2. Are there any ways to create the enemyMap dynamically shown in the tutorial?

3. row, rowIndex, enemyNumber, enemyIndex wasn't intialised(?) before it was called in the forEach loop, and yet, the code works, how does that work?

[BaeristaVR]

The .png doest show . It cant connect.