Canvas Game Essentials - HTML5 Canvas - page 445

//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.