Uploaded August 2023 | Updated September 2026, 1 week ago
What makes enemies interesting? In a 2D game like this it could be their behaviour, properties and visuals. Different combinations of enemy types in our games should create different situations and challenges for the player to deal with.
Today we will design and implement an armored enemy type and we will make it a part of our JavaScript Space Invaders game. Have fun!
๐ 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: youtu.be/cuudnyDyWGE
Part 2: this video
Part 3: youtu.be/bobqrOT-cVI
Part 4: youtu.be/nwPBVwtsVys
๐ฝ Download Project Art assets ๐ฝ
Rhinomorph enemy: frankslaboratory.co.uk/downloads/125/rhinomorph.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)
Today we will learn:
How to extend a class in JavaScript
How to override inherited methods on JavaScript sub classes
How to use HTML canvas drawImage() method
...and more
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
What makes enemies interesting? In a 2D game like this it could be their behaviour, properties and visuals. Different combinations of enemy types in our games should create different situations and challenges for the player to deal with.
Today we will design and implement an armored enemy type and we will make it a part of our JavaScript Space Invaders game. Have fun!
๐ 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: youtu.be/cuudnyDyWGE
Part 2: this video
Part 3: youtu.be/bobqrOT-cVI
Part 4: youtu.be/nwPBVwtsVys
๐ฝ Download Project Art assets ๐ฝ
Rhinomorph enemy: frankslaboratory.co.uk/downloads/125/rhinomorph.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)
Today we will learn:
How to extend a class in JavaScript
How to override inherited methods on JavaScript sub classes
How to use HTML canvas drawImage() method
...and more
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





![HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]
Website header text made out entirely of interactive bubble particles? Why not :) In todays HTML5 canvas text animation tutorial we will build it together using nothing but plain HTML, CSS and pure vanilla JavaScript. No frameworks and no libraries. Lets improve our understanding of these 3 fundamental web development technologies and create something cool in the process.
Relevant links:
PART 1: (Vanilla JavaScript Text Animation Tutorial - Particle Text with HTML5 canvas)https://youtu.be/XGioNBHrFU4
Challenge: (How to replace particles with images from a sprite sheet https://youtu.be/seEF7tj0Rmc
This is advanced particle effects tutorial, if you want something more beginner friendly try this video first to learn about the basics of HTML canvas animation https://youtu.be/ymmtEgp0Tuc or this video to learn about particle effects https://youtu.be/nrJh8-Ixnu8
As usual our vanilla JavaScript particle system co-debase is very modular so if you want to take these bubble particles and place them into any other effect, I will show you exactly where to place it and what to do to make sure everything is compatible. Lets explore new creative coding opportunities together and learn more about animating the canvas using HTML, CSS & JavaScript.
You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
#javascript #htmlcanvas #frankslaboratory
This tutorial is part of a series - Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST:
https://www.youtube.com/watch?v=lGJ9i6CYKyQ&list=PLYElE_rzEw_siuo-kkHh5h7Sk 6IPYNh
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, Ill 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! HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]](https://i.ytimg.com/vi/qqq4E6PU2vQ/mqdefault.jpg)




