BubblePop

Random Speed

Click on the game.js file of the BubblePop project.
Find the comment // #bubble-class-init
Under it, add a new line to set a new variable called speed to a random number:

this.speed = game.float_speed + (Math.random()*2) - 1;

Find the comment // #bubble-enter-frame
Under it, change this line:

this.y -= game.float_speed;

to instead tell the bubble to move upwards at the speed of the bubble’s speed variable:

this.y -= this.speed;

Test in Chrome. The speed of your bubbles should be random now.

Scoring

1. ADD A NEW VARIABLE TO HOLD THE PLAYER’S SCORE

Find the comment // #1 create the game object
After the line var game = new Game(440, 320);
type a new line to create the variable score and set it’s value to 0:

game.score = 0;

Test in Chrome. The Game loads, and nothing else is new.

2. CREATE THE SCORE LABEL VARIABLE WHEN THE GAME STARTS

Find the comment // #game-onload
Type these two lines right below the comment to create the scoreLabel object.

scoreLabel = new ScoreLabel(8, 8);
game.rootScene.addChild(scoreLabel);

The first line creates a new ScoreLabel object. The second line adds the scoreLabel object to the stage.

Test in Chrome. The Game loads, and Score:0 now shows.

3. UPDATE THE SCORE WHEN A BUBBLE IS POPPED

Find the comment // #7 make bubbles increase in speed
Right under this.addEventListener('touchstart', function(){
and above game.float_speed += .025;
Create 2 new lines add this code inside the touchstart handler function:

game.score += 100;
scoreLabel.score = game.score;

Test in Chrome. You should now get points when the bubbles are popped.

4. ADD A LOSE CONDITION TO END THE GAME WHEN A BUBBLE IS MISSED

Find the comment // #bubble-lose-condition
After the comment, add these lines:

if(this.y < -64){
  game.end();
  game.endScene.addEventListener('touchend', function(){
    // reset the game
    window.location.reload();
  });
}

Test in Chrome. Now you lose the game if you miss any bubbles.

Inside this function, the bubble is moving upwards by decreasing the bubble’s y position every frame. When the bubble’s y property is less than -64 the game ends. When the screen is touched, the game reloads.

Powerup

1. PRELOAD MORE ASSETS

Find the comment // #5 preload assets
In the game.preload line, change it from

game.preload('bubble.png')

to:

game.preload('bubble.png','bubble_power.png','bubble_bad.png');

Right after the game.preload line, add this line:

game.bubbles = [];

Near the bottom of the page, find the comment // #6 spawn bubble

Find:

var bubble = new Bubble(Math.random() * 380, 320);

Make a new line after this and write the following code to add the bubble to the bubbles array.

game.bubbles.push(bubble);

Test in Chrome. Nothing new will show yet.

2. DEFINE THE POWERUP

Highlight and copy the entire Bubble class definition starting from: // #begin-bubble-class-definition and ending with // #end-bubble-class-definition

Paste it on the next line after the end of the original Bubble class definition. Rename the following:

Rename:

// #begin-bubble-class-definition

to

// #begin-powerup-class-definition

Rename:

var Bubble = enchant.Class.create(enchant.Sprite, {

to

var Powerup = enchant.Class.create(enchant.Sprite, {

Rename:

// #bubble-class-init

to:

// #powerup-class-init

Rename:

this.image = game.assets['bubble.png'];

to:

this.image = game.assets['bubble_power.png'];

Rename:

// #bubble-enter-frame

to:

// #powerup-enter-frame

Rename:

// #bubble-lose-condition

to:

// #powerup-lose-condition

Rename:

// #bubble-after-enterframe

to:

// #powerup-after-enterframe

Delete the comment:

// #7 make bubbles increase in speed

Rename:

// #end-bubble-class-definition

to:

// #end-powerup-class-definition

Now make this powerup bubble move twice as fast as normal bubbles.
Right after the comment // #powerup-class-init
Under it, change this line:

this.speed = game.float_speed + (Math.random()*2) - 1;

to this:

this.speed = game.float_speed*2 + (Math.random()*2) - 1;

Test in Chrome. Nothing new will show yet.

3. MAKE IT SO THAT NOT POPPING POWERUPS HAS NO CONSEQUENCE

Find the enterframe event handler of the Powerup:

this.addEventListener('enterframe', function() {

Inside here, there is an if conditional that makes the player lose if the bubble reaches the top of the screen. Delete the entire if conditional block:

// #powerup-lose-condition
if(this.y < -64){
  game.end();
  game.endScene.addEventListener('touchend', function(){
  // reset the game
  window.location.reload();
  });
}

Test in Chrome. Nothing new will show yet.

4. POP BLUE BUBBLES WHEN POWERUP IS TAPPED

Now when the player ‘pops’ the powerup bubble, we want it to pop all normal bubbles on the screen. Find the comment // #powerup-after-enterframe
Inside the touchstart event handler, delete the crossed-out lines:

this.addEventListener('touchstart', function(){
  game.score += 100;
  scoreLabel.score = game.score;
  game.float_speed += .025;
  game.spawn_rate += .125;
  game.rootScene.removeChild(this);
});

Edit the block of code to make it look like this (new lines are highlighted):

this.addEventListener('touchstart', function(){
  for(var i=0; i<game.bubbles.length; i++){
    game.bubbles[i].dispatchEvent(new Event('touchstart'));
  }
  game.bubbles = [];
  game.rootScene.removeChild(this);
});

Test in Chrome. Nothing new will show yet.

5. FINALLY SPAWN POWERUPS

Near the bottom of the page, look for the game.onload function.
Find this block of code:

if(Math.random() * game.total_spawn_rate < game.spawn_rate){
  // #6 spawn bubble
  var bubble = new Bubble(Math.random() * 380, 320);
  game.bubbles.push(bubble);
}

And add the following highlighted code to it, so it looks like this:

if(Math.random() * game.total_spawn_rate < game.spawn_rate){
  // #6 spawn bubble
  var bubble = new Bubble(Math.random() * 380, 320);
  game.bubbles.push(bubble);
}else if(Math.random() * game.total_spawn_rate < .5){
  var powerup = new Powerup(Math.random() * 380, 320);
}

Test in Chrome. Now your powerups should work!

Bad Bubble

1. COPY THE POWERUP CLASS DEFINITION

Highlight and copy the entire Powerup class definition starting from: // #begin-powerup-class-definition and ending with // #end-powerup-class-definition

Paste it on the next line after the original Powerup class definition. Rename the following words:

Rename:

// #begin-powerup-class-definition

to

// #begin-bad-class-definition

Rename:

var Powerup = enchant.Class.create(enchant.Sprite, {

to

var Bad = enchant.Class.create(enchant.Sprite, {

Rename:

// #powerup-class-init

to

// #bad-class-init

Rename:

this.image = game.assets['bubble_power.png']; 

to

this.image = game.assets['bubble_bad.png'];

Rename:

// #powerup-enter-frame

to

// #bad-enter-frame

Rename:

// #powerup-after-enterframe

to

// #bad-after-enterframe

Rename:

// #end-powerup-class-definition

to

// #end-bad-class-definition

Find the comment // #bad-class-init
Make this Bad bubble move twice as fast as normal bubbles by changing this line:

this.speed = game.float_speed*2 + (Math.random()*2) - 1;

to this:

this.speed = game.float_speed/2 + (Math.random()*2) - 1;

Test in Chrome. Nothing new shows yet.

2. CHANGE WHAT HAPPENS WHEN A BAD BUBBLE IS TOUCHED

Now when the player ‘pops’ the Bad bubble, we want the game to end.
Find the comment // #bad-after-enterframe and delete the crossed-out lines:

// #bad-after-enterframe
this.addEventListener('touchstart', function(){
    for(var i=0;i<game.bubbles.length;i++){
        game.bubbles[i].dispatchEvent(new Event('touchstart'));
    }
    game.bubbles = [];
    game.rootScene.removeChild(this);
});

Edit the block of code to make it look like this (new lines are highlighted):

// #bad-after-enterframe
this.addEventListener('touchstart', function(){
    game.end();
    game.endScene.addEventListener('touchend', function(){
        // reset the game
        window.location.reload();
    });
});

Test in Chrome. Nothing new shows yet.

3. RANDOMLY SPAWN BAD BUBBLES

Finally, add a conditional to randomly spawn bad bubbles. In the game.onload function, find this block of code:

if(Math.random() * game.total_spawn_rate < game.spawn_rate){
     var bubble = new Bubble(Math.random() * 380, 320);
     game.bubbles.push(bubble);
}else if(Math.random() * game.total_spawn_rate <.5){
     var powerup = new Powerup(Math.random() * 380, 320);
}

And add the following highlighted code to it, so it looks like this

if(Math.random() * game.total_spawn_rate < game.spawn_rate){
     var bubble = new Bubble(Math.random() * 380, 320);
     game.bubbles.push(bubble);
}else if(Math.random() * game.total_spawn_rate < .5){
     var powerup = new Powerup(Math.random() * 380, 320);
}else if(Math.random() * game.total_spawn_rate < .75){
     var bad_bubble = new Bad(Math.random() * 380, 320);
}

Test in Chrome. Now Bad Bubbles should show!

Create Mods

Now that you understand how to make the basic game, experiment with changing the settings at the beginning of the game.js file.

You can also swap out the graphics of the game. Go to the Resources page to see additional assets you can download to include in your game.

Deploy to iPad

In the BubblePop folder on your Desktop, double-click deploy.game.command

The terminal app will ask:
Are you sure you want to continue connecting (yes/no)?
Type yes and hit Enter.

When it says You can close this terminal now
you can close the terminal window.

Play on iPad

Visit summer2014.gomagames.com on iPad.

Click on your name to access your game.
Click the bookmark icon and add the game to your homescreen.
Exit the browser.
Click on the icon to your game.