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/sp...
Try the game:
https://codingwith-adam.github.io/spa...
Download Images and Sound:
https://drive.google.com/file/d/1VJFi...
MDN 2D Collision Detection:
https://developer.mozilla.org/en-US/d...
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
Watch video Coding Space Invaders in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas online without registration, duration hours minute second in high quality. This video was added by user Coding With Adam 28 March 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 41,190 once and liked it 1 thousand people.