Sprint 3 Changes

[Hypernova101]

Changes for Past Week

1. Cleaned Up Boss Level

The first thing we did this week was clean up GameSetup.js by editing the GameSetterBoss.js file. We removed some unused assets, cleaned up the overall look of the GameSetterBoss file, and made it suit our game.

import  BackgroundParallax  from  './BackgroundParallax.js';
import  BackgroundTransitions  from  './BackgroundTransitions.js';
import  Platform  from  './Platform.js';
import  FinishLine  from  './FinishLine.js';
import  Boss  from  './Boss.js';
import  PlayerZombie  from  './PlayerZombie.js';
import  BossItem  from  './BossItem.js';
import  PlayerBoss  from  './PlayerBoss.js';

Only import necessary files

2. Fix Issue that makes it go slower

Last week, we noticed an issue in the Boss Level about how after every death, the Boss Level slows down. We pinpointed the cause of this to be the HP Bar, because it kept adding more HP Bars to the canvas which caused it to lag. To solve this, we created a HPBar.js file that exported the HPBar class. This way, we could more easily destroy the HPBar when the Boss Enemy dies and unclutter the Canvas with invisible HP Bars.

this.hpBar.destroy();

3. Attack Range

We also added an attack range property to the boss so that the player can attack the boss from further away. This is so that the player can press the shift key and actually do damage to the Boss' HP, and makes the already challenging level a little bit easier.

In Boss.js

this.attackRange  =  50;

if (GameEnv.playerAttack  && (Math.abs((this.x  +  this.canvasWidth)/2-(GameEnv.x  +  GameEnv.canvasWidth)/2) < (this.canvasWidth/2  +  this.attackRange))) {
    this.currentHp  -=  1;
}

[TianbinLiu]

Base file for FlyingEnemy

Same as the Base file for Enemy, we can have a new base file for FlyingEnemy to clean up the code Before we create the Base file, we can see that the codes for the FlyingEnemy are not consistent from level to level Some of them just copy and paste all the code from FlyingGoomba.js and some of them choose to extend the FlyingGoomba

Both ways have repeated code segments that aren't necessary and are easier to confuse others (CSSE students for next year).

How to fix?:

1. Create a javascript file called FlyingEnemy, this file is for FlyingEnemy that has a symmetrical sprite/image like Goomba.
2. Create a javascript file called FlyingEnemyOneD, this file is for FlyingEnemy that doesn't have a symmetrical sprite/image like Dragon.
3. Copy and paste the code from FlyingGoomba into Both FlyingEnemy.js and FlyingEnemyOneD.js, we will use this code as basic to build our Base file.
4. We need to take out all the code inside the update() function and apply the single responsibility principle, creating different functions and categorizing the take-out code into the functions based on their purposes.
5. Change the class extended for each flying enemy to either FlyingEnemy or FlyingEnemyOneD (if your sprite/image is symmetrical, then extend the FlyingEnemy, if not, extend the FlyingEnemyOneD
6. Lastly, remove all other code except the update function, and for the update function, it should include only super.update()

And we will have a simple code for our flying enemy which is easier to read and more pleasing our eyes.

import FlyingEnemy from './FlyingEnemy.js';

export class FlyingGoomba extends FlyingEnemy {

    // constructors sets up Character object 
    constructor(canvas, image, data, xPercentage, yPercentage, name, minPosition){
        super(canvas, image, data, xPercentage, yPercentage, name, minPosition);
        this.enemySpeed();
    }
    update() {
        super.update();

    }
}

export default FlyingGoomba;