Uploaded February 2021 | Updated September 2026, 1 week ago
Let's add more features to our JavaScript game inspired by Plants vs Zombies. In this tutorial we will practice object oriented programming and use plain vanilla JavaScript and HTML canvas element to create 2D tower defense game. We will use different types of units, to defend our base against a variety of enemies, we will collect resources and fight boss battles. Have fun.
Relevant links:
JavaScript 2D Tower Defense PART 1: youtu.be/QxYg8-mhhhs
Sprite sheets and game graphics: mobilegamegraphics.com/product/alien-pixel
Temporary alternative sprite sheets in case the website is down:
Zombie sprite sheet: frankslaboratory.co.uk/downloads/zombie.png
Plant sprite sheet: frankslaboratory.co.uk/downloads/plant.png
Vanilla JavaScript Fish game (multiline sprite sheet animation)
PART1: youtu.be/jl29qI62XPg
PART2: youtu.be/MwTQtPGuBmo
This JavaScript tutorial is part of a series, for more game development check out this playlist youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
Timestamps:
0:00 Project overview
02:27 How to use JavaScript classes to create floating messages
17:02 How to prepare sprite sheets for our game
24:01 How to use draw image method for sprite animation
31:24 How to control frame rate separately for each sprite sheet
35:36 Animating towers (defenders)
43:00 How to allow player to switch between different units
Today we are building a game from scratch using vanilla JavaScript and HTML5 canvas element. I like strategic elements with tower defense games, choosing the right unit against specific enemy, knowing what combination of units to use against certain enemy compositions, it can get quite complex. Plant's vs zombies does this so well with their selection of 50 plus plants with different abilities and a wide range of enemies and interactive environmental elements. Today I would like to lay down groundwork for that in our game. We will allow player to choose between blue and pink defender. We will add sprite sheets, create floating status text and couple more things. I want this episode to be as beginner friendly as possible so I will just write the code in a simple readable way. I want this to be easy to follow along for beginners.
You can message me on TWITTER twitter.com/code_laboratory
Check out some of my source code on CODEPEN codepen.io/franksLaboratory
If you started with vanilla JavaScript and HTML5 canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
#frankslaboratory
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!
Let's add more features to our JavaScript game inspired by Plants vs Zombies. In this tutorial we will practice object oriented programming and use plain vanilla JavaScript and HTML canvas element to create 2D tower defense game. We will use different types of units, to defend our base against a variety of enemies, we will collect resources and fight boss battles. Have fun.
Relevant links:
JavaScript 2D Tower Defense PART 1: youtu.be/QxYg8-mhhhs
Sprite sheets and game graphics: mobilegamegraphics.com/product/alien-pixel
Temporary alternative sprite sheets in case the website is down:
Zombie sprite sheet: frankslaboratory.co.uk/downloads/zombie.png
Plant sprite sheet: frankslaboratory.co.uk/downloads/plant.png
Vanilla JavaScript Fish game (multiline sprite sheet animation)
PART1: youtu.be/jl29qI62XPg
PART2: youtu.be/MwTQtPGuBmo
This JavaScript tutorial is part of a series, for more game development check out this playlist youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
Timestamps:
0:00 Project overview
02:27 How to use JavaScript classes to create floating messages
17:02 How to prepare sprite sheets for our game
24:01 How to use draw image method for sprite animation
31:24 How to control frame rate separately for each sprite sheet
35:36 Animating towers (defenders)
43:00 How to allow player to switch between different units
Today we are building a game from scratch using vanilla JavaScript and HTML5 canvas element. I like strategic elements with tower defense games, choosing the right unit against specific enemy, knowing what combination of units to use against certain enemy compositions, it can get quite complex. Plant's vs zombies does this so well with their selection of 50 plus plants with different abilities and a wide range of enemies and interactive environmental elements. Today I would like to lay down groundwork for that in our game. We will allow player to choose between blue and pink defender. We will add sprite sheets, create floating status text and couple more things. I want this episode to be as beginner friendly as possible so I will just write the code in a simple readable way. I want this to be easy to follow along for beginners.
You can message me on TWITTER twitter.com/code_laboratory
Check out some of my source code on CODEPEN codepen.io/franksLaboratory
If you started with vanilla JavaScript and HTML5 canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
#frankslaboratory
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!
![JavaScript project tutorial for beginners [HTML Canvas Particles]](https://i.ytimg.com/vi/nrJh8-Ixnu8/mqdefault.jpg "JavaScript project tutorial for beginners [HTML Canvas Particles]
Do you want to bring your website to life? In todays JavaScript project tutorial for beginners I will take you through a step by step process on how to create your first particle system on HTML canvas element. We will give particles physics (wind and gravity) and we will learn how to make particles bounce. Then in the second part of this tutorial we will set up collision detection with a regular website element, for example h1 title element, but it will work with any HTML element you choose.
Welcome to my JavaScript laboratory where we practice HTML, CSS and JavaScript to create all different kinds of interactive animated effects. That includes games, generative art, webdesign elements and much more. In each JavaScript tutorial I take you step by step through the code base as we build our project from scratch.
And thats not all, we dont use any libraries or frameworks so not only we build cool stuff, but in the process we also learn fundamental JavaScript techniques. These techniques are completely transferable to other kinds of front end web development projects and will help you to pass your coding interview and get your first programming job.
My name is Frank and I am a self taught Front End Web Developer. I learned everything I know in my free time from structured Udemy courses and YouTube project tutorials just like this one. If I could do it you can do it to.
Some of my favourite UDEMY courses for beginners:
JavaScript Beginner Bootcamp (2020) https://bit.ly/3aqFFhc
The Web Developer Bootcamp (Older but still very relevant) https://bit.ly/2ZZJM0d
Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
JavaScript Basics for Beginners https://bit.ly/32Tn5wq
JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn
The Complete JavaScript Course 2020: Build Real Projects! https://bit.ly/3fXGwaZ
Modern JavaScript From The Beginning https://bit.ly/3fWJgWk
LIKE the video please if youre getting value out of my tutorials and SUBSCRIBE if you want to learn more vanilla JavaScript!
Related video (advanced project challenge):
How to work with canvas gradients and HSL colour declaration https://youtu.be/zbVRgbvuEZ0
There are a lot of videos teaching you the basics of programming, but how are we supposed to learn some of the more interesting effects. Thats why I created this series, where we combine basic fundamental JavaScript techniques into creative coding experiments, generative art, games, animations for websites and more. For science of course:D
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
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
Recommended tools:
Adobe Creative Cloud (Adobe Photoshop, Illustrator) https://bit.ly/3e60cI0 (official Adobe website to buy Creative Suite applications)
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!")
![CSS Animation Tutorial for Beginners [Animated Background Effect]](https://i.ytimg.com/vi/nzPCGVRdKII/mqdefault.jpg "CSS Animation Tutorial for Beginners [Animated Background Effect]
Welcome to another CSS animation tutorial for beginners. Today we will build animated background effect together. In this series I help you to learn front end web development by taking you step by step through all different kinds of creative HTML and CSS projects.
LIKE the video please if youre getting value out of my tutorials and SUBSCRIBE if you want to learn more HTML, CSS and front end web development!
This tutorial is part of a series - CSS 3 Creative Coding Experiments
https://www.youtube.com/playlist?list=PLYElE_rzEw_t2O2DvfopIoq-diTgefVzV
I have always loved optical illusions, they reveal interesting things about how our brain pieces visual input together to make sense of what we are looking at. I also like HTML CSS and front end web development in general and I have always wanted to create a project where I put these two things together. In todays CSS animation tutorial for beginners we will build our own optical illusion and make it into interactive animated background effect. We will learn how to animate gradients with CSS and how to use 2 uncommon CSS3 selectors - adjacent sibling combinator (+) and general sibling combinator (~). Have fun :D
Latest offers and packages for Adobe Creative Cloud (Adobe Photoshop, Illustrator etc.) https://bit.ly/3e60cI0
You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
#css3 #html5 #frankslaboratory
Relevant links:
Project images + links to optical illusion articles http://frankslaboratory.co.uk/optical-illusions-with-css-project-tutorial-for-beginners/
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 "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!")
