• Choose a category
• All
• Classic-Fiction

render();

}

function checkKeys() {

//check keys

if (keyPressList[38]==true){

//thrust

var angleInRadians = rotation * Math.PI / 180;

facingX = Math.cos(angleInRadians);

facingY = Math.sin(angleInRadians);

movingX = movingX+thrustAcceleration*facingX;

movingY = movingY+thrustAcceleration*facingY;

}

if (keyPressList[37]==true) {

//rotate counterclockwise

rotation−=rotationalVelocity;

}

if (keyPressList[39]==true) {

//rotate clockwise

rotation+=rotationalVelocity;;

}

}

function update() {

x = x+movingX;

y = y+movingY;

}

function render() {

//draw background and text

context.fillStyle = '#000000';

context.fillRect(0, 0, 200, 200);

context.fillStyle = '#ffffff';

context.font = '20px _sans';

context.textBaseline = 'top';

context.fillText ("render/update", 0, 180);

//transformation

var angleInRadians = rotation * Math.PI / 180;

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(x+.5*width,y+.5*height);

context.rotate(angleInRadians);

//drawShip

context.strokeStyle = '#ffffff';

context.beginPath();

//hardcoding in locations

//facing right

context.moveTo(−10,−10);

context.lineTo(10,0);

context.moveTo(10,1);

context.lineTo(−10,10);

context.lineTo(1,1);

context.moveTo(1,−1);

context.lineTo(−10,−10);

context.stroke();

context.closePath();

//restore context

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

}

const FRAME_RATE = 40;

var intervalTime = 1000/FRAME_RATE;

setInterval(appStateGamePlay, intervalTime );

We left out the entire application state machine from Example 8-9 to save space. In Example 8-10, we are simply showing what the gameStatePlayLevel() function might look like.

In the section Putting It All Together, we will go into this in greater detail as we start to build out the entire application.

The FrameRateCounter Object Prototype

Arcade games such as Asteroids and Geo Blaster Basic rely on fast processing and screen updates to ensure all game-object rendering and game-play logic are delivered to the player at a reliable rate. One way to tell whether your game is performing up to par is to employ the use of a frame rate per second (FPS) counter. Below is a simple one that can be reused in any game you create on the canvas:

//*** FrameRateCounter object prototype

function FrameRateCounter() {

this.lastFrameCount = 0;

var dateTemp = new Date();

this.frameLast = dateTemp.getTime();

delete dateTemp;

this.frameCtr = 0;

}

FrameRateCounter.prototype.countFrames=function() {

var dateTemp = new Date();

this.frameCtr++;

if (dateTemp.getTime() >=this.frameLast+1000) {

ConsoleLog.log("frame event");

this.lastFrameCount = this.frameCtr;

this.frameLast = dateTemp.getTime();

this.frameCtr = 0;

}

delete dateTemp;

}

Our game will create an instance of this object and call the countFrames() function on each frame tick in our update() function. We will write out the current frame rate in our render() function.

Example 8-11 shows these functions by adding code to Example 8-10. Make sure you add the definition of the FrameRateCounter prototype object to the code in Example 8-10 under the canvasApp() function but before the final