{"id":79,"date":"2015-02-13T17:38:09","date_gmt":"2015-02-13T17:38:09","guid":{"rendered":"http:\/\/buildanhtml5game.com\/?page_id=79"},"modified":"2015-02-13T17:38:09","modified_gmt":"2015-02-13T17:38:09","slug":"chapter-4-exercise-1-grid-layout-and-gameplay","status":"publish","type":"page","link":"http:\/\/buildanhtml5game.com\/?page_id=79","title":{"rendered":"Chapter 4, Exercise 1- Grid Layout And Gameplay"},"content":{"rendered":"

In the exercises in Chapter 3, you changed createLayout to generate alternative grid patterns. Test your layouts now with the popping and orphan-dropping code. Does the code work? How do your patterns affect the feel of the game?<\/em><\/p>\n

Keeping the change to createLayout, we use the grid layout from Chapter 3<\/a>:<\/p>\n

\"Ex_4_1\"<\/a><\/p>\n

The first thing you’ll notice is that bubbles don’t always end up in the right column when you fire them. You can fix this by changing the addBubble method in board.js:<\/p>\n

this.addBubble = function(bubble,coords){
\n  var rowNum = Math.floor(coords.y \/ BubbleShoot.ui.ROW_HEIGHT);
\n  var colNum = coords.x \/ BubbleShoot.ui.BUBBLE_DIMS * 2;
\n  colNum = Math.floor(colNum\/2) * 2;<\/strong>
\n  if(!rows[rowNum])
\n    rows[rowNum] = [];
\n  rows[rowNum][colNum] = bubble;
\n  bubble.setRow(rowNum);
\n  bubble.setCol(colNum);
\n};
\n<\/code><\/p>\n

The next thing is that, because of the bubble being a regimented grid, we don’t want the getBubblesAround method to return up to 6 surrounding bubbles, but only a maximum of four: the one above, to the left, the right, and (possibly) below. So we need to change this method too:<\/p>\n

this.getBubblesAround = function(curRow,curCol){
\n  var bubbles = [];
\n  for(var rowNum = curRow - 1;rowNum <= curRow+1; rowNum++){
\n    var startCol = rowNum == curRow ? curCol-2 : curCol;<\/strong>
\n    var endCol = rowNum == curRow ? curCol+2 : curCol;<\/strong>
\n    for(var colNum = startCol<\/strong>; colNum <= endCol<\/strong>; colNum++){
\n      var bubbleAt = that.getBubbleAt(rowNum,colNum);
\n      if(bubbleAt && !(colNum == curCol && rowNum == curRow))
\n        bubbles.push(bubbleAt);
\n    };
\n  };
\n  return bubbles;
\n};
\n<\/code><\/p>\n

Now if you play the game it should work okay, although sometimes bubbles seem to attach themselves by a diagonal corner. I think you’ll agree the game is a lot less fun, however.<\/p>\n","protected":false},"excerpt":{"rendered":"

In the exercises in Chapter 3, you changed createLayout to generate alternative grid patterns. Test your layouts now with the popping and orphan-dropping code. Does the code work? How do your patterns affect the feel of the game? Keeping the change to createLayout, we use the grid layout from Chapter 3: The first thing you’ll […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":22,"menu_order":41,"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\/79"}],"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=79"}],"version-history":[{"count":1,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/79\/revisions"}],"predecessor-version":[{"id":81,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/79\/revisions\/81"}],"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=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}