Walterreid.com

How To Build

A Tower Defense Game In Javascript

Tower Defense (TD) games all have the same basic premise: defend a point by building structures to stave off the enemy waves. Once built, the structures target and attack enemies automatically. Each "tower" acts differently-- some attack a single target, some attack multiple targets, and some don't attack at all but provide support to others.

So how does something with such a simple mechanic attract so many fans?

The answer is simple. TD games out there differentiate themselves on the stories, graphics and gameplay. I'll teach you how to create a basic tower defense game, but it's often the stories around the levels and a mythology around the purpose of the game that makes the difference.

Step #1 - The Map

The map is the most important part of the tower defense experience. In our case it'll be a 600x400 rectangle with a simple path.

The Map

Play Now
main.css
main.js

Instructions

Just the map with a simple path that we will have to follow in future tutorials.

Think about ways to differentiate your game from others, but keep enough the same to draw people who still like the genre.

step #2 - Basic Enemies

You can't have a tower defense game without some enemies. So the first thing we will add is a basic enemy type that will follow the path we have defined in the earlier lesson.

Basic Enemies

Play Now
main.css
main.js

Still no user control. We will need to wait until the next lesson in the series.

step #3 - Basic Turrets

As much as you can't have a tower defense without enemies, what's a tower defense without towers. We will create a basic tower type that will be able to damage and kill the enemies we created earlier.

Basic Turrets

Play Now
main.css
main.js

You can place the turret by selecitng "Normal" and then selecting somewhere on the map. In addition, if you select the placed tower (by clicking directly on top of it) you can see the range of the tower and hit "U" on the keyboard to upgrade the tower. I've given you 500, so you can play around a little with the mechanic.

step #4 - Waves

Another classic part of the tower defence game. Waves are a staple of the genre and in this tutorial, we are making the waves based on the user clicking "Next Wave".

Waves

Play Now
main.css
main.js

Adding Enemy Waves to the mix. Click "Next Wave" to start the enemies. This will give you a little more time to plan your strategy and where you want your towers.

step #5 - Advanced Enemies

While basic enemies are fun, what about runners, and summoners and big bosses? This tutorial in the tower defense series will teach you how to add different type of enemies to the mix.

Advanced Enemies

Play Now
main.css
main.js

You'll definitely need to learn to upgrad your towers if you want to survive past level 15 in this version.

step #6 - Advanced Turrets

The final (for now) tutorial in the series where we add more types of towers. We have now everything we need to classify our game as a real tower defense and written in javascript!

Advanced Turrets

Play Now
main.css
main.js

Select from a variety of towers, including: Basic, Shotgun, Poison, Minigun, Flame and Sniper. Use the mouse to place the towers, based on the amount on gold you have. As an added bonus, use special abilities to kill your enemies when things get a little tough

Fun Projects

Idle Developer

Learn what it takes to be the greatest developer in the world in this simple incremental game. Hours of fun!

Product Idea Generator

Today every skill for building a product can be learnt online — coding, design, marketing — besides one: generating new product ideas. With this online tool, you will learn ideas to start your next profitable SaaS, physical, digital, services, content business, side hustle, or indie startup. :)