JavaScript Game Tutorial - 2D Tower Defense

Let's build JavaScript game inspired by Plants vs Zombies. In this tutorial we will practice front end web development techniques 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.

I love video games and everybody who knows me will tell you that. I think a lot of programmers do. I have always wanted to build a JavaScript game with mechanics similar to plants vs zombies. Today I will build it with you and I will explain all the code. Not only we will build a game, but we will also learn and practice important vanilla JavaScript programming techniques. I will do a space theme. Robots vs Aliens. we set up a base on alien planet but it was too late when we discovered that at night dangerous alien creatures come out. We have limited resources so we have to use our defences carefully
we have to collect more resources, strategize, use the correct units against certain enemies and defeat the final boss.

0:00 Let's build Plants vs Zombies game with JavaScript
3:16 HTML markup and basic CSS styling
4:17 How to set up HTML canvas for JavaScript game and how to plan the code structure
9:52 How to create JavaScript game grid
19:56 Collision detection between 2 rectangles
25:54 How to use JavaScript ES6 classes to create 'defender' units for our game
36:30 Enemies
49:32 Lasers and other game utilities
1:05:22 Resources and simple fixes

#frankslaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney,
Dub Hub - Jimmy Fontanez_Media Right Productions

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!

[codenester]

Great! Can't wait to see next episode. This is one of the great resources out there in web game. Thank you.

[kearneytaaffe]

I'm currently a React web-dev, ran into your post on Reddit and honestly, I'm blown away by what a good job you've done. I'm definitely going to recreate this!

[rupturedrhombus]

Just wanted to say, you are awesome Frank. The coding genius himself, taking time to teach. Big props to you, thank you so much.

[poplop]

Hey man thanks alot! You're one of the main reasons why I learned so much in game development (such as ctx and collision). And the way to detect enemies, really good because I now learned the indexOf!

[miroslavbekyarov]

this is one of the best vanilla JS tutorials I've seen so far, great work

[CoolScratcher]

Dang, Frank is killing it with this hour-long tutorial :D

[RomanKnav]

This is a truly high quality tutorial Frank. Kudos to you sir 👍

[mattmovesmountains]

I'm about a third of the way through; couldn't get the collision/grid thing to work as shown for some reason, but I figured out an alternate way, and am now feeling proud of this mini accomplishment

[Gethin]

One of the most helpful videos I've ever seen on the matter. So shocking this only just came out within the last two weeks.

[jeffhill]

Absolutely fantastic tutorial. I've been coding for a long, long time and I learned some very cool techniques. Thanks Frank!

[MewVSMewtwo]

I just discovered you (as a beginner) and just wow. AMAZING! Very helpful, and beginner friendly. This is awesome!
You explain what you do way more than others.

[tarun]

Omg !! He went all out this time !!
We'll get to know a lot
New things to learn !!
You really worked a lot, this time😄
And here I'm trying to add few features in my boss for LVL 3 .... And I'm breaking my code a lot of times ... But, if that'll make the end result looks good I'll be satisfied

[BruceOnder]

This was a tremendously good tutorial video! 💪🏾 Great teaching style!

[piersonlippard]

Whaaaa!!! Frank this is fantastic. Thank you so much for another amazing tutorial. ;-)

[johnatteo]

Thanks for this wonderful masterpiece you made for us Frank. You have taught me more about Javascript then my CS professor in 3 years 😊 😃 thanks so much. I Subscribed!!

[pavlejovanovic]

You deserve much more subs and views, keep up the good work. You are amazing!

[AleksPopovic]

Wow, this is super awesome. I can't wait to see how this series pans out. 😊

[Radu]

Wow :-) this is great! Will you show us how to add sprites and time them with the projectiles?

[ramin]

all i can say is you are AMAZING Frank!

[mostafagh]

you are an amazing person sir, great tutorial.