Foundation Game Design with HTML5 and JavaScript question

[lawalm]

The Alien Armada Code chapter 09. The JS file is called alienArmada_title.js. Why is the title screen not visible. Below is the code from your examples.

(function(){

//The canvas var canvas = document.querySelector("canvas");

//Create the drawing surface var drawingSurface = canvas.getContext("2d");

//Arrays to store the game objects and assets to load var sprites = []; var assetsToLoad = []; var messages = [];

//Create the background var background = Object.create(spriteObject); background.x = 0; background.y = 0; background.sourceY = 32; background.sourceWidth = 480; background.sourceHeight = 320; background.width = 480; background.height = 320; sprites.push(background);

//Create the cannon and center it var cannon = Object.create(spriteObject); cannon.x = canvas.width / 2 - cannon.width / 2; cannon.y = 280; sprites.push(cannon);

//Load the tilesheet image var image = new Image(); image.addEventListener("load", loadHandler, false); image.src = "../images/alienArmada.png"; assetsToLoad.push(image);

//Variable to count the number of assets the game needs to load var assetsLoaded = 0;

//Game states var LOADING = 0 var PLAYING = 1; var OVER = 2; var gameState = LOADING;

//Arrow key codes var RIGHT = 39; var LEFT = 37;

//Directions var moveRight = false; var moveLeft = false;

//Add keyboard listeners window.addEventListener("keydown", function(event) { switch(event.keyCode) { case LEFT: moveLeft = true; break;

  case RIGHT:
    moveRight = true;

} }, false);

window.addEventListener("keyup", function(event) { switch(event.keyCode) {
case LEFT: moveLeft = false; break;

  case RIGHT:
    moveRight = false;

} }, false);

//Start the game animation loop update();

function update() { //The animation loop requestAnimationFrame(update, canvas);

//Change what the game is doing based on the game state switch(gameState) { case LOADING: titleScreen();
break;

case PLAYING:
  playGame();
  break;

case OVER:
  endGame();
  break;

}

//Render the game render(); }

function titleScreen() { drawingSurface.fillStyle = '#000000'; drawingSurface.fillRect(0, 0, 200, 200); drawingSurface.fillStyle = '#ffffff'; drawingSurface.font = '20px sans-serif'; drawingSurface.textBaseline = 'top'; drawingSurface.fillText('Alien Armada', 50, 90); }

function loadHandler() { assetsLoaded++; if(assetsLoaded === assetsToLoad.length) { //Remove the load event listener image.removeEventListener("load", loadHandler, false); //Start the game gameState = PLAYING; } }

function playGame() { //Left if(moveLeft && !moveRight) { cannon.vx = -8; } //Right if(moveRight && !moveLeft) { cannon.vx = 8; }

//Set the cannon's velocity to zero if none of the keys are being pressed if(!moveLeft && !moveRight) { cannon.vx = 0; }

//Move the cannon and keep it within the screen boundaries cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); }

function endGame() { //Empty for now }

function render() { drawingSurface.clearRect(0, 0, canvas.width, canvas.height);

//Display the sprites if(sprites.length !== 0) { for(var i = 0; i < sprites.length; i++) { var sprite = sprites[i]; drawingSurface.drawImage ( image, sprite.sourceX, sprite.sourceY, sprite.sourceWidth, sprite.sourceHeight, Math.floor(sprite.x), Math.floor(sprite.y), sprite.width, sprite.height ); } }

if(messages.length !== 0) { for(var i = 0; i < messages.length; i++) { var message = messages[i]; if(message.visible) { drawingSurface.font = message.font;
drawingSurface.fillStyle = message.fillStyle; drawingSurface.textBaseline = message.textBaseline; drawingSurface.fillText(message.text, message.x, message.y);
} } }
}

}());