HTML5 Canvas [147]
*/
context.stroke();
context.closePath();
//restore context
context.restore(); //pop old state on to screen
//add to rotation
rotation++;
}
Alpha Fading the Player Ship
When a new player ship in Geo Blaster Basic enters the game screen, we will have it fade from transparent to opaque. Example 8-7 shows how we will create this transformation in our game.
Using the context.globalAlpha attribute
To use the context.globalAlpha attribute of the canvas, we simply set it to a number between 0 and 1 before we draw the game graphics. We will create a new variable in our code called alpha, which will hold the current alpha value for our player ship. We will increase it by .01 until it reaches 1. When we actually create our game we will stop it at 1 and then start the game level. However, for this demo, we will just repeat it over and over.
Example 8-7. Alpha fading to the player ship
//canvasApp level variables
var x = 50;
var y = 50;
var width = 20;
var height = 20;
var alpha = 0;
context.globalAlpha = 1;
function drawScreen() {
context.globalAlpha = 1;
context.fillStyle = '#000000';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#ffffff';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText ("Player Ship - alpha", 0, 180);
context.globalAlpha = alpha;
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);
//drawShip
context.strokeStyle = '#ffffff';
context.beginPath();
//hardcoding in locations
context.moveTo(0,-10);
context.lineTo(9,9);
context.lineTo(0,-1);
context.moveTo(-1,-1);
context.lineTo(-10,9);
context.lineTo(-1,-10);
context.stroke();
context.closePath();
//restore context
context.restore(); //pop old state on to screen
//add to rotation
alpha+=.01;
if (alpha > 1) {
alpha=0;
}
}
Game Object Physics and Animation
All of our game objects will move on a two-dimensional plane. We will use basic directional movement vectors to calculate the change in the x and y coordinates for each game object. At its very basic level, we will be updating the delta x (dx) and delta y (dy) of each of our game objects on each frame to simulate movement. These dx and dy values will be based on the angle and direction in which we want the object to move. All of our logical display objects will add their respective dx and dy values to their x and y values on each frame of animation. The player ship will not use strict dx and dy because it needs to be able to float and turn independently. Let’s take a closer look at the player movement now.
How Our Player Ship Will Move
Our player ship will change its angle of center axis rotation when the game player presses the left and right arrow keys. When the game player presses the up arrow key, the player ship will accelerate (thrust) in the angle it is facing. Because there is no friction applied to the ship, it will continue to float in the current accelerated angle until a different angle of acceleration is applied. This happens when the game player rotates to a new angle and presses the up (thrust) key once again.
The difference between facing and moving
Our player ship can rotate to the direction it is facing while it is moving in a different direction. For this reason, we cannot simply use classic dx and dy values to represent the movement vector on the x and y axes. We must keep both sets of values for the ship at all times. When the player rotates the ship but does not thrust it, we need to draw the ship in the new rotated angle. All missile projectiles the ship fires must also move in the direction the ship is facing. On the x-axis, we will name this value facingX; on the y-axis, it’s facingY. movingX and movingY values will handle moving the ship in the direction it was pointed in when the thrust was applied. All four values are needed to thrust the ship in a new direction. Let’s take a look at this next.
Thrusting