Space Invaders with JavaScript and HTML Canvas

Improve your game-dev skills by learning how to code power-ups, explosions, and more for this classic game type

Created by: Christopher Lis
Founder of Chris Courses / Senior Full-Stack Engineer

What Will I Learn?

• Setup a development environment
• Create and move a player's spaceship
• Import game images
• Generate grids of enemy invaders at set intervals
• Shoot projectiles
• Remove enemies with precise collision detection
• Create bombs that explode multiple invaders at once
• Obtain machine gun power-ups that alter your rate of fire
• Make enemies progressively harder
• Add particle animations that follow your spaceship
• Develop a game UI using HTML and CSS
• Start and end screens with a restart button
• Add custom sound effects and music
• Code consistent frame rates for all types of monitors
• Deploy to GitHub pages

Requirements

• You should understand basic JavaScript principles like var, let, const, for loops, and functions
• Some prior knowledge with HTML canvas will help, although it's not strictly required

Target audience

• Beginner game devs looking to bolster their skills and better understand game development in general