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.

PART 2:

This JavaScript tutorial is part of a series, for more game development check out this playlist

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.

You can message me on TWITTER
Check out some of my source code on CODEPEN

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

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: –

#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!