How to Add Missiles to Objects in Your HTML5 Game - dummies

How to Add Missiles to Objects in Your HTML5 Game

By Andy Harris

Car dealerships are touchy about installing weaponry in your ride, but that’s why people become game programmers. So you can add missiles to your HTML5 game objects. If you want missiles in your mini-van, you’ll have missiles (at least in the virtual minivan). Lots of video games involve shooting, and that’s a pretty easy effect to add.

image0.jpg

Projectile basics for your game

Missiles, bullets, and other projectiles are pretty easy to work with. Here are a few ideas to keep in mind:

  • The projectile is a sprite. Make a new sprite for the projectile. You can make it a simple dot, or draw a complete missile.

  • Make a custom sprite for the missile. The missile will need some methods, so you might as well make it a custom sprite.

  • Missiles die when they leave the screen. The easiest way to get this behavior is to set the missile’s boundAction to DIE.

  • Add a fire() method. The fire() method will activate when the missile is fired.

  • Reuse the same missile over and over. Old missiles never die. They are just hidden and reused when the user shoots again. When a missile hits something, hide the missile. That will make it invisible and impervious to collisions.

How to launch your game missiles

The code for missile.html is like much of the standard car code you’ve seen:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>missile.html</title>
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
  var game;
  var car;
  var missile;
  function Car(){
   tCar = new Sprite(game, "car.png", 50, 30);
   tCar.setSpeed(3);
   tCar.setAngle(135);
   tCar.checkKeys = function(){
    if (keysDown[K_LEFT]){
     this.turnBy(-5);
    }
    if (keysDown[K_RIGHT]){
     this.turnBy(5);
    }
    if (keysDown[K_SPACE]){
     missile.fire();
    }
   } // end checkKeys
   return tCar;
  } // end car def
  function Missile(){
  tMissile = new Sprite(game, "missile.png", 30,20);
  tMissile.hide();
  tMissile.fire = function(){
   this.show();
   tMissile.setSpeed(15);
   this.setBoundAction(DIE);
   this.setPosition(car.x, car.y);
   this.setAngle(car.getImgAngle());
   this.setImage("missile.png");
   this.setSpeed(15);
  } // end fire
  return tMissile;
  } // end missile def
  function init(){
   game = new Scene();
   car = new Car();
   missile = new Missile();
   game.start();
  } // end init
  function update(){
   game.clear();
   car.checkKeys();
   car.update();
   missile.update();
  } // end update
 </script>
</head>
<body onload = "init()">
</body>
</html>

Projectiles are lots of fun to build, and they aren’t very difficult, as shown here:

  1. Build a normal sprite to launch the projectile.

    This isn’t absolutely necessary, but normally a bullet will be fired from a gun, an arrow will be fired from a bow, and a nuclear banana rocket will be fired from whatever vehicle has that sort of thing.

  2. The projectile will be its own sprite.

    The projectile works just like an ordinary sprite, but it will be created and destroyed dynamically.

  3. Add a trigger to fire the missile.

    Because the car will launch the missile, the trigger code is in the car’s checkKeys method.

  4. Set the missile to be hidden by default.

    The missile is always around, but it’s hidden offstage when it isn’t needed. If you invoke a sprite’s hide() method, that sprite will still be in memory, but it won’t be drawn, and it won’t trigger any collisions.

  5. Create a fire() method for the missile.

    The missile is sitting around waiting to be activated. The fire() method springs the missile into action.

  6. Make the projectile visible.

    The show() method is the opposite of hide(). It causes a sprite to be visible and trigger collisions.

  7. Give the missile a quick initial speed.

    As you know, missiles are normally fast.

  8. Hide the missile when it hits the edge.

    When the missile hits the edge of the screen, it needs to be hidden. Setting the missile’s boundAction to DIE will make this behavior automatic.

  9. Hide the missile if it hits anything else.

    This simple example doesn’t have any other objects, but if the missile collides with something else, invoke its hide() method to simulate the missile being destroyed on contact.

After you have the ordinary missile behavior working, you can try a number of interesting variations:

  • Add gravity to the missiles. If it’s a side scroller, add a gravitational force to your missiles for a worm-like effect.

  • Add other physics to missiles. You can make the missiles have drag like any other sprite.

  • Make a smart missile. Use the angleTo method to determine the angle between a missile and a target, and turn the missile toward the target on every frame. This will simulate a smart missile that never misses. (A great power-up, but it makes the game too easy if you have too many.)

  • Make a not-so-smart missile. If the enemy is firing a missile at the player, you don’t want it quite so smart. First, make the missile slow enough that it can be outrun. Second, put barriers that can destroy the missile in the way. Third, make the missile smart only once in a while so that it checks for the position of the target once every five or ten frames.