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.

Subscribe: https://www.youtube.com/channel/UCEqc149iR-ALYkGM6TG-7vQ

JavaScript Game Tutorial - 2D Tower Defense PART 1

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

Source Code on CODEPEN https://codepen.io/franksLaboratory

JavaScript Game Tutorial - 2D Tower Defense PART 2

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.

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

Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

#js #javascript