CyberLord09 / CSSE1_Final

MIT License
0 stars 0 forks source link

Triangle 2 #2

Open CyberLord09 opened 3 months ago

LiliWuu commented 3 months ago

Rapid Left and Right Jittering Movement Fix (with too many enemies on screen)

Sometimes the Goombas will start jittering in place upon colliding with one another or the obstacles. The jittering movement may be caused by the randomness of the Goomba collisions, so probably change this part of the Goomba.js code:

// Player action on collisions
    collisionAction() {
        if (this.collisionData.touchPoints.other.id === "tube") {
            if (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right) {
                this.speed = -this.speed;            
            }
        }
}
     if (this.collisionData.touchPoints.other.id === "goomba") {
            if (GameEnv.difficulty !== "impossible" && (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right)) {
                this.speed = -this.speed;      
            }
        }
        if (this.collisionData.touchPoints.other.id === "jumpPlatform") {
            if (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right) {
                this.speed = -this.speed;            
            }
        }

(I'm still not sure how to fix this issue but maybe we can have collision action happen only between the Goombas and the obstacles and not between Goombas to reduce the possible randomness of the collision movements (although this would make the enemy movement less interesting))

FlyingGoomba Not Doing Damage Fix

The player can essentially pass through the FlyingGoomba without it doing any damage to the player. This could be an error within the collision action part of the FlyingGoomba.js code and could be a result of it missing parts of the animation/action that would happen following collision detection with player. Comparing it to the Goomba.js collision code:

 if (this.collisionData.touchPoints.other.id === "player") {
            // Collision: Top of Goomba with Bottom of Player
            //console.log(this.collisionData.touchPoints.other.bottom + 'bottom')
            //console.log(this.collisionData.touchPoints.other.top + "top")
            //console.log(this.collisionData.touchPoints.other.right + "right")
            //console.log(this.collisionData.touchPoints.other.left + "left")
            if (this.collisionData.touchPoints.other.bottom && this.immune == 0) {
                GameEnv.invincible = true;
                GameEnv.goombaBounce = true;
                this.canvas.style.transition = "transform 1.5s, opacity 1s";
                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");

                setTimeout((function() {
                    GameEnv.invincible = false;
                    this.destroy();
                }).bind(this), 1500);

                // Set a timeout to make GameEnv.invincible false after 2000 milliseconds (2 seconds)
                setTimeout(function () {
                this.destroy();
                GameEnv.invincible = false;
                }, 2000);
            }
        }

and the FlyingGoomba.js collision code:

    if (this.collisionData.touchPoints.other.id === "player") {
            this.speed = 0;
            // Collision: Top of Goomba with Bottom of Player
            console.log(this.collisionData.touchPoints.other.bottom + 'bottom')
            console.log(this.collisionData.touchPoints.other.top + "top")
            console.log(this.collisionData.touchPoints.other.right + "right")
            console.log(this.collisionData.touchPoints.other.left + "left")

            if (this.collisionData.touchPoints.other.bottom && this.immune == 0) {
                GameEnv.invincible = true;
                this.speed = 0;
                GameEnv.playSound("goombaDeath");
                setTimeout((function() {
                    GameEnv.invincible = false;
                    this.destroy();
                }).bind(this), 1500);

            }
        }

it seems to be missing the transforming animation (but this could be on purpose. Also not sure if this solves the collision detection part of the code though because it could just be a bug resulting from the FlyingGoomba animation. Maybe instead create the animation code after implementing Goomba doing damage code <- according to Xavier)

QDBordtoshred commented 3 months ago

Make Regular Goomba Do Damage for All Levels

Normal Goomba will not kill you on easy & hard

The original code included a single if statement for Goomba collision on levels normal and imposable.

 if (GameEnv.difficulty === "normal | | imposable") {

It used ( | | ) which returns the boolean value true if either or both operands is true and returns false otherwise. In other words its an OR operator. Assuming this method worked we could fix the code simply by including the other levels seperated by the same OR operator...

 if (GameEnv.difficulty === "normal | | imposable | | hard") {

The reason we don't include easy is because Goombas are not supposed to kill you on that difficulty level

Unfortunately after trying such fix I realized this would not work due to the fact that all variables (game levels) are within the same quotations making the the tree separate variables read as one. The fix for such code would be simple...

 if (GameEnv.difficulty === "normal" | | "imposable" | | "hard") {

With that said the fix I decided to go with was creating 3 separate if statements, one for each level. This allows us to toggle with each level individually as we progress with our changes.

        if (this.timer === false) {
            this.timer = true;
            if (GameEnv.difficulty === "normal") {
                this.canvas.style.transition = "transform 0.5s";
                this.canvas.style.transform = "rotate(-90deg) translate(-26px, 0%)";
                GameEnv.playSound("PlayerDeath");

                if (this.isDying == false) {
                    this.isDying = true;
                    setTimeout(async() => {
                        await GameControl.transitionToLevel(GameEnv.levels[GameEnv.levels.indexOf(GameEnv.currentLevel)]);
                        console.log("level restart")
                        this.isDying = false;
                    }, 900); 
                }
            } 
            if (GameEnv.difficulty === "hard") {
                this.canvas.style.transition = "transform 0.5s";
                this.canvas.style.transform = "rotate(-90deg) translate(-26px, 0%)";
                GameEnv.playSound("PlayerDeath");

                if (this.isDying == false) {
                    this.isDying = true;
                    setTimeout(async() => {
                        await GameControl.transitionToLevel(GameEnv.levels[GameEnv.levels.indexOf(GameEnv.currentLevel)]);
                        console.log("level restart")
                        this.isDying = false;
                    }, 900); 
                }
            }
            if (GameEnv.difficulty === "impossible") {
                this.canvas.style.transition = "transform 0.5s";
                this.canvas.style.transform = "rotate(-90deg) translate(-26px, 0%)";
                GameEnv.playSound("PlayerDeath");

                if (this.isDying == false) {
                    this.isDying = true;
                    setTimeout(async() => {
                        await GameControl.transitionToLevel(GameEnv.levels[GameEnv.levels.indexOf(GameEnv.currentLevel)]);
                        console.log("level restart")
                        this.isDying = false;
                    }, 900); 
                }
            }
            else if (GameEnv.difficulty === "easy") {
                this.x += 10;
            }
        }
    }
LiliWuu commented 3 months ago

Less or More Enemies Per Difficulty

The original code does not specify the number of enemies spawned per level. For example, hillsGameObjects is just an array containing all the game objects, which applies for all difficulties:

const hillsGameObjects = [
        // GameObject(s), the order is important to z-index...
        { name: 'mountains', id: 'background', class: BackgroundMountains,  data: this.assets.backgrounds.mountains },
        { name: 'clouds', id: 'background', class: BackgroundClouds, data: this.assets.backgrounds.clouds },
        { name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills },
        { name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
        { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 },
        { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 },
        { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 },
        { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 },
        { name: 'itemBlock', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 }, //item block is a platform
        { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, yPercentage: 1, minPosition: 0.05},
        { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.5, yPercentage: 1, minPosition: 0.3 },
        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.49},
        { name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.75, yPercentage: 1, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
        { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.1908, yPercentage: 0.75 },
        { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2242, yPercentage: 0.75 },
        { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2575, yPercentage: 0.75 },
        { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.5898, yPercentage: 0.900 },
        { name: 'mario', id: 'player', class: Player, data: this.assets.players.mario },
        { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
        { name: 'loading', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.loading },
        ];

To make this different for each difficulty, create a switch statement that will execute the case that applies to the difficulty (also leave the hillsGameObjects array empty):

// Hills Game Level defintion...
        const hillsGameObjects = [];

        switch(localStorage.getItem("difficulty"))
        {
          // change number of each type of goomba for each difficulty
          case "easy":
            //run code that should happen in easy
            hillsGameObjects.push(
              { name: 'mountains', id: 'background', class: BackgroundMountains,  data: this.assets.backgrounds.mountains },
              { name: 'clouds', id: 'background', class: BackgroundClouds, data: this.assets.backgrounds.clouds },
              { name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills },
              { name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 },
              { name: 'itemBlock', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 }, //item block is a platform
              { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, yPercentage: 1, minPosition: 0.05},
              { name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.75, yPercentage: 1, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
              { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.49},
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.1908, yPercentage: 0.75 },
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2242, yPercentage: 0.75 },
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2575, yPercentage: 0.75 },
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.5898, yPercentage: 0.900 },
              { name: 'mario', id: 'player', class: Player, data: this.assets.players.mario },
              { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
              { name: 'loading', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.loading },
              )
          break;

          case "normal":
            hillsGameObjects.push(
              { name: 'mountains', id: 'background', class: BackgroundMountains,  data: this.assets.backgrounds.mountains },
              { name: 'clouds', id: 'background', class: BackgroundClouds, data: this.assets.backgrounds.clouds },
              { name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills },
              { name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 },
              { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 },
              { name: 'itemBlock', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 }, //item block is a platform
              { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, yPercentage: 1, minPosition: 0.05},
              { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.4, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
              { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.5, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
              { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.6, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
              { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.49},
              { name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.75, yPercentage: 1, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.1908, yPercentage: 0.75 },
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2242, yPercentage: 0.75 },
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2575, yPercentage: 0.75 },
              { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.5898, yPercentage: 0.900 },
              { name: 'mario', id: 'player', class: Player, data: this.assets.players.mario },
              { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
              { name: 'loading', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.loading },
              )
          break;
              case "hard":
                hillsGameObjects.push(
                  { name: 'mountains', id: 'background', class: BackgroundMountains,  data: this.assets.backgrounds.mountains },
                  { name: 'clouds', id: 'background', class: BackgroundClouds, data: this.assets.backgrounds.clouds },
                  { name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills },
                  { name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
                  { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 },
                  { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 },
                  { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 },
                  { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 },
                  { name: 'itemBlock', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 }, //item block is a platform
                  { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, yPercentage: 1, minPosition: 0.05},
                  { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.4, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
                  { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.5, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
                  { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.6, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
                  { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.49},
                  { name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.75, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
                  { name: 'flyingGoomba', id: 'flyingGoomba', class: FlyingGoomba, data: this.assets.enemies.flyingGoomba, xPercentage:  0.5, minPosition:  0.05},
                  { name: 'flyingGoomba', id: 'flyingGoomba', class: FlyingGoomba, data: this.assets.enemies.flyingGoomba, xPercentage:  0.9, minPosition: 0.5},
                  { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.1908, yPercentage: 0.75 },
                  { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2242, yPercentage: 0.75 },
                  { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2575, yPercentage: 0.75 },
                  { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.5898, yPercentage: 0.900 },
                  { name: 'mario', id: 'player', class: Player, data: this.assets.players.mario },
                  { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
                  { name: 'loading', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.loading },
                  )
          break;
              case "impossible":
                    hillsGameObjects.push(
                      { name: 'mountains', id: 'background', class: BackgroundMountains,  data: this.assets.backgrounds.mountains },
                      { name: 'clouds', id: 'background', class: BackgroundClouds, data: this.assets.backgrounds.clouds },
                      { name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills },
                      { name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
                      { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 },
                      { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 },
                      { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 },
                      { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 },
                      { name: 'itemBlock', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 }, //item block is a platform
                      { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, yPercentage: 1, minPosition: 0.05},
                      { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.4, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
                      { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.5, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
                      { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.6, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
                      { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.7, yPercentage: 1, minPosition: 0.05},        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
                      { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.49},
                      { name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.75, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
                      { name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.80, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
                      { name: 'flyingGoomba', id: 'flyingGoomba', class: FlyingGoomba, data: this.assets.enemies.flyingGoomba, xPercentage:  0.5, minPosition:  0.05},
                      { name: 'flyingGoomba', id: 'flyingGoomba', class: FlyingGoomba, data: this.assets.enemies.flyingGoomba, xPercentage:  0.3, minPosition:  0.05},
                      { name: 'flyingGoomba', id: 'flyingGoomba', class: FlyingGoomba, data: this.assets.enemies.flyingGoomba, xPercentage:  0.2, minPosition: 0.5},
                      { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.1908, yPercentage: 0.75 },
                      { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2242, yPercentage: 0.75 },
                      { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.2575, yPercentage: 0.75 },
                      { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.5898, yPercentage: 0.900 },
                      { name: 'mario', id: 'player', class: Player, data: this.assets.players.mario },
                      { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
                      { name: 'loading', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.loading },
                      )
          //default:
            //default cases run whena all conditions fail: it's the else{} block of switch()
          break;
        }

I also changed the xPercentage to spawn the goombas at different places

QDBordtoshred commented 3 months ago

FlyingGoomba Not Doing Damage Fix

Flying Goomba wont kill you on contact

The original code included a single if statement for Goomba collisions and FlyingGoomba collisions separated by ( | | ) which returns the Boolean value true if either or both operands is true and returns false otherwise. In other words its an OR operator that unfortunately did not work.

        if (this.collisionData.touchPoints.other.id === "goomba" || this.collisionData.touchPoints.other.id === "flyingGoomba") {
            if (GameEnv.invincible === false) {
                GameEnv.goombaInvincible = true;
                // Collision with the left side of the Enemy
                if (this.collisionData.touchPoints.other.left && !this.collisionData.touchPoints.other.bottom && !this.collisionData.touchPoints.other.top && GameEnv.invincible === false && this.timer === false) {
                    setTimeout(this.goombaCollision.bind(this), 50);
                } else if (this.collisionData.touchPoints.other.right && !this.collisionData.touchPoints.other.bottom && !this.collisionData.touchPoints.other.top && GameEnv.invincible === false && this.timer === false) {
                    setTimeout(this.goombaCollision.bind(this), 50);
                }

                // Collision with the right side of the Enemy
            }
        } 

Image

The code can be fixed simply by separating the operation into two separate if statements...

        if (this.collisionData.touchPoints.other.id === "goomba") {
            if (GameEnv.invincible === false) {
                GameEnv.goombaInvincible = true;
                // Collision with the left side of the Enemy
                if (this.collisionData.touchPoints.other.left && !this.collisionData.touchPoints.other.bottom && !this.collisionData.touchPoints.other.top && GameEnv.invincible === false && this.timer === false) {
                    setTimeout(this.goombaCollision.bind(this), 50);
                } else if (this.collisionData.touchPoints.other.right && !this.collisionData.touchPoints.other.bottom && !this.collisionData.touchPoints.other.top && GameEnv.invincible === false && this.timer === false) {
                    setTimeout(this.goombaCollision.bind(this), 50);
                }

                // Collision with the right side of the Enemy
            }
        } 
        if ( this.collisionData.touchPoints.other.id === "flyingGoomba") {
            if (GameEnv.invincible === false) {
                GameEnv.goombaInvincible = true;
                // Collision with the left side of the Enemy
                if (this.collisionData.touchPoints.other.left && !this.collisionData.touchPoints.other.bottom && !this.collisionData.touchPoints.other.top && GameEnv.invincible === false && this.timer === false) {
                    setTimeout(this.goombaCollision.bind(this), 50);
                } else if (this.collisionData.touchPoints.other.right && !this.collisionData.touchPoints.other.bottom && !this.collisionData.touchPoints.other.top && GameEnv.invincible === false && this.timer === false) {
                    setTimeout(this.goombaCollision.bind(this), 50);
                }

                // Collision with the right side of the Enemy
            }
        } 
TianbinLiu commented 3 months ago

Rapid Left and Right Jittering Movement Fix (with too many enemies on screen)

Sometimes the Goombas will start jittering in place upon colliding with one another or the obstacles. The jittering movement may be caused by the overlapping of Goombas' hitboxes(sometimes frequent changes of direction in obstacle-heavy maps can cause if-statement conflicts, which can accidentally allow hitboxes to overlap, therefore causing both Goombas repeatedly change direction and cause both Goombas to start jittering):

     if (this.collisionData.touchPoints.other.id === "goomba") {
            if (GameEnv.difficulty !== "impossible" && (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right)) {
                this.speed = -this.speed;      
            }
        }

        if (this.collisionData.touchPoints.other.id === "tube") {
            if (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right) {
                this.speed = -this.speed;            
            }
        }

        if (this.collisionData.touchPoints.other.id === "jumpPlatform") {
            if (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right) {
                this.speed = -this.speed;            
            }
        }

So, instead of deleting the entire Goombas collision, we can make the collisions less frequent by adding a boolean and if-statement (adding limit to Goombas collision.

    constructor(canvas, image, data, xPercentage, yPercentage, name, minPosition){
        super(canvas, image, data, 0.0, 0.2);
...
        this.collisionYes = false;  //new line added, boolean to determine if a Goomba is allowed to change direction.
...
    }
        if(this.collisionYes){
            setTimeout(() => {
                this.collisionYes = false; //turn the boolean to false to allow the if-statement below to run again.
            }, 10000); // 10000 milliseconds = 10 seconds //everytime when a Goomba change direction, it need to wait for 10 second to change direction again
        }

        if (this.collisionData.touchPoints.other.id === "goomba") {
            if (GameEnv.difficulty !== "impossible" && (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right) && !this.collisionYes) {
                this.collisionYes = true; //set the boolean to true(if the boolean is true, this if-statement won't run again)
                this.speed = -this.speed;      
            }
        }