HTML5 Canvas, 2nd Edition

Rendering the Other Game Objects

The rocks, saucers, missiles, and particles are all rendered in a manner similar to the method implemented for the player ship. Let’s first look at the code for the saucer’s render function.

Rendering the saucers

The saucers do not have a multiple-cell tile sheet, but to be consistent, we render them as though they do. This allows us to add more animation tiles for the saucers later:

function renderSaucers() {
   var tempSaucer = {};
   var saucerLength = saucers.length-1;
   for (var saucerCtr=saucerLength;saucerCtr>=0;saucerCtr--){
      //ConsoleLog.log("saucer: " + saucerCtr);
      tempSaucer = saucers[saucerCtr];

      context.save(); //save current state in stack
      var sourceX = 0;
      var sourceY = 0;
      context.drawImage(saucerTiles, sourceX, sourceY, 30, 15,
      tempSaucer.x,tempSaucer.y,30,15);
      context.restore(); //pop old state on to screen
   }
}

There is no need to calculate the sourceX and sourceY values for the saucer because the saucer is only a single tile. In this instance, we can just set them to 0. We have hardcoded the saucer.width (30) and saucer.height (15) as an example, but with all the rest of the game objects, we use the object width and height attributes rather than literals.

Next, let’s look at the rock rendering, which varies slightly from both the player ship and the saucers.

Rendering the rocks

The rock tiles are contained inside three tile sheets based on their size (large, medium, and small), and we have used only five tiles for each rock. The rocks are square ...