2.2.6 Cycle 6 - Adding Lasers and Animations

Design

Objectives

In this cycle I am to be able to add the lasers to the player, which interact with the enemy when they colide and then this causes an animation for the enemy to explode.

• Add lasers to the player

• Lasers can be shot using a key

• Animation when the enemy explodes

Usability Features

Key Variables

Variable Name	Use
laser	This will be each individual laser within that group, which I will be creating.
lasersGroup	This will be the group of the lasers in the game.

Pseudocode

procedure lasers
    create lasers group (laser texture)
    create multiple from lasers group (100)
    enable lasers
    add collisions from laser to enemy
end procedure

Development

Outcome

Game.js

Game.js

function preload(){
    ...
    // Player shot
    game.load.image('laser', 'assets/images/shot.png');
    // Explosion
    game.load.spritesheet('explosion', 'assets/images/explosion3.gif', 32, 32);
    ...
}

function create(){
    ...
    // Create enemy lasers
    lasers = game.add.group(); // Create group of lasers
    lasers.enableBody = true;
    game.physics.arcade.enable(lasers, Phaser.Physics.ARCADE);
    lasers.createMultiple(100, 'laser'); // Add 100 laser bullets to group
    lasers.setAll('anchor.x', 0.5);
    lasers.setAll('anchor.y', 0.5);
    lasers.setAll('scale.x', 0.5);
    lasers.setAll('scale.y', 0.5);
    lasers.setAll('outOfBoundsKill', true);
    lasers.setAll('checkWorldBounds', true);
}

function update(){
    ...
    // Add collision detection for enemyShips and bullets
    game.physics.arcade.collide(lasers, enemies, destroyEnemy);
    // Add collision detection for enemyShips and playerShip
    game.physics.arcade.collide(enemies, player, takeDamage);
      if (health <= 0) {
        killPlayer();
  }
}

function killPlayer() {
  let explosion = game.add.sprite(player.x - 50, player.y - 80, 'explosion');
  explosion.scale.set(4);
  explosion.animations.add('boom');
  explosion.play('boom', 15, false, true);
  player.kill();

  setInterval(function() {
    Phaser.GAMES[0].paused = true;
  }, 500);

  if (laser) {
    laser.kill();
  }

  restart.classList.remove('display-none');
  gameOver.style.display = 'initial';

  restart.addEventListener('click', function(e) {
    location.reload();
  });
}

Challenges

It was most challenging in this cycle to get the animations to work once the player had been hit, as you can't just play a gif once the enemy is hit, and add it over where the player is. You have to use spritesheets and animate each frame individually, with certain sizes for each frame and it just plays each set square quickly one after eachother to make a gif of sorts. I found it challenging to get this to show up in game as it kept not showing up on screen. Additionally it took some tweaking to be able to get the frame rate, as the size of each picture square correct, as one small mistake can make everything not fall into the place where it should be and this causes visual errors which aren't appealing to the player.

Testing

Evidence for testing

Tests

​ 1 Run code Thing happens As expected Pass 2 Press buttons Something happens As ex

Test	Instruction	What I expect	What actually happens	Pass/Fail
1	Fire the player's laser towards the enemies	Enemy explodes on laser impact	As expected	Pass
2	Fly into an enemy	Enemy explodes with player impact	As expected	Pass
3	Fly into an enemy	Player explodes with enemy impact	As expected	Pass

Evidence

A laser and an enemy exploding

What next?

• Next I want to add a larger enemy like a boss