Uploaded July 2023 | Updated September 2026, 1 week ago
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.
๐ Full EXTENDED version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
Part 1: this video (youtu.be/cuudnyDyWGE)
Part 2: youtu.be/oULPfiGeUV0
Part 3: youtu.be/bobqrOT-cVI
Part 4: youtu.be/nwPBVwtsVys
Playlist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW
๐ฝ Download Project Art assets ๐ฝ
Background: frankslaboratory.co.uk/downloads/125/background.png
Beetlemorph enemy: frankslaboratory.co.uk/downloads/125/beetlemorph.png
Player space ship: frankslaboratory.co.uk/downloads/125/player.png
Player jets: frankslaboratory.co.uk/downloads/125/player_jets.png
(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.
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! ๐ช
udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
Get Skillshare FREE for 1 month: โ๐
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
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
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.
๐ Full EXTENDED version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
Part 1: this video (youtu.be/cuudnyDyWGE)
Part 2: youtu.be/oULPfiGeUV0
Part 3: youtu.be/bobqrOT-cVI
Part 4: youtu.be/nwPBVwtsVys
Playlist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW
๐ฝ Download Project Art assets ๐ฝ
Background: frankslaboratory.co.uk/downloads/125/background.png
Beetlemorph enemy: frankslaboratory.co.uk/downloads/125/beetlemorph.png
Player space ship: frankslaboratory.co.uk/downloads/125/player.png
Player jets: frankslaboratory.co.uk/downloads/125/player_jets.png
(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.
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! ๐ช
udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
Get Skillshare FREE for 1 month: โ๐
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
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
