Our Fixes for Issues relating to Enemies in the Mario Game.
Adding Attack Animation to Enemies
Currently, the enemy sprite is not a spritesheet, it is just a single PNG file. For this reason, we have to instead modify the effects on the sprite. We can do this by adding to the following code in Goomba.js.
this.canvas.style.transition = "transform 2s, opacity 1s";
this.canvas.style.transformOrigin = "bottom"; // Set the transform origin to the bottom
this.canvas.style.transform = "scaleY(0)"; // Make the Goomba flat
this.speed = 0;
GameEnv.playSound("goombaDeath");
We can change the transition and transform aspects to have the goomba squish itself toward the player. We can change this after testing and trying different transition and transform values.
Make Enemies move after player moves
Whenever the user starts the game, the Goomba Enemy starts to move regardless of whether the player has moved or not. This can lead to several issues, and should be fixed.
Goombas moving without player moving first
To fix this, we plan to edit Goomba.js, and plan to run this code after it detects that the player has moved by cross checking its current position with its starting position.
constructor(canvas, image, data, xPercentage, yPercentage, name, minPosition){
super(canvas, image, data, 0.0, 0.2);
//Unused but must be Defined
this.name = name;
this.y = yPercentage;
//Initial Position of Goomba
this.x = xPercentage * GameEnv.innerWidth;
//Access in which a Goomba can travel
this.minPosition = minPosition * GameEnv.innerWidth;
this.maxPosition = this.x + xPercentage * GameEnv.innerWidth;
this.immune = 0;
//Define Speed of Enemy
if (["easy", "normal"].includes(GameEnv.difficulty)) {
this.speed = this.speed * Math.floor(Math.random() * 1.5 + 2);
} else if (GameEnv.difficulty === "hard") {
this.speed = this.speed * Math.floor(Math.random() * 3 + 3);
} else {
this.speed = this.speed * 5
}
}
New Enemies With Different Features Related to the Level
Adding new enemies can be done by duplicating a file of an already made enemy. There are two "base" enemies that the repository contains:
Goomba.js
FlyingGoomba.js
Two Important Files to Duplicate for this Section
Once the files are duplicated, the next thing that must be added to GameSetup.js is actually importing that object, along with changing the sprite.
To import the enemy, we simply need to add a third line to these two lines to GameSetup.js
import Brain from './Brain.js'
import FlyingUFO from './FlyingUFO.js';
Now to change the sprite of the enemy, we add the name of the enemy to the enemies section in GameSetup.js
As you can see, the new brain and flyingUFO enemies were added. In this case, brain corresponds to the goomba's code, while flyingUFO corresponds to the flying goomba.
Then, these enemies can be used in a level in the same way that other enemies are used.
Now, let's get more fine grained into the specific features we can change for these new enemies.
We can change the speed of the enemies by changing the this.speed value in the custom enemy JS file.
We can change the chance of changing the enemy's direction by changing the -this.speed value.
// Every so often change direction
switch(GameEnv.difficulty) {
case "normal":
if (Math.random() < 0.005) this.speed = -this.speed;
break;
case "hard":
if (Math.random() < 0.01) this.speed = -this.speed;
break;
case "impossible":
if (Math.random() < 0.02) this.speed = -this.speed;
break;
}
Another setting is enabling or disabling immunity for an enemy based on the difficulty level. We can change the this.immune value to 0 for it to be disabled, and 1 for it to be enabled.
Overall, this shows how to add new enemies and customize their specific features.
Fix Bugs with Flying Goomba
One major issue that was immediately noticed by multiple of our team members was that the flying goomba on the avenida level doesn't actually fly.
Flying Goomba on the Ground
The issue lies in this piece of code in FlyingGoomba.js:
dropGoomba() {
let playerX = GameEnv.PlayerPosition.playerX;
let playerY = GameEnv.PlayerPosition.playerY;
// Drop the Goomba on the Player when relatively close
if (Math.abs(this.x - playerX) < 150 && this.y !== playerY) {
//Move Goomba towards Player
this.y = followPlayer(this.y, playerY, 0.03);
} else {
//Move Goomba towards Sky
this.y = followPlayer(this.y, 0.2 * GameEnv.innerHeight, 0.02);
}
}
The move goomba towards the sky piece is likely breaking in the avenida level and some fix will need to be found where it moves the goomba higher than usual specifically on the avenida level.
Another final minor detail is that for all levels where a goomba is behind the pipe/tree/any endgame object, it should be moved to outside of that area or deleted because it is effectively trapped in that position.
Enemies Issues Fix
Our Fixes for Issues relating to Enemies in the Mario Game.
Adding Attack Animation to Enemies
Currently, the enemy sprite is not a spritesheet, it is just a single PNG file. For this reason, we have to instead modify the effects on the sprite. We can do this by adding to the following code in Goomba.js.
We can change the transition and transform aspects to have the goomba squish itself toward the player. We can change this after testing and trying different transition and transform values.
Make Enemies move after player moves
Whenever the user starts the game, the Goomba Enemy starts to move regardless of whether the player has moved or not. This can lead to several issues, and should be fixed.
To fix this, we plan to edit Goomba.js, and plan to run this code after it detects that the player has moved by cross checking its current position with its starting position.
New Enemies With Different Features Related to the Level
Adding new enemies can be done by duplicating a file of an already made enemy. There are two "base" enemies that the repository contains:
Once the files are duplicated, the next thing that must be added to GameSetup.js is actually importing that object, along with changing the sprite.
To import the enemy, we simply need to add a third line to these two lines to GameSetup.js
Now to change the sprite of the enemy, we add the name of the enemy to the enemies section in GameSetup.js
As you can see, the new brain and flyingUFO enemies were added. In this case, brain corresponds to the goomba's code, while flyingUFO corresponds to the flying goomba.
Then, these enemies can be used in a level in the same way that other enemies are used.
Now, let's get more fine grained into the specific features we can change for these new enemies.
We can change the speed of the enemies by changing the this.speed value in the custom enemy JS file.
We can change the chance of changing the enemy's direction by changing the -this.speed value.
Another setting is enabling or disabling immunity for an enemy based on the difficulty level. We can change the this.immune value to 0 for it to be disabled, and 1 for it to be enabled.
Overall, this shows how to add new enemies and customize their specific features.
Fix Bugs with Flying Goomba
One major issue that was immediately noticed by multiple of our team members was that the flying goomba on the avenida level doesn't actually fly.
The issue lies in this piece of code in FlyingGoomba.js:
The move goomba towards the sky piece is likely breaking in the avenida level and some fix will need to be found where it moves the goomba higher than usual specifically on the avenida level.
Another final minor detail is that for all levels where a goomba is behind the pipe/tree/any endgame object, it should be moved to outside of that area or deleted because it is effectively trapped in that position.