JavaScript Game Tutorial - 2D Tower Defense

JavaScript Game Tutorial - 2D Tower Defense

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.

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.


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

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

js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.