HTML5 Canvas [148]
Once the ship is rotated to the desired direction, the player can thrust it forward by pressing the up arrow key. This thrust will accelerate the player ship only while the key is pressed. Since we know the rotation of the ship, we can easily calculate the angle of the rotation. We will then add new movingX and movingY values to the ship’s x and y attributes to move it forward.
First, we must change the rotation value from degrees to radians:
var angleInRadians = rotation * Math.PI / 180;
You have seen this before—it’s identical to how we calculated the rotation transformation before it was applied to the player ship.
Once we have the angle of the ship’s rotation, we must calculate the facingX and facingY values for this current direction. We only do this when we are going to thrust because it is an expensive calculation, processor-wise. We could calculate these each time the player changes the ship’s rotation, but doing so would add unnecessary processor overhead:
facingX = Math.cos(angleInRadians);
facingY = Math.sin(angleInRadians);
Once we have values on the x and y axes that represent the direction the player ship is currently facing, we can calculate the new movingX and movingY values for the player:
movingX = movingX+thrustAcceleration*facingX;
movingY = movingY+thrustAcceleration*facingY;
To apply these new values to the player ship’s current position, we need to add them to its current x and y positions. This does not occur only when the player presses the up key. If it did, the player ship would not float; it would only move when the key was pressed. We must modify the x and y values on each frame with the movingX and movingY values:
x = x+movingX;
y = y+movingY;
Redrawing the player ship to start at angle 0
As you may recall, when we first drew the image for our player ship, we had the point end (the top) of the ship pointing up. We did this for ease of drawing, but it’s not really the best direction in which to draw our ship when we intend to apply calculations for rotational thrust. The pointing-up direction is actually the -90 (or 270) degree angle. If we want to leave everything the way it currently is, we will need to modify the angleInRadians calculation to look like this:
var angleInRadians = (Math.PI * (player.rotation -90 ))/ 180;
This is some ugly code, but it works fine if we want our player ship to be pointing up before we apply rotation transformations. A better method is to keep the current angleInRadians calculation but draw the ship pointing in the actual angle 0 direction (to the right). Figure 8-5 shows how we would draw this.
Figure 8-5. The player ship drawn at the 0 degree rotation
The drawing code for this direction would be modified to look like this:
//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);
Controlling the Player Ship with the Keyboard
We will add in two keyboard events and an array object to hold the state of each key press. This will allow the player to hold down a key and have it repeat without a pause. Arcade games require this type of key-press response.
The array to hold our key presses
An array will hold the true or false value for each keyCode associated with key events. The keyCode will be the index of the array that will receive the true or false value:
var keyPressList = [];
The key events
We will use separate events for both key down and key up. The key down event will put a true value in the keyPressList array at the index associated with the event’s keyCode. Conversely, the key up event will place a false in that array index:
document.onkeydown = function(e){
e=e?e:window.event;
//ConsoleLog.log(e.keyCode + "down");
keyPressList[e.keyCode] = true;
}
document.onkeyup = function(e){
//document.body.onkeyup=function(e){
e = e?e:window.event;
//ConsoleLog.log(e.keyCode + "up");
keyPressList[e.keyCode] = false;
};
Evaluating key presses
Our game