Stage 7: Heath and Score

This stage introduces us to writing text onto our <canvas>. We could create a function to draw the score and health but let’s just add the code into our run loop updateGame().

Before we do that, we need to create two variables score and health. Place these at the start of our code in the global variables section:

var ctx;
var canvasWidth = 900;
var canvasHeight = 800;
var landscape1;
var landscape2;
var landscape3;
var numResources = 17;
var loadProgress = 0;
var enemy1;
var enemy2;
var enemy3;
var player;
var bulletSpeed = -6;
var bulletArray = [];
var maxBullets = 10;
var score = 0;
var health = 3;

Whenever our player shoots an enemy we will update our score so we need to increment our score whenever the bullet collision is true, add these lines after we set our bullet to inactive:

function checkEnemyCollision(object1, object2) {
  if ((object2.x + object2.width / 2 > object1.x) && (object2.x + object2.width / 2 < object1.x + object1.width) && (object2.y + object2.height / 2 > object1.y) && (object2.y + object2.height / 2 < object1.y + object1.height)) {
    object1.y = -200;
    object1.x = 30 + Math.random() * (canvasWidth - object1.width - 30);
    player.score = player.score + 1;
    if ((player.score % 20 == 0)) {
      enemy1.yspeed = enemy1.yspeed + 1;
      enemy2.yspeed = enemy2.yspeed + 1;
      enemy3.yspeed = enemy3.yspeed + 1;
    }
  }
}

Update our run loop, updateGame(), to draw our current score and health:

function updateGame() {
  requestID = requestAnimationFrame(updateGame);
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  landscape1.update();
  landscape2.update();
  landscape3.update();
  enemy1.update();
  enemy2.update();
  enemy3.update();
  player.update();
  for (var i = 0; i < maxBullets; i++) {
      if (bulletArray[i].active) {
          bulletArray[i].update();
      }
  }

  ctx.font = "30px Arial";
  ctx.fillStyle = 'white';
  ctx.fillText("Health: " + health, canvasWidth - 140, 40);
  ctx.fillText("Score: " + player.score, 20, 40);
}

Run your code to check that your score goes up each time you shoot an enemy.

Whenever the player collides with an enemy we need to subtract 1 from our health. If the players health reaches zero we will end the game by calling the endGame() function. Do this now, update our checkPlayerCollision() code with the extra lines below:

function checkPlayerCollision(playerObject, enemyObject) {
  if ((playerObject.xcenter > enemyObject.x) && (playerObject.xcenter < enemyObject.x + enemyObject.width) && (playerObject.ycenter > enemyObject.y) && (playerObject.ycenter < enemyObject.y + enemyObject.height)) {
    enemyObject.resetLocation();
    playerObject.flashPlayer();
    health = health - 1;
    if (health == 0) {
      endGame();
    }
  }
}

The code above will call a function called endGame(), it will stop our run loop updateGame() and then clear the screen before writing “Game Over!”. You might need to adjust the X,Y coordinates for your size screen. Add this function to the end of your JavaScript file:

function endGame() {
  cancelAnimationFrame(requestID);
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx.font = "60px Arial";
  ctx.fillStyle = 'white';
  ctx.fillText("Game Over!", 200, 400);
}

Your game should now update your score when you shoot enemy ships and the game should end when the player is destroyed 3 times.

Move on to stage 8 –>
Jump to: [Vertical Shooter Post: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 ]