Chapter 8, Exercise 1 – Full Screen

Add fullscreen capability to Bubble Shooter in a desktop browser. To make the switch as easy as possible, add a button to the top bar that is visible only if fullscreen mode is supported. Also, change the CSS so that when the page is displayed fullscreen, the game is centered.

We’ll add a button to go full screen into the top bar in index.html:

<div id="top_bar">
   <span id="but_fullscreen">[fullscreen]</span>
   <div id="top_level_box" class="top_bar_box">
     <div id="top_level_label">Level:</div>
     <div id="level">1</div>
   </div>
   <div class="top_bar_box">
     <div id="top_score_label">Score:</div>
     <div id="score">0</div>
   </div>
   <div class="top_bar_box">
     <div id="top_score_label">High Score:</div>
     <div id="high_score">0</div>
  </div>
</div>

This would be much improved with an icon and some styling, but it’ll do to demonstrate the functionality of going full screen.

Next, we’ll hook the button up in init in game.js:

this.init = function(){
  if(BubbleShoot.Renderer){
    BubbleShoot.Renderer.init(function(){
      $(".but_start_game").click("click",startGame);
    });
  }else{
    $(".but_start_game").click("click",startGame);
  };
  if(window.localStorage && localStorage.getItem("high_score")){
    highScore = parseInt(localStorage.getItem("high_score"));
  }
  BubbleShoot.ui.drawHighScore(highScore);
  $('#but_fullscreen').bind('click',function(){
    if (document.body.requestFullscreen) {
      document.body.requestFullscreen();
    } else if (document.body.msRequestFullscreen) {
      document.body.msRequestFullscreen();
    } else if (document.body.mozRequestFullScreen) {
      document.body.mozRequestFullScreen();
    } else if (document.body.webkitRequestFullscreen) {
      document.body.webkitRequestFullscreen();
    }
  });
};

Notice that there vendor-prefixed versions of the requestFullScreen API call.

If you reload you should see the new link and, if you click it, the browser toolbars will disappear and the game will be aligned in the top left corner of the screen.

To horizontally center the game, we could change the CSS definition of page in main.css:

#page
{
  position: relative;
  width: 1000px;
  height: 738px;
  margin: 0 auto;
}

But you might notice a problem if you reload the game and go into full screen mode again: the cursor coordinates are all wrong, because they’re being taken from the (top, left) corner of the screen, rather than the (top, left) corner of the game area.

To fix this, we can change getBubbleAnglein ui.js:

getBubbleAngle : function(bubble,e){
  var mouseCoords = ui.getMouseCoords(e);
  var bubbleCoords = ui.getBubbleCoords(bubble);
  var gameCoords = $("#game").position();
  var boardLeft = 120 + $('#page').offset().left;
  var angle = Math.atan((mouseCoords.x - bubbleCoords.left - boardLeft)
    / (bubbleCoords.top + gameCoords.top - mouseCoords.y));
  if(mouseCoords.y > bubbleCoords.top + gameCoords.top){
    angle += Math.PI;
  }
  return angle;
},

We make use of another jQuery function – .offset (http://api.jquery.com/offset/) – to make sure the mouse click coordinates are relative to the page element.

Reload and go into full screen and bubble firing should be working well again.