Space Invaders Game Tutorial with JavaScript and HTML Canvas

Space Invaders is a classic game that you should be able to find at any retro-based arcade. Surprisingly, coding it with JavaScript isn't that difficult, we just need to know few concepts regarding image rendering, physics, and object interaction. Here I'll teach you all of that and more using a combination of HTML and vanilla JavaScript.

00:00 Project intro
01:56 Project setup
07:20 Create a player
21:39 Move the player
37:09 Create projectiles
47:15 Create an invader
51:34 Create and move grids of invaders
1:07:32 Spawn grids at intervals
1:13:42 Shoot invaders
1:22:34 Take into account new grid width
1:26:32 Invaders shoot back
1:36:47 Enemy explosions
1:49:05 Create background stars
1:54:20 Lose condition
1:58:04 Score
2:02:32 Fixed-width canvas

[monotoneguy]

Dude I remember watching your videos in college and now I'm a frontend developer. Thanks for the tutorials bro

[bucky_]

Beautifully explained. I like how he walks us through his thought process to write a clean code.

[Frankslaboratory]

Another game, Christmas coming in January this year, thanks Chris :D

[GiovaniRamirez-mc]

These video helped me out so much in Middle school and now im really advanced in coding i have to go to the highschool to learn how to code

[erwinyulianto]

Finally 18:45 show how to get image size correctly, been struggle get image size for your other mario tutorial.

[SamFishback]

thank you for making this available to us for free

[elvynmarte]

His name is Super Chris, thanks for this treasure broth 🤜🤛

[eduardorauchbach]

I changed so many things to experiment, but your tutorial is really good :)

[itzyourbwoytchybooxuur]

Sweet Jesus!
This is gold 🥇 🙏 Gracias! 🎊

[apocc]

I just wanted the people who MAY not solve the error " Cannot read properties of undefined ( reading "x") at 26:49 even tho you followed his steps after. You can see at 26:33, line 48, player.draw( ), it just disappears even tho he did not touch it, watch it in slowmo from 26:33 - 26:36. For the code to work again without error, you need to remove it in your code. Hope I helped someone :)

[itscloudy]

I havent watched this video yet so i cant speak for it. But i love what you are doing, its the exact thing im looking for, i have wanted to get into browser game development for a while, but all tutorials i have found are based of a framework like phaser, i am a programmer so i do not want the programming part just to be handed to me.

[ArtcodEAscetik]

hi,
i still don't understand those setTimeout calls with 0...

[underun]

Hello, it's a very great tutorial, thanks a lot!

[slammerton]

The hardest thing for me was to keep everthing in order... Isn't it common to put classes in own files (like java e.g) ?

[_rohit_s]

I've also tried to make this game but stuck in calculate plane shoot obejcts and remove them I've tried so much but no enough knowledge to solve that 😔😔

[MAlizadeh-ed]

I watched this video and the code didn't work. I double checked multiple times.

[Николай-гтч]

Is there another free tutorial I can watch to improve the game?

[MountainDEWDjv]

Chris, my spaceship image is very pixelated! Any ideas? I am following along using vscode and google chrome.

[gamerijn]

so i got a few problems:

- i have put all of the things needed in tje JS file, but it just doesnt get the 300x150 canvas i gave it in html, so it doesnt collide with the sides,
and with the movement:
- if i put the velocity values the same, so 3 for me, the D goes faster then the A in speed, , and i cannot find the problem

[vinothvino]

Please upload javascript full course tutorial ....