Bubble Burst

• 

  start of the game

• 

  game begins

• 

  shooting with canon balls to the evil color bubbles

• 

  game over

• 

  Mobile version game start screen

• 

• 

  Game over

Inspiration

The feeling of FOMO at the festival is sad. So I wanted to do something or make something that can engage people and give them the feel of holi and colors. Since it's pandemic and one can't go out this game is a great way to have fun.

What it does

Bubble Burst is a game that wants you to do just that, burst evil bubbles that come in various colors, in a spectacular way! The idea is to burst the maximum number of bubbles and achieve the highest score possible without allowing the evil bubbles to touch our cannon! It works perfectly in mobile too. Can use here

How I built it

This game is based on Pure vanilla js, HTML, and CSS. I used HTML canvas for making the canal that shoots Color Ball. I also added a feature using JavaScript that calculates the player score.

Challenges we ran into

It was a little tricky to randomize the entry of evil bubbles into the viewport, I tried to make sure the evil bubbles are entering from every possible side and point of the canvas.

 if(Math.random() < 0.5){
            x = Math.random() < 0.5 ? 0 - radius : canvas.width + radius
            y = Math.random() * canvas.height
        }else{
            y = Math.random() < 0.5 ? 0 - radius : canvas.height + radius
            x = Math.random() * canvas.width
        }

Another challenge I faced was bursting the evil bubbles in form of a color blast.

  for(let i =0; i < enemy.radius * 2; i++){
                    particles.push(new Particles(projectile.x, projectile.y,
                    Math.random() *2 ,
                    enemy.colour, 
                    {
                    x: Math.random() - 0.5,
                    y: Math.random() - 0.5
                    }))
                } 

Accomplishments that we're proud of

• Smooth transitions
• Calculating scores
• Randomizations of evil bubble entry
• aligning the projectile of cannon balls in evil bubble's direction

What we learned

I learned lots of JS' Maths function, HTML canvas, and managing the project on my own.

What's next for Bubble Burst

Thinking of adding few cool features like:

• user can challenge another opponent to come and play.
• share score on social media
• and increasing difficulty with the increasing score.

Built With

• css
• gsap
• html
• javascript