Breakout-5 updates the levels to include different colours and layouts of bricks. The player can now beat a level and progress to the next. We also now differentiate between the different tiers of bricks, making updates to the gameplay and the scoring as a result.

Important Code

• We’ve made a few modifications to LevelMaker.js in order to allow for a more varied gaming experience.

  • The changes mostly consist of adding some new flags so that we can display different colours and layouts for our bricks.
  • Read through the changes to this file carefully, paying special attention to the comments, to understand how we are generating our new brick layouts.

• Take a look at Brick.js. You’ll notice that we’ve updated the hit() method such that it only toggles the inPlay flag if the brick being hit is of the lowest tier. Otherwise, it simply decrements the tier of the brick.

  if (this.tier > 0) {
    this.tier--;
  } else {
    this.inPlay = false;
  }

  • The tier of the brick just means how many hits that brick will take to break.

• We also use the tier to calculate which brick sprite to render:

  this.sprites[this.colour * (this.numberOfColours - 1) + this.tier].render(
    this.x,
    this.y
  );

• In PlayState.js, we’ve updated the scoring algorithm to attribute higher values to bricks of higher tiers. Whereas previously we always added 10 points for any ball/brick collision, we now take tier into account:

  this.score += this.baseScore * (brick.tier + 1);

• You’ll notice in TitleScreenState.js that we are now passing in an additional field to ServeState upon transition, namely, level.

  • We’ll continue to do this once each level has been beaten, incrementing level as needed.
  • In PlayState.js, we’ve written a new method, checkVictory(), that checks if the current level has been beaten, by checking if every brick’s inPlay flag has been toggled to false.
  • This method is called within Playstate::update(), since it makes sense to check if the level has been beaten each time a brick is hit.

• VictoryState.js contains the code for producing our victory screen. It is only ever activated when the user beats a level. This is also where we increment the value of level. Upon increasing the level, we must generate a new brick layout:

  stateMachine.change('serve', {
    ball: this.ball,
    bricks: LevelMaker.createMap(this.level + 1),
    paddle: this.paddle,
    health: this.health,
    score: this.score,
    userInterface: this.userInterface,
    level: this.level + 1,
  });

  • Notice that we’re also passing the incremented level into LevelMaker.createMap() so that we can get higher tier bricks on higher levels.