{"id":98,"date":"2015-02-13T18:15:49","date_gmt":"2015-02-13T18:15:49","guid":{"rendered":"http:\/\/buildanhtml5game.com\/?page_id=98"},"modified":"2015-02-13T18:15:49","modified_gmt":"2015-02-13T18:15:49","slug":"chapter-7-exercise-1-ending-levels-efficiently","status":"publish","type":"page","link":"http:\/\/buildanhtml5game.com\/?page_id=98","title":{"rendered":"Chapter 7, Exercise 1 – Ending Levels Efficiently"},"content":{"rendered":"

Toward the end of each level, the player can only have bubbles of one, two, or three colors left on the board. Giving them a bubble of a color that won\u2019t match any of these causes the player to waste a shot and can make the game more difficult to complete. Change the bubble\u2011generating algorithm so that it gives players only bubbles of a color that can potentially form a match. For example, if only red and blue bubbles remain, the firing bubble should be either red or blue. You will need to amend getNextBubble<\/code> in game.js and choose a bubble type from one of the types that exist in the Board <\/code>object.<\/em><\/p>\n

There are two stages to this:<\/p>\n

    \n
  1. Work out which types of bubbles still existing on the board<\/li>\n
  2. Only choose from those types of bubbles<\/li>\n<\/ol>\n

    This process will work whether the board is full of bubbles or only has a handful remaining.
    \nFirst, we’re going to add a new method to Board.js to return an array containing the types of bubbles that exist on the board. This doesn’t need to be sorted and we just want the four type values:<\/p>\n

    var Board = function(){
    \n  \u2026
    \n  this.isEmpty = function(){
    \n    return this.getBubbles().length == 0;
    \n  };
    \n  this.getTypes = function(){
    \n    var types = [];
    \n    var bubbles = this.getBubbles();
    \n    for(var i=0;i<bubbles.length;i++){
    \n      var bubble = bubbles[i];
    \n      if($.inArray(bubble.getType(), types) == -1){
    \n        types.push(bubble.getType());
    \n      }
    \n    }
    \n    return types;
    \n  };
    \n  return this;
    \n};<\/code><\/p>\n

    This uses one of jQuery’s utility functions to check whether an element already exists in an array:<\/p>\n

    $.inArray(bubble.getType(), types)<\/code><\/p>\n

    You can read about how this works here: http:\/\/api.jquery.com\/jquery.inarray\/<\/a>.<\/p>\n

    The return result will be an array that might look like this: [3,0,2,1] at the start of the game, which represents that all four bubble types are present. Towards the end, it might only by [0,3], which would mean only two bubble types are left.<\/p>\n

    Next, we want to choose from these available bubble types when we create a new bubble. We can do this in the getNextBubble <\/code>function in game.js:<\/p>\n

    var getNextBubble = function(board){
    \nvar types = board.getTypes();
    \n  var type = types[Math.floor(Math.random() * types.length)];
    \n  var bubble = BubbleShoot.Bubble.create(null,null,type);
    \n  bubbles.push(bubble);
    \n  bubble.setState(BubbleShoot.BubbleState.CURRENT);
    \n  bubble.getSprite().addClass(\"cur_bubble\");
    \n  var top = 470;
    \n  var left = ($(\"#board\").width() - BubbleShoot.ui.BUBBLE_DIMS)\/2;
    \n  bubble.getSprite().css({
    \n    top : top,
    \n    left : left
    \n  });
    \n  $(\"#board\").append(bubble.getSprite());
    \n  BubbleShoot.ui.drawBubblesRemaining(numBubbles);
    \n  numBubbles--;
    \n  return bubble;
    \n};<\/code><\/p>\n

    Now, if you get towards the end of a level, you should never see a bubble of a color that isn’t already present on the board.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Toward the end of each level, the player can only have bubbles of one, two, or three colors left on the board. Giving them a bubble of a color that won\u2019t match any of these causes the player to waste a shot and can make the game more difficult to complete. Change the bubble\u2011generating algorithm […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":22,"menu_order":71,"comment_status":"open","ping_status":"open","template":"practice-answer-page.php","meta":[],"_links":{"self":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/98"}],"collection":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=98"}],"version-history":[{"count":1,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/98\/revisions"}],"predecessor-version":[{"id":99,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/98\/revisions\/99"}],"up":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/22"}],"wp:attachment":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}