Updates to Processed Tower Defense

May 28, 2008. Filed under javascript 18 processing-js 9

John Resig was generous enough to mention Processed Tower Defense, and I decided to briefly celebrate this afternoon by adding the big missing pieces of functionality: tower upgrades and different types of creeps.

Go play around a bit, and then come back if you're curious about the details.


There are now four types of creeps: Normal, Fiz, Buzz, and FizBuzz. If you're a programmer, that may be enough to tip you off to when they'll occur, but if not its just a meager joke of sorts. FizBuzz creeps occur on waves divisible by fifteen, Buzz creeps occur on waves divisible by five (except those divisible by fifteen), Fiz creeps occur on waves divisible by three (except for those divisible by fifteen), and Normal creeps occur on all other waves.

Here are the differences for these new types of creeps:

var FizCreep = function(wave) {
  var fc = Creep(wave);
  fc.color = color(0,255,255);
  fc.size = fc.size * 1.3;
  fc.hp = fc.hp * 2;
  fc.value = fc.value * 1.5;
  fc.speed = fc.speed * 0.75;
  return fc;

var BuzzCreep = function(wave) {
  var bc = Creep(wave);
  bc.color = color(100,150,50);
  bc.speed = bc.speed * 1.5;
  bc.hp = bc.hp * .75;
  bc.size = bc.size * 0.9;
  bc.value = bc.value * 1.25;
  return bc;

var FizBuzzCreep = function(wave) {
  var fbc = Creep(wave);
  fbc.color = color(255,100,150);
  fbc.size = fbc.size * 1.5;
  fbc.hp = fbc.hp * 10;
  fbc.value = fbc.value * 10;
  return fbc;

In other words, Fiz have lots of hp and are slow. Buzz are quick but with lower hp, and FizBuzz are extremely tough bosses. Also, they each have their own wave code:

var FizCreepWave = function(settings) {
  var fcw = CreepWave(settings);
  fcw.spawn_creep = function() { FizCreep(this.wave);  }
  SET.creep_variety = "Fiz Creeps";
  return fcw;

var BuzzCreepWave = function(settings) {
  var fcw = CreepWave(settings);
  fcw.spawn_creep = function() { BuzzCreep(this.wave);  }
  SET.creep_variety = "Buzz Creeps";
  return fcw;

var FizBuzzCreepWave = function(settings) {
  var fcw = CreepWave(settings);
  fcw.remaining = 1;
  fcw.spawn_creep = function() { FizBuzzCreep(this.wave);  }
  SET.creep_variety = "FizBuzz Creeps";
  return fcw;

Pretty much just boilerplate extension of the original CreepWave, except that the FizBuzzCreepWave only spawns one creep (since its so tough to kill).

Tower Upgrades

Tower upgrades were a bit more troublesome to implement, entirely because I am drawing much of the UI using HTML widgets (a decision I reached because text rendering support is limited for the canvas). Regardless, they are working. To upgrade a tower, click on it, and then use the upgrade button that appears in the right hand side (underneath its current statistics).

The two towers upgrade a bit differently. First lets look at the Missile Tower.

mt.upgrade = function() {
  if (SET.gold >= this.upgrade_cost) {
    SET.gold -= this.upgrade_cost;
    this.upgrade_cost = this.upgrade_cost * 2;
    this.damage = this.damage * 1.5;
    this.set_range(this.range + 0.5);

Its firing rate doesn't improve at all, but its range increases substantially with each upgrade. Its damage doesn't increase quite as quickly as the laser tower, but it doesn't really matter since its initial damage is ten times higher.

Next, a glimpse at the Laser Tower.

lt.upgrade = function() {
  if (SET.gold >= this.upgrade_cost) {
    SET.gold -= this.upgrade_cost;
    this.upgrade_cost = this.upgrade_cost * 1.5;
    this.damage = this.damage * 2.0;
    this.set_range(this.range + 0.25);
    this.reload_rate = this.reload_rate - 10;

The Laser Tower's damage rate increases quickly, and its range moves up a bit as well. In addition, its reload rate drops by 10 milliseconds with each upgrade (it starts out with a 250 ms reload rate), which is a handy improvement. If you managed to upgrade a Laser Tower twenty five times, then it would fire a new laser each time the rendering loop is processed. Then again, the framerate is only 60 frames per second, so it would actually max out its effective firing rate with a mere twenty four upgrades instead.

The Future

Well, I never really intended to keep working on PTD, but its kind of a dull game and I figured I would make it slightly more exciting for anyone unfortunate enough to find it. Once again, I don't really have any clear intentions of continuing work on it, but it might happen if anyone is particularly interested.

Things that I would probably want to implement, in no particular order:

  1. More tower types. Probably something involving small ellipses (gattling?) and large ellipses (cannon). Also some of the tactical towers wouldn't be so hard to implement (slowing, damage over time, tower enhancers, etc), and would add some interest to the game as well.

  2. More types of creep waves. Release the creeps faster sometimes. Sometimes have a fix of creep types.

  3. Vary the number of entrance squares, doubling or tripling the number of creeps.

  4. More arcade type elements, such as a powerful tower that must be player controlled, etc.

  5. It would be nice to have a high score board, although it would be hopelessly impossible to trust, since anyone with FireFox would be able to open the console and just submit a score. You can get relatively tricky about these things, calclating the expected score from number of towers/remaining gold and so on, but regardless of the level of sophistication of the anti-cheating I can't imagine passing the "five minute glance" test by a JavaScript programmer. This is certainly one of the disadvantages of development a JavaScript game.

  6. Pathfinding AI for the creeps. It would be nice if the creeps occasionally did more than walk in a straight line.

  7. I'd really enjoy having support for displaying multiple tower killzones at once. See the full coverage of your towers.

Anyway, hope the game is a bit more interesting now.