Offline easter egg bug fixes

chrome/renderer/resources/offline.js

 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 (function() {
 'use strict';
 /**
  * T-Rex runner.
  * @param {string} outerContainerId Outer containing element id.
  * @param {Object} opt_config
  * @constructor
@@ skipping 29 matching lines @@
   this.runningTime = 0;
   this.msPerFrame = 1000 / FPS;
   this.currentSpeed = this.config.SPEED;
 
   this.obstacles = [];
 
   this.started = false;
   this.activated = false;
   this.crashed = false;
   this.paused = false;
-
+  this.inverted = false;
+  this.invertTimer = 0;
   this.resizeTimerId_ = null;
 
   this.playCount = 0;
 
   // Sound FX.
   this.audioBuffer = null;
   this.soundFx = {};
 
   // Global web audio context for playing sounds.
   this.audioContext = null;
@@ skipping 43 matching lines @@
 Runner.config = {
   ACCELERATION: 0.001,
   BG_CLOUD_SPEED: 0.2,
   BOTTOM_PAD: 10,
   CLEAR_TIME: 3000,
   CLOUD_FREQUENCY: 0.5,
   GAMEOVER_CLEAR_TIME: 750,
   GAP_COEFFICIENT: 0.6,
   GRAVITY: 0.6,
   INITIAL_JUMP_VELOCITY: 12,
+  INVERT_FADE_DURATION: 12000,
+  INVERT_DISTANCE: 700,
   MAX_CLOUDS: 6,
   MAX_OBSTACLE_LENGTH: 3,
   MAX_OBSTACLE_DUPLICATION: 2,
   MAX_SPEED: 13,
   MIN_JUMP_HEIGHT: 35,
   MOBILE_SPEED_COEFFICIENT: 1.2,
   RESOURCE_TEMPLATE_ID: 'audio-resources',
   SPEED: 6,
   SPEED_DROP_COEFFICIENT: 3
 };
@@ skipping 11 matching lines @@
 
 /**
  * CSS class names.
  * @enum {string}
  */
 Runner.classes = {
   CANVAS: 'runner-canvas',
   CONTAINER: 'runner-container',
   CRASHED: 'crashed',
   ICON: 'icon-offline',
+  INVERTED: 'inverted',
   SNACKBAR: 'snackbar',
   SNACKBAR_SHOW: 'snackbar-show',
   TOUCH_CONTROLLER: 'controller'
 };
 
 
 /**
  * Sprite definition layout of the spritesheet.
  * @enum {Object}
  */
 Runner.spriteDefinition = {
   LDPI: {
     CACTUS_LARGE: {x: 332, y: 2},
     CACTUS_SMALL: {x: 228, y: 2},
     CLOUD: {x: 86, y: 2},
     HORIZON: {x: 2, y: 54},
+    MOON: {x: 484, y: 2},
     PTERODACTYL: {x: 134, y: 2},
     RESTART: {x: 2, y: 2},
-    TEXT_SPRITE: {x: 484, y: 2},
-    TREX: {x: 677, y: 2}
+    TEXT_SPRITE: {x: 655, y: 2},
+    TREX: {x: 848, y: 2},
+    STAR: {x: 645, y: 2}
   },
   HDPI: {
-    CACTUS_LARGE: {x: 652,y: 2},
-    CACTUS_SMALL: {x: 446,y: 2},
-    CLOUD: {x: 166,y: 2},
-    HORIZON: {x: 2,y: 104},
-    PTERODACTYL: {x: 260,y: 2},
-    RESTART: {x: 2,y: 2},
-    TEXT_SPRITE: {x: 954,y: 2},
-    TREX: {x: 1338,y: 2}
+    CACTUS_LARGE: {x: 652, y: 2},
+    CACTUS_SMALL: {x: 446, y: 2},
+    CLOUD: {x: 166, y: 2},
+    HORIZON: {x: 2, y: 104},
+    MOON: {x: 954, y: 2},
+    PTERODACTYL: {x: 260, y: 2},
+    RESTART: {x: 2, y: 2},
+    TEXT_SPRITE: {x: 1294, y: 2},
+    TREX: {x: 1678, y: 2},
+    STAR: {x: 1276, y: 2}
   }
 };
 
 
 /**
  * Sound FX. Reference to the ID of the audio tag on interstitial page.
  * @enum {string}
  */
 Runner.sounds = {
   BUTTON_PRESS: 'offline-sound-press',
@@ skipping 333 matching lines @@
       // First jump triggers the intro.
       if (this.tRex.jumpCount == 1 && !this.playingIntro) {
         this.playIntro();
       }
 
       // The horizon doesn't move until the intro is over.
       if (this.playingIntro) {
         this.horizon.update(0, this.currentSpeed, hasObstacles);
       } else {
         deltaTime = !this.started ? 0 : deltaTime;
-        this.horizon.update(deltaTime, this.currentSpeed, hasObstacles);
+        this.horizon.update(deltaTime, this.currentSpeed, hasObstacles,
+            this.inverted);
       }
 
       // Check for collisions.
       var collision = hasObstacles &&
           checkForCollision(this.horizon.obstacles[0], this.tRex);
 
       if (!collision) {
         this.distanceRan += this.currentSpeed * deltaTime / this.msPerFrame;
 
         if (this.currentSpeed < this.config.MAX_SPEED) {
           this.currentSpeed += this.config.ACCELERATION;
         }
       } else {
         this.gameOver();
       }
 
-      var playAcheivementSound = this.distanceMeter.update(deltaTime,
+      var playAchievementSound = this.distanceMeter.update(deltaTime,
           Math.ceil(this.distanceRan));
 
-      if (playAcheivementSound) {
+      if (playAchievementSound) {
         this.playSound(this.soundFx.SCORE);
       }
+
+      // Night mode.
+      if (this.invertTimer > this.config.INVERT_FADE_DURATION) {
+        this.invertTimer = 0;
+        this.invertTrigger = false;
+        this.invert();
+      } else if (this.invertTimer) {
+        this.invertTimer += deltaTime;
+      } else {
+        var actualDistance =
+            this.distanceMeter.getActualDistance(Math.ceil(this.distanceRan));
+
+        if (actualDistance > 0) {
+          this.invertTrigger = !(actualDistance %
+              this.config.INVERT_DISTANCE);
+
+          if (this.invertTrigger && this.invertTimer === 0) {
+            this.invertTimer += deltaTime;
+            this.invert();
+          }
+        }
+      }
     }
 
     if (!this.crashed) {
       this.tRex.update(deltaTime);
       this.raq();
     }
   },
 
   /**
    * Event handler.
@@ skipping 206 matching lines @@
   },
 
   restart: function() {
     if (!this.raqId) {
       this.playCount++;
       this.runningTime = 0;
       this.activated = true;
       this.crashed = false;
       this.distanceRan = 0;
       this.setSpeed(this.config.SPEED);
-
       this.time = getTimeStamp();
       this.containerEl.classList.remove(Runner.classes.CRASHED);
       this.clearCanvas();
       this.distanceMeter.reset(this.highestScore);
       this.horizon.reset();
       this.tRex.reset();
       this.playSound(this.soundFx.BUTTON_PRESS);
-
+      this.invert(true);
       this.update();
     }
   },
 
   /**
    * Pause the game if the tab is not in focus.
    */
   onVisibilityChange: function(e) {
-    if (document.hidden || document.webkitHidden || e.type == 'blur') {
+    if (document.hidden || document.webkitHidden || e.type == 'blur' ||
+      document.visibilityState != 'visible') {
       this.stop();
     } else if (!this.crashed) {
       this.tRex.reset();
       this.play();
     }
   },
 
   /**
    * Play a sound.
    * @param {SoundBuffer} soundBuffer
    */
   playSound: function(soundBuffer) {
     if (soundBuffer) {
       var sourceNode = this.audioContext.createBufferSource();
       sourceNode.buffer = soundBuffer;
       sourceNode.connect(this.audioContext.destination);
       sourceNode.start(0);
     }
+  },
+
+  /**
+   * Inverts the current page / canvas colors.
+   * @param {boolean} Whether to reset colors.
+   */
+  invert: function(reset) {
+    if (reset) {
+      document.body.classList.toggle(Runner.classes.INVERTED, false);
+      this.invertTimer = 0;
+      this.inverted = false;
+    } else {
+      this.inverted = document.body.classList.toggle(Runner.classes.INVERTED,
+          this.invertTrigger);
+    }
   }
 };
 
 
 /**
  * Updates the canvas size taking into
  * account the backing store pixel ratio and
  * the device pixel ratio.
  *
  * See article by Paul Lewis:
@@ skipping 343 matching lines @@
 //******************************************************************************
 
 /**
  * Obstacle.
  * @param {HTMLCanvasCtx} canvasCtx
  * @param {Obstacle.type} type
  * @param {Object} spritePos Obstacle position in sprite.
  * @param {Object} dimensions
  * @param {number} gapCoefficient Mutipler in determining the gap.
  * @param {number} speed
+ * @param {number} opt_xOffset
  */
 function Obstacle(canvasCtx, type, spriteImgPos, dimensions,
-    gapCoefficient, speed) {
+    gapCoefficient, speed, opt_xOffset) {
 
   this.canvasCtx = canvasCtx;
   this.spritePos = spriteImgPos;
   this.typeConfig = type;
   this.gapCoefficient = gapCoefficient;
   this.size = getRandomNum(1, Obstacle.MAX_OBSTACLE_LENGTH);
   this.dimensions = dimensions;
   this.remove = false;
-  this.xPos = 0;
+  this.xPos = dimensions.WIDTH + (opt_xOffset || 0);
   this.yPos = 0;
   this.width = 0;
   this.collisionBoxes = [];
   this.gap = 0;
   this.speedOffset = 0;
 
   // For animated obstacles.
   this.currentFrame = 0;
   this.timer = 0;
 
@@ skipping 20 matching lines @@
    */
   init: function(speed) {
     this.cloneCollisionBoxes();
 
     // Only allow sizing if we're at the right speed.
     if (this.size > 1 && this.typeConfig.multipleSpeed > speed) {
       this.size = 1;
     }
 
     this.width = this.typeConfig.width * this.size;
-    this.xPos = this.dimensions.WIDTH - this.width;
 
     // Check if obstacle can be positioned at various heights.
     if (Array.isArray(this.typeConfig.yPos))  {
       var yPosConfig = IS_MOBILE ? this.typeConfig.yPosMobile :
           this.typeConfig.yPos;
       this.yPos = yPosConfig[getRandomNum(0, yPosConfig.length - 1)];
     } else {
       this.yPos = this.typeConfig.yPos;
     }
 
@@ skipping 560 matching lines @@
   this.currentDistance = 0;
   this.maxScore = 0;
   this.highScore = 0;
   this.container = null;
 
   this.digits = [];
   this.acheivement = false;
   this.defaultString = '';
   this.flashTimer = 0;
   this.flashIterations = 0;
+  this.invertTrigger = false;
 
   this.config = DistanceMeter.config;
   this.maxScoreUnits = this.config.MAX_DISTANCE_UNITS;
   this.init(canvasWidth);
 };
 
 
 /**
  * @enum {number}
  */
@@ skipping 123 matching lines @@
    * @param {number} distance
    * @param {number} deltaTime
    * @return {boolean} Whether the acheivement sound fx should be played.
    */
   update: function(deltaTime, distance) {
     var paint = true;
     var playSound = false;
 
     if (!this.acheivement) {
       distance = this.getActualDistance(distance);
-
       // Score has gone beyond the initial digit count.
       if (distance > this.maxScore && this.maxScoreUnits ==
         this.config.MAX_DISTANCE_UNITS) {
         this.maxScoreUnits++;
         this.maxScore = parseInt(this.maxScore + '9');
       } else {
         this.distance = 0;
       }
 
       if (distance > 0) {
@@ skipping 32 matching lines @@
     }
 
     // Draw the digits if not flashing.
     if (paint) {
       for (var i = this.digits.length - 1; i >= 0; i--) {
         this.draw(i, parseInt(this.digits[i]));
       }
     }
 
     this.drawHighScore();
-
     return playSound;
   },
 
   /**
    * Draw the high score.
    */
   drawHighScore: function() {
     this.canvasCtx.save();
     this.canvasCtx.globalAlpha = .8;
     for (var i = this.highScore.length - 1; i >= 0; i--) {
@@ skipping 117 matching lines @@
    */
   isVisible: function() {
     return this.xPos + Cloud.config.WIDTH > 0;
   }
 };
 
 
 //******************************************************************************
 
 /**
+ * Nightmode shows a moon and stars on the horizon.
+ */
+function NightMode(canvas, spritePos, containerWidth) {
+  this.spritePos = spritePos;
+  this.canvas = canvas;
+  this.canvasCtx = canvas.getContext('2d');
+  this.xPos = containerWidth - 50;
+  this.yPos = 30;
+  this.currentPhase = 0;
+  this.opacity = 0;
+  this.containerWidth = containerWidth;
+  this.stars = [];
+  this.drawStars = false;
+  this.placeStars();
+};
+
+/**
+ * @enum {number}
+ */
+NightMode.config = {
+  FADE_SPEED: 0.035,
+  HEIGHT: 40,
+  MOON_SPEED: 0.25,
+  NUM_STARS: 2,
+  STAR_SIZE: 9,
+  STAR_SPEED: 0.3,
+  STAR_MAX_Y: 70,
+  WIDTH: 20
+};
+
+NightMode.phases = [140, 120, 100, 60, 40, 20, 0];
+
+NightMode.prototype = {
+  /**
+   * Update moving moon, changing phases.
+   * @param {boolean} activated Whether night mode is activated.
+   * @param {number} delta
+   */
+  update: function(activated, delta) {
+    // Moon phase.
+    if (activated && this.opacity == 0) {
+      this.currentPhase++;
+
+      if (this.currentPhase >= NightMode.phases.length) {
+        this.currentPhase = 0;
+      }
+    }
+
+    // Fade in / out.
+    if (activated && (this.opacity < 1 || this.opacity == 0)) {
+      this.opacity += NightMode.config.FADE_SPEED;
+    } else if (this.opacity > 0) {
+      this.opacity -= NightMode.config.FADE_SPEED;
+    }
+
+    // Set moon positioning.
+    if (this.opacity > 0) {
+      this.xPos = this.updateXPos(this.xPos, NightMode.config.MOON_SPEED);
+
+      // Update stars.
+      if (this.drawStars) {
+         for (var i = 0; i < NightMode.config.NUM_STARS; i++) {
+            this.stars[i].x = this.updateXPos(this.stars[i].x,
+                NightMode.config.STAR_SPEED);
+         }
+      }
+      this.draw();
+    } else {
+      this.opacity = 0;
+      this.placeStars();
+    }
+    this.drawStars = true;
+  },
+
+  updateXPos: function(currentPos, speed) {
+    if (currentPos < -NightMode.config.WIDTH) {
+      currentPos = this.containerWidth;
+    } else {
+      currentPos -= speed;
+    }
+    return currentPos;
+  },
+
+  draw: function() {
+    var moonSourceWidth = this.currentPhase == 3 ? NightMode.config.WIDTH * 2 :
+         NightMode.config.WIDTH;
+    var moonSourceHeight = NightMode.config.HEIGHT;
+    var moonSourceX = this.spritePos.x + NightMode.phases[this.currentPhase];
+    var moonOutputWidth = moonSourceWidth;
+    var starSize = NightMode.config.STAR_SIZE;
+    var starSourceX = Runner.spriteDefinition.LDPI.STAR.x;
+
+    if (IS_HIDPI) {
+      moonSourceWidth *= 2;
+      moonSourceHeight *= 2;
+      moonSourceX = this.spritePos.x +
+          (NightMode.phases[this.currentPhase] * 2);
+      starSize *= 2;
+      starSourceX = Runner.spriteDefinition.HDPI.STAR.x;
+    }
+
+    this.canvasCtx.save();
+    this.canvasCtx.globalAlpha = this.opacity;
+
+    // Stars.
+    if (this.drawStars) {
+      for (var i = 0; i < NightMode.config.NUM_STARS; i++) {
+        this.canvasCtx.drawImage(Runner.imageSprite,
+            starSourceX, this.stars[i].sourceY, starSize, starSize,
+            Math.round(this.stars[i].x), this.stars[i].y,
+            NightMode.config.STAR_SIZE, NightMode.config.STAR_SIZE);
+      }
+    }
+
+    // Moon.
+    this.canvasCtx.drawImage(Runner.imageSprite, moonSourceX,
+        this.spritePos.y, moonSourceWidth, moonSourceHeight,
+        Math.round(this.xPos), this.yPos,
+        moonOutputWidth, NightMode.config.HEIGHT);
+
+    this.canvasCtx.globalAlpha = 1;
+    this.canvasCtx.restore();
+  },
+
+  // Do star placement.
+  placeStars: function() {
+    var segmentSize = Math.round(this.containerWidth /
+        NightMode.config.NUM_STARS);
+
+    for (var i = 0; i < NightMode.config.NUM_STARS; i++) {
+      this.stars[i] = {};
+      this.stars[i].x = getRandomNum(segmentSize * i, segmentSize * (i + 1));
+      this.stars[i].y = getRandomNum(0, NightMode.config.STAR_MAX_Y);
+
+      if (IS_HIDPI) {
+        this.stars[i].sourceY = Runner.spriteDefinition.HDPI.STAR.y +
+            NightMode.config.STAR_SIZE * 2 * i;
+      } else {
+        this.stars[i].sourceY = Runner.spriteDefinition.LDPI.STAR.y +
+            NightMode.config.STAR_SIZE * i;
+      }
+    }
+  },
+
+  reset: function() {
+    this.currentPhase = 0;
+    this.opacity = 0;
+    this.update(false);
+  }
+
+};
+
+
+//******************************************************************************
+
+/**
  * Horizon Line.
  * Consists of two connecting lines. Randomly assigns a flat / bumpy horizon.
  * @param {HTMLCanvasElement} canvas
  * @param {Object} spritePos Horizon position in sprite.
  * @constructor
  */
 function HorizonLine(canvas, spritePos) {
   this.spritePos = spritePos;
   this.canvas = canvas;
   this.canvasCtx = canvas.getContext('2d');
@@ skipping 127 matching lines @@
   this.canvas = canvas;
   this.canvasCtx = this.canvas.getContext('2d');
   this.config = Horizon.config;
   this.dimensions = dimensions;
   this.gapCoefficient = gapCoefficient;
   this.obstacles = [];
   this.obstacleHistory = [];
   this.horizonOffsets = [0, 0];
   this.cloudFrequency = this.config.CLOUD_FREQUENCY;
   this.spritePos = spritePos;
+  this.nightMode = null;
 
   // Cloud
   this.clouds = [];
   this.cloudSpeed = this.config.BG_CLOUD_SPEED;
 
   // Horizon
   this.horizonLine = null;
-
   this.init();
 };
 
 
 /**
  * Horizon config.
  * @enum {number}
  */
 Horizon.config = {
   BG_CLOUD_SPEED: 0.2,
   BUMPY_THRESHOLD: .3,
   CLOUD_FREQUENCY: .5,
   HORIZON_HEIGHT: 16,
   MAX_CLOUDS: 6
 };
 
 
 Horizon.prototype = {
   /**
    * Initialise the horizon. Just add the line and a cloud. No obstacles.
    */
   init: function() {
     this.addCloud();
     this.horizonLine = new HorizonLine(this.canvas, this.spritePos.HORIZON);
+    this.nightMode = new NightMode(this.canvas, this.spritePos.MOON,
+        this.dimensions.WIDTH);
   },
 
   /**
    * @param {number} deltaTime
    * @param {number} currentSpeed
    * @param {boolean} updateObstacles Used as an override to prevent
    *     the obstacles from being updated / added. This happens in the
    *     ease in section.
+   * @param {boolean} showNightMode Night mode activated.
    */
-  update: function(deltaTime, currentSpeed, updateObstacles) {
+  update: function(deltaTime, currentSpeed, updateObstacles, showNightMode) {
     this.runningTime += deltaTime;
     this.horizonLine.update(deltaTime, currentSpeed);
+    this.nightMode.update(showNightMode);
     this.updateClouds(deltaTime, currentSpeed);
 
     if (updateObstacles) {
       this.updateObstacles(deltaTime, currentSpeed);
     }
   },
 
   /**
    * Update the cloud positions.
    * @param {number} deltaTime
@@ skipping 14 matching lines @@
       if (numClouds < this.config.MAX_CLOUDS &&
           (this.dimensions.WIDTH - lastCloud.xPos) > lastCloud.cloudGap &&
           this.cloudFrequency > Math.random()) {
         this.addCloud();
       }
 
       // Remove expired clouds.
       this.clouds = this.clouds.filter(function(obj) {
         return !obj.remove;
       });
+    } else {
+      this.addCloud();
     }
   },
 
   /**
    * Update the obstacle positions.
    * @param {number} deltaTime
    * @param {number} currentSpeed
    */
   updateObstacles: function(deltaTime, currentSpeed) {
     // Obstacles, move to Horizon layer.
@@ skipping 19 matching lines @@
           this.dimensions.WIDTH) {
         this.addNewObstacle(currentSpeed);
         lastObstacle.followingObstacleCreated = true;
       }
     } else {
       // Create new obstacles.
       this.addNewObstacle(currentSpeed);
     }
   },
 
+  removeFirstObstacle: function() {
+    this.obstacles.shift();
+  },
+
   /**
    * Add a new obstacle.
    * @param {number} currentSpeed
    */
   addNewObstacle: function(currentSpeed) {
     var obstacleTypeIndex = getRandomNum(0, Obstacle.types.length - 1);
     var obstacleType = Obstacle.types[obstacleTypeIndex];
 
     // Check for multiples of the same type of obstacle.
     // Also check obstacle is available at current speed.
     if (this.duplicateObstacleCheck(obstacleType.type) ||
         currentSpeed < obstacleType.minSpeed) {
       this.addNewObstacle(currentSpeed);
     } else {
       var obstacleSpritePos = this.spritePos[obstacleType.type];
 
       this.obstacles.push(new Obstacle(this.canvasCtx, obstacleType,
           obstacleSpritePos, this.dimensions,
-          this.gapCoefficient, currentSpeed));
+          this.gapCoefficient, currentSpeed, obstacleType.width));
 
       this.obstacleHistory.unshift(obstacleType.type);
 
       if (this.obstacleHistory.length > 1) {
         this.obstacleHistory.splice(Runner.config.MAX_OBSTACLE_DUPLICATION);
       }
     }
   },
 
   /**
@@ skipping 11 matching lines @@
     return duplicateCount >= Runner.config.MAX_OBSTACLE_DUPLICATION;
   },
 
   /**
    * Reset the horizon layer.
    * Remove existing obstacles and reposition the horizon line.
    */
   reset: function() {
     this.obstacles = [];
     this.horizonLine.reset();
+    this.nightMode.reset();
   },
 
   /**
    * Update the canvas width and scaling.
    * @param {number} width Canvas width.
    * @param {number} height Canvas height.
    */
   resize: function(width, height) {
     this.canvas.width = width;
     this.canvas.height = height;
   },
 
   /**
    * Add a new cloud to the horizon.
    */
   addCloud: function() {
     this.clouds.push(new Cloud(this.canvas, this.spritePos.CLOUD,
         this.dimensions.WIDTH));
   }
 };
 })();