Chapter 7, Exercise 3 – Level Completion Stars

Give players an incentive to repeat levels by awarding stars for a completion grade instead of the pass or fail condition that currently exists. You could award one star whenever the player clears the level, two stars if they clear with more than 25 percent of the level’s bubble allocation remaining, and three stars if they complete the level by firing only half the bubbles they were given. Add information to the level completion dialog to show the player how many stars they earned.

Firstly, we’ll need some way to display the stars in the HTML. These will go in the end game dialog box in index.html:

<div id="end_game" class="dialog">
<div id="end_game_message">
<h2>Game Over</h2>
<div id="final_score">
<span>Final Score:</span>
<span id="final_score_value"></span>
</div>
<div id="stars">
    </div>
    <div id="new_high_score">New High Score!</div>
     <div id="level_failed" class="level_failed">Level Failed!</div>
      <div id="level_complete" class="level_complete">Level Complete!</div>
  </div>
  <div class="but_start_game button">
     <span class="level_complete">Next Level</span>
     <span class="level_failed">New Game</span>
   </div>
</div>
Now we need to calculate how many stars to award. Using the original version of the game, the player is given 70 bubbles minus five for each level they complete. We'll do the calculation in endGame in game.js:
var endGame = function(hasWon){
  var numStars = 0;
  var startingBubbles = MAX_BUBBLES - level * 5;
  var percentRemaining = numBubbles/startingBubbles * 100;
  if(percentRemaining > 50){
    numStars = 3;
  }else if(percentRemaining > 25){
    numStars = 2;
  }else if(hasWon){
    numStars = 1;
  }
  if(score > highScore){
    highScore = score;
    $("#new_high_score").show();
    BubbleShoot.ui.drawHighScore(highScore);
    if(window.localStorage){
      localStorage.setItem("high_score",highScore);
    }
  }else{
    $("#new_high_score").hide();
  };
  if(hasWon){
    level++;
  }else{
    score = 0;
    level = 0;
  };
  $(".but_start_game").click("click",startGame);
  $("#board .bubble").remove();
  BubbleShoot.ui.endGame(hasWon,score,numStars);
};
Note that we always give one star for completing a level, and that we're passing the number of stars to BubbleShoot.ui.endGame.
To display the stars, we'll edit endGame in ui.js:
endGame : function(hasWon,score,numStars){
  $("#game").unbind("click");
  $("#game").unbind("mousemove");
  BubbleShoot.ui.drawBubblesRemaining(0);
  if(hasWon){
    $(".level_complete").show();
    $(".level_failed").hide();
  }else{
    $(".level_complete").hide();
    $(".level_failed").show();
  };
  $("#end_game").fadeIn(500);
  $("#final_score_value").text(score);
  var stars = '';
  for(var i=0;i<numStars;i++){
    stars += '* ';
  }
  $('#stars').html(stars);
}

We’re only displaying asterisks for stars here, but if you clear a level you should see anything between one and three stars. The next step would be to create some graphics and add some style to the element so that obtaining stars feels like more of an achievement. With the logic in place, all of this can be done inside ui.js.