HTML5 Canvas, 2nd Edition

Rock Object Prototype

To conserve space, we did not create separate object prototypes for the various display objects in this game. However, Example 8-12 is a Rock prototype object that can be used in a game such as Geo Blaster Basic.

Example 8-12. The Rock.js prototype

//*** Rock Object Prototype

function Rock(scale, type) {

   //scale
   //1 = large
   //2 = medium
   //3 = small
   //these will be used as the divisor for the new size
   //50/1 = 50
   //50/2 = 25
   //50/3 = 16

   this.scale = scale;
   if (this.scale <1 || this.scale >3){
      this.scale=1;
   }
   this.type = type;
   this.dx = 0;
   this.dy = 0;
   this.x = 0;
   this.y = 0;
   this.rotation = 0;
   this.rotationInc = 0;
   this.scoreValue = 0;

   //ConsoleLog.log("create rock. Scale=" + this.scale);
   switch(this.scale){

      case 1:
         this.width = 50;
         this.height = 50;
         break;
      case 2:
         this.width = 25;
         this.height = 25;
         break;
      case 3:
         this.width = 16;
         this.height = 16;
         break;
   }

}

Rock.prototype.update = function(xmin,xmax,ymin,ymax) {
   this.x += this.dx;
   this.y += this.dy;
   this.rotation += this.rotationInc;
   if (this.x > xmax) {
      this.x = xmin-this.width;
   }else if (this.x<xmin-this.width){
      this.x = xmax;
   }

   if (this.y > ymax) {
      this.y = ymin-this.width;
   }else if (this.y<ymin-this.width){
      this.y = ymax;
   }
}

Rock.prototype.draw = function(context) {

   var angleInRadians = this.rotation * Math.PI / 180;
   var halfWidth = Math.floor(this.width*.5); //used to find center of object
   var halfHeight = Math.floor(this.height*.5)// used to find center of object
   context.save(); //save current state in ...