Tvick22 / platformer3x

Student repository for Trimester 3, Spring 2024. (Leaderboard Team)
https://tvick22.github.io/platformer3x/
Apache License 2.0
0 stars 0 forks source link

Glowing Platform Block #28

Closed myamadriaga closed 1 month ago

myamadriaga commented 2 months ago

We previously created the 'glowing tree' function, which basically added a glow to the tree along with the resizing of the tree which increased the size of the tree sprite. From this function, we wanted to use these html edits to apply to other objects, such as the platform blocks. The original idea was off of another groups, who wanted to do an invisible block-- but instead we wanted to introduce how to use the draw function to create a glow around the blocks.

Right now, we also want to investigate the disappearing block, and maybe spikes that appear then disappear as the player goes through the level.

this is the code inserted in the draw function:

  // Add glow effect
        this.canvas.style.boxShadow = "0 0 10px 5px rgba(0, 255, 255, 0.7)";
    }

this applied the glow effect to all of the block platforms, so we plan to create a separate JS file that indicates the separate glowing block. We also had ideas to add a yellow glow to the question mark block, to make it more special than the regular blocks.

the glow effect looks like this:

Screenshot (78)

we also plan on using these things for other features, such as reappearing blocks/obstacles and also adding a glow around features in our level like the boss

jellinki commented 1 month ago

I updated the glowing platform block code so that it would only affect the "Hills" level and not the other levels. I did this by going into GameSetup.js and editing the class for all levels EXCEPT "Hills" back to "BlockPlatform", which doesn't have a glowing effect. For "Hills", I kept the class as "GlowBlock".

      { name: 'blocks', id: 'jumpPlatform', class: GlowBlock, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 },
      { name: 'blocks', id: 'jumpPlatform', class: GlowBlock, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 },
      { name: 'blocks', id: 'jumpPlatform', class: GlowBlock, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 },
      { name: 'blocks', id: 'wall', class: GlowBlock, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 },