Applying Old-School Video Game Techniques in Modern Web Games - HTML5 Game Development Insights - page 133

Figure 8-11. If you have three different images, you can merge them together in memory and handle them as a single,
unified, layer
In order to show how this would work, let's start by defining some variables that you'll be using to demonstrate
how to implement the bouncing ball example (see Listing 8-25).
Listing 8-25. Defining Variables to Implement the Bouncing Ball Example
var ballRadius = 20, // Set the radius of the ball
ballVelocityX = 15, // Velocity of the ball in the X axis
ballVelocityY = 15, // Velocity of the ball in the Y axis
ballPositionX = canvas.width / 2, // Position of the ball in the X axis
ballPositionY = canvas.height / 2; // Position of the ball in the Y axis
Now you're going to create a paintBall() function that paints the ball in the canvas; see Listing 8-26.
Listing 8-26. paintball() Function
function paintBall(ctx, r, x, y) {
// Set the background colour to yellow
ctx.fillStyle = '#ff0';
// Draw the circle
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
// Make sure to trigger a repaint
shouldRepaint = true;
}