Canvas Game Essentials - HTML5 Canvas - page 405

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” on page 407 , we will go into this in greater
detail as we start to build out the entire application.