DEV Community

Cover image for Coding Space Invaders in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas
CodingWith-Adam
CodingWith-Adam

Posted on

9 2

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

Take the video tutorial:

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay