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: https://github.com/CodingWith-Adam/space-invaders Try the game: https://codingwith-adam.github.io/space-invaders/index.html Download Images and Sound: https://drive.google.com/file/d/1VJFiasi6QwGgiUsRJ0YWK9zRw-OkNhx2/view?usp=sharing MDN 2D Collision Detection: https://developer.mozilla.org/en-US/docs/Games/Techniques/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