HTML and CSS Reference
In-Depth Information
if (tempRock.rotation > 4){
tempRock.rotation = 0;
}else if (tempRock.rotation <0){
tempRock.rotation = 4;
}
}
You will notice that we have hardcoded the values
4
and
0
into the tile id maximum
and minimum checks. We could have just as easily used a constant or two variables for
this purpose.
Rendering the missiles
Both the player missiles and saucer missiles are rendered in the same manner. For each,
we simply need to know the tile id on the four-tile
particleTiles
image representing
the tile we want to display. For the player missiles, this tile id is
1
; for the saucer missile,
the tile id is
0
.
Let's take a quick look at both of these functions:
function renderPlayerMissiles() {
var tempPlayerMissile = {};
var playerMissileLength = playerMissiles.length-1;
//ConsoleLog.log("render playerMissileLength=" + playerMissileLength);
for (var playerMissileCtr=playerMissileLength; playerMissileCtr>=0;
playerMissileCtr--){
//ConsoleLog.log("draw player missile " + playerMissileCtr)
tempPlayerMissile = playerMissiles[playerMissileCtr];
context.save(); //save current state in stack
var sourceX = Math.floor(1 % 4) * tempPlayerMissile.width;
var sourceY = Math.floor(1 / 4) * tempPlayerMissile.height;
context.drawImage(particleTiles, sourceX, sourceY,
tempPlayerMissile.width,tempPlayerMissile.height,
tempPlayerMissile.x,tempPlayerMissile.y,tempPlayerMissile.width,
tempPlayerMissile.height);
context.restore(); //pop old state on to screen
}
}
function renderSaucerMissiles() {
var tempSaucerMissile = {};
var saucerMissileLength = saucerMissiles.length-1;
//ConsoleLog.log("saucerMissiles= " + saucerMissiles.length)
for (var saucerMissileCtr=saucerMissileLength;
saucerMissileCtr >= 0;saucerMissileCtr--){
//ConsoleLog.log("draw player missile " + playerMissileCtr)
tempSaucerMissile = saucerMissiles[saucerMissileCtr];
context.save(); //save current state in stack
var sourceX = Math.floor(0 % 4) * tempSaucerMissile.width;
var sourceY = Math.floor(0 / 4) * tempSaucerMissile.height;
