How to Make: JavaScript Space Invaders

Spaceships, lazers and aliens. Let’s build a game from scratch with plain vanilla JavaScript and learn about game development and object-oriented programming. Our JavaScript game will be loosely inspired by the iconic space invaders arcade, but we will add some fun bonus features like super weapons, boss battles and different enemy types. While we do that we will learn about fundamental programming principles with JavaScript and object-oriented programming. 🚀 EXTENDED class with BONUS lessons and more free sprite sheets will be available here when I finalise the project, for now you can check out my other premium content if you want: 👽 Download Project Art assets 👽 Background: Beetlemorph enemy: Player space ship: Player jets: (if you can’t download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it) 🌌 Tutorial Contents 🌌 00:00:00 Intro 00:00:44 Project setup 00:05:23 Game and player objects 00:11:00 Keyboard controls 00:18:27 Object pool design pattern 00:31:28 Enemy waves 00:45:02 Collision detection 00:53:05 Score and game text 01:05:53 Game restart method 01:11:36 Beetlemorph enemy class 01:16:26 Sprite animation explained 01:27:02 Animation timing 01:37:17 Player animation Space Invaders was released in arcades across Japan in the summer of 1978. Back in the day, the processors were not powerful enough to move the entire army of aliens at the speed the designer Tomohiro Nishikado intended, but as the player defeated enemies, it freed more processor memory and the game was getting faster and faster the fewer enemies were on screen. It also affected the speed of background music. It wasn’t intended but this rising difficulty bug became a game feature. We will create a variation on this by making the enemies come in larger and larger waves. I will be using NO frameworks and no libraries and I will explain every line of code as usual, because only when you fully understand the code can you modify and add your own features later if that’s what you want to do. The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I’ll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support! #frankslaboratory
Back to Top