• Choose a category
• All
• Classic-Fiction

ConsoleLog.log("frame event");

this.lastFrameCount = this.frameCtr;

this.frameLast = dateTemp.getTime();

this.frameCtr = 0;

}

delete dateTemp;

}

Figure 8-7 shows a screenshot of the game in action.

Figure 8-7. Geo Blaster Basic in action

Rock Object Prototype

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

Example 8-13. 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.xthis.x = xmax;

}

if (this.y > ymax) {

this.y = ymin-this.width;

}else if (this.ythis.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 stack

context.setTransform(1,0,0,1,0,0); // reset to identity

//translate the canvas origin to the center of the player

context.translate(this.x+halfWidth,this.y+halfHeight);

context.rotate(angleInRadians);

context.strokeStyle = '#ffffff';

context.beginPath();

//draw everything offset by 1/2. Zero Relative 1/2 is if .5*width -1. Same for height

context.moveTo(-(halfWidth-1),-(halfHeight-1));

context.lineTo((halfWidth-1),-(halfHeight-1));

context.lineTo((halfWidth-1),(halfHeight-1));

context.lineTo(-(halfWidth-1),(halfHeight-1));

context.lineTo(-(halfWidth-1),-(halfHeight-1));

context.stroke();

context.closePath();

context.restore(); //pop old state on to screen

}

//*** end Rock Class

What’s Next

We covered quite a bit in this chapter. HTML5 Canvas might lack some of the more refined features common to web game development platforms such as Flash, but it contains powerful tools for manipulating the screen in immediate mode. These features allow us to create a game application with many individual logical display objects—even though each canvas can support only a single physical display object (the canvas itself).

In Chapter 9 we will explore some more advanced game topics, such as replacing paths with bitmap images, creating object pools, and adding a sound manager. We’ll extend the game we built in this chapter and create a new turn-based strategy game.

Chapter 9. Combining Bitmaps and Sound

Geo Blaster Basic was constructed using pure paths for drawing. In its creation, we began to cover some game-application-related topics, such as basic collision detection and state machines. In this chapter, we will focus on using bitmaps and tile sheets for our game graphics, and we will also add sound using techniques introduced in Chapter 7.

Along the way, we will update the FrameRateCounter from Chapter 8 by adding in a “step timer.” We will also examine how we can eliminate the use of a tile sheet for rotations by precreating an array of imageData instances using the