How to Create Tanks in Your HTML5 Game - dummies

How to Create Tanks in Your HTML5 Game

By Andy Harris

This type of game gives you some sort of launch mechanism for your HTML5 game with semi-realistic physics, and has you launch projectiles (avians with anger issues or otherwise) at some sort of target.


Tanks, turrets, and shells

The most interesting thing about a tank-style game is the relationship between the tank, its turret, and the bullets it fires.

The tank is a sprite, but the tank image doesn’t include a turret. The turret is a separate sprite intended to be linked to the tank and rotated on its own. When the player moves the tank, the turret moves with it. When the user rotates the turret, the turret rotates, but the tank doesn’t.

The bullet is a third sprite, which appears when the user fires the tank. The bullet’s initial position is determined by the tank’s position, and the bullet’s initial motion angle is determined by the turret’s angle.

Here’s the code for the tank:

 function UserTank(){
  tTank = new Sprite(game, "greenTank.png", 50, 25);
  tTank.setPosition(100, 550);
  tTank.turret = new Sprite(game, "turret.png", 50, 25);
  tTank.bullet = new Bullet(tTank);
  tTank.checkKeys = function(){
   if (keysDown[K_A]){
   if (keysDown[K_D]){
   //always move turret with me.
   this.turret.setPosition(this.x, this.y);
   //rotate turret
   if (keysDown[K_W]){
    if (this.turret.getImgAngle() < 0){
    } // end if
   if (keysDown[K_S]){
    if (this.turret.getImgAngle() > 90){
   if (keysDown[K_SPACE]){;
  } // end checkKeys
  return tTank;
 } // end tank

The tank design is mildly complicated by having a dependent turret sprite, and a bullet sprite. Here’s how to build this mish-mash of armored sprite goodness:

  1. Build the tank sprite first.

    As with most examples in simpleGame, begin by building a temporary sprite for the tank (called tTank).

  2. Build a turret sprite.

    The turret is a second sprite. It is a property of the tank, as well as a sprite in its own right. The turret is fairly simple, so it can be a stock sprite. It does not need to be a complete subclass.

  3. Build a bullet sprite.

    Each tank has a sprite and a bullet. The bullet will need some specific behaviors, so it will be a subclass of the Sprite object. For now, just know that the tank will need a bullet. Note that the bullet will need to know which tank it belongs to.

  4. Read the keyboard.

    The tank is currently set to use the WASD keys for input.

  5. Move the tank left and right.

    The left and right controls move the tank sprite itself. Move the turret so its center is always the same as the tank’s center. This causes the turret to always move with the tank.

  6. Rotate the turret.

    The up and down controls cause the turret to rotate. Set minimum and maximum values to keep the turret within a reasonable range of angles.

  7. Fire the bullet.

    On the fire command (space bar by default), invoke the bullet’s fire() method. (Of course, you’ll need to write that in the Bullet class.)

  8. Update the turret.

    Up to now, all update() calls have happened in the main update() function. However, the main game doesn’t really need to update the turret. Because the turret is part of the tank, updating the tank should update the turret. Because the checkKeys() method will happen every frame, update the turret to ensure that it draws correctly.

  9. Move the bullet.

    If a bullet is active, use the checkGravity() method to track its current course while taking gravitational pull into account. If there is no bullet currently active, this line will be ignored.

  10. Update the bullet.

    Again, the bullet feels like part of the tank, so it should be updated automatically.

How to build a bullet

The bullet class will be fired by a tank. The bullet is a surprisingly sophisticated class, as it needs a fire() method (which will fire the bullet based on the tank and turret’s current situation) and a checkGravity() method (which plots the bullet’s trajectory in space).

Here’s the Bullet class code:

 function Bullet(owner){
  //owner is the tank owning this bullet
  tBullet = new Sprite(game, "bullet.png", 5, 5);
  tBullet.owner = owner;
  tBullet.setBoundAction(DIE); = function(){
   //begin at center of my tank
   //pointing in tank turret's direction
   this.setPosition(this.owner.x, this.owner.y);
  } // end fire
  tBullet.checkGravity = function(){
   this.addVector(180, 1);
  } // end checkGravity
  return tBullet;
 } // end bullet

Here’s the life story of a bullet in a game:

  1. Specify the owner tank.

    When this game has multiple tanks firing at each other (which it clearly needs), there should be a lot of bullets flying around. Each bullet will need to know which tank it belongs to so it can fire from the right position in the right direction.

  2. Hide.

    The Bullet object is created at the very beginning of the game, but it spends most of its life hidden away unseen. One of the first things you do is hide the bullet so it will be visible only after it’s fired.

  3. Set boundary action to DIE.

    Bullets typically die when they reach the end of the screen. The sprite is not removed from memory. It simply isn’t displayed on the screen and doesn’t respond to collisions. Setting the boundary action to DIE will cause the desired behavior.

  4. Fire from the owning tank’s position.

    When the bullet is fired, place it at the owning tank’s position.

  5. Set the movement angle to the owning tank’s turret angle.

    The turret’s main job is to indicate which angle is used as the bullet’s starting trajectory.

  6. Provide a large movement speed.

    Bullets should move quickly, so set an initial velocity of 20 pixels per frame. (You can add another control to allow the user to modify the initial velocity if you wish.)

  7. Reveal the bullet.

    Invoke the bullet’s show() method to make the bullet appear on the screen.

  8. Check for gravity.

    All this function does is compensate for gravitational pull with the addVector() method.