Add a under Water background to the avenida level and also add a sand platform to the game.

[Gabhall]

Add Under Water background to the avaenida

backgrounds: {
        start: { src: "/images/platformer/backgrounds/home.png" },
        hills: { src: "/images/platformer/backgrounds/hills.png" },
        avenida: { src: "/images/platformer/backgrounds/avenidawide3.jpg" },
        mountains: { src: "/images/platformer/backgrounds/mountains.jpg" },
        clouds : { src: "/images/platformer/backgrounds/clouds.png"},
        space: { src: "/images/platformer/backgrounds/planet.jpg" },
        castles: { src: "/images/platformer/backgrounds/castles.png" },
        loading: { src: "/images/platformer/backgrounds/greenscreen.png" },
        complete: { src: "/images/platformer/backgrounds/OneStar.png" },
        complete2: { src: "/images/platformer/backgrounds/TwoStar.png" },
        end: { src: "/images/platformer/backgrounds/Congratulations!!!.png" },
        water: {src: "/images/platformer/backgrounds/water.jpg"},

I did it by adding a water background to the game setup. js

Here is what I also changed

const avenidaGameObjects = [
        // GameObject(s), the order is important to z-index...
        { name: 'water', id: 'background', class: Background, data: this.assets.backgrounds.water },
        { name: 'sand', id: 'platform', class: Platform, data: this.assets.platforms.sand },
        { 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.5, yPercentage: 0.85 },
        { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.5368, yPercentage: 0.85 },
        { name: 'itemBlock', id:'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 },
        { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, minPosition: 0.05},
        { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.5, 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, 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: 'lopez', id: 'player', class: Player, data: this.assets.players.lopez },
        { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
        { name: 'complete', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.complete },

I changed the anvenida background with water for the game.

Now  i am going to talk about how i add the water and sand images to the repository. so i dragged the water image to the backgrounds in the image file.
Also i added the sand image to the platform file in images in vs code.

Here is how i added the sand image to the platforms in game set up. Js

platforms: { grass: { src: "/images/platformer/platforms/grass.png" }, sand: { src: "/images/platformer/platforms/sand.png" }, alien: { src: "/images/platformer/platforms/alien.png" }, bricks: { src: "/images/platformer/platforms/brick_wall.png" }, block: { src: "/images/platformer/platforms/brick_block.png" }, //MAY need 3 new variables: sizeRatio, widthRatio, and heightRatio

I add a new new line to the platforms in the game set up. Js and then i added the sand image to the platforms 

but i am still fixing the sand platform issue until it works in the game for the anvenida level.

[jm1021]

Big objective is to add an underwater level.

[Gabhall]

yes i agree with that