Reduce memory and CPU resources on offline interstitial while idle.

components/neterror/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 25 matching lines @@
 
   this.highestScore = 0;
 
   this.time = 0;
   this.runningTime = 0;
   this.msPerFrame = 1000 / FPS;
   this.currentSpeed = this.config.SPEED;
 
   this.obstacles = [];
 
-  this.started = false;
-  this.activated = false;
+  this.activated = false; // Whether the easter egg has been activated.
+  this.playing = false; // Whether the game is currently in play state.

[mmenke, 2016/08/23 14:38:45]

Thanks!  This makes the code much easier to follow.

   this.crashed = false;
   this.paused = false;
   this.inverted = false;
   this.invertTimer = 0;
   this.resizeTimerId_ = null;
 
   this.playCount = 0;
 
   // Sound FX.
   this.audioBuffer = null;
@@ skipping 49 matching lines @@
   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_BLINK_COUNT: 3,
   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 299 matching lines @@
       this.canvas.height = this.dimensions.HEIGHT;
 
       Runner.updateCanvasScaling(this.canvas);
 
       this.distanceMeter.calcXPos(this.dimensions.WIDTH);
       this.clearCanvas();
       this.horizon.update(0, 0, true);
       this.tRex.update(0);
 
       // Outer container and distance meter.
-      if (this.activated || this.crashed || this.paused) {
+      if (this.playing || this.crashed || this.paused) {
         this.containerEl.style.width = this.dimensions.WIDTH + 'px';
         this.containerEl.style.height = this.dimensions.HEIGHT + 'px';
         this.distanceMeter.update(0, Math.ceil(this.distanceRan));
         this.stop();
       } else {
         this.tRex.draw(0, 0);
       }
 
       // Game over panel.
       if (this.crashed && this.gameOverPanel) {
         this.gameOverPanel.updateDimensions(this.dimensions.WIDTH);
         this.gameOverPanel.draw();
       }
     }
   },
 
   /**
    * Play the game intro.
    * Canvas container width expands out to the full width.
    */
   playIntro: function() {
-    if (!this.started && !this.crashed) {
+    if (!this.activated && !this.crashed) {
       this.playingIntro = true;
       this.tRex.playingIntro = true;
 
       // CSS animation definition.
       var keyframes = '@-webkit-keyframes intro { ' +
             'from { width:' + Trex.config.WIDTH + 'px }' +
             'to { width: ' + this.dimensions.WIDTH + 'px }' +
           '}';
       document.styleSheets[0].insertRule(keyframes, 0);
 
       this.containerEl.addEventListener(Runner.events.ANIM_END,
           this.startGame.bind(this));
 
       this.containerEl.style.webkitAnimation = 'intro .4s ease-out 1 both';
       this.containerEl.style.width = this.dimensions.WIDTH + 'px';
 
       if (this.touchController) {
         this.outerContainerEl.appendChild(this.touchController);
       }
+      this.playing = true;
       this.activated = true;
-      this.started = true;
     } else if (this.crashed) {
       this.restart();
     }
   },
 
 
   /**
    * Update the game status to started.
    */
   startGame: function() {
@@ skipping 13 matching lines @@
     window.addEventListener(Runner.events.FOCUS,
           this.onVisibilityChange.bind(this));
   },
 
   clearCanvas: function() {
     this.canvasCtx.clearRect(0, 0, this.dimensions.WIDTH,
         this.dimensions.HEIGHT);
   },
 
   /**
-   * Update the game frame.
+   * Update the game frame and schedules the next one.
    */
   update: function() {
-    this.drawPending = false;
+    this.updatePending = false;
 
     var now = getTimeStamp();
     var deltaTime = now - (this.time || now);
     this.time = now;
 
-    if (this.activated) {
+    if (this.playing) {
       this.clearCanvas();
 
       if (this.tRex.jumping) {
         this.tRex.updateJump(deltaTime);
       }
 
       this.runningTime += deltaTime;
       var hasObstacles = this.runningTime > this.config.CLEAR_TIME;
 
       // 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;
+        deltaTime = !this.activated ? 0 : deltaTime;
         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;
@@ skipping 28 matching lines @@
               this.config.INVERT_DISTANCE);
 
           if (this.invertTrigger && this.invertTimer === 0) {
             this.invertTimer += deltaTime;
             this.invert();
           }
         }
       }
     }
 
-    if (!this.crashed) {
+    if (this.playing || (!this.activated &&
+        this.tRex.blinkCount < Runner.config.MAX_BLINK_COUNT)) {
       this.tRex.update(deltaTime);
-      this.raq();
+      this.scheduleNextUpdate();
     }
   },
 
   /**
    * Event handler.
    */
   handleEvent: function(e) {
     return (function(evtType, events) {
       switch (evtType) {
         case events.KEYDOWN:
@@ skipping 46 matching lines @@
       document.removeEventListener(Runner.events.MOUSEUP, this);
     }
   },
 
   /**
    * Process keydown.
    * @param {Event} e
    */
   onKeyDown: function(e) {
     // Prevent native page scrolling whilst tapping on mobile.
-    if (IS_MOBILE && this.activated) {
+    if (IS_MOBILE && this.playing) {
       e.preventDefault();
     }
 
     if (e.target != this.detailsButton) {
       if (!this.crashed && (Runner.keycodes.JUMP[e.keyCode] ||
            e.type == Runner.events.TOUCHSTART)) {
-        if (!this.activated) {
+        if (!this.playing) {
           this.loadSounds();
-          this.activated = true;
+          this.playing = true;
+          this.scheduleNextUpdate();
           if (window.errorPageController) {
             errorPageController.trackEasterEgg();
           }
         }
-
+        //  Play sound effect and jump on starting the game for the first time.
         if (!this.tRex.jumping && !this.tRex.ducking) {
           this.playSound(this.soundFx.BUTTON_PRESS);
           this.tRex.startJump(this.currentSpeed);
         }
       }
 
       if (this.crashed && e.type == Runner.events.TOUCHSTART &&
           e.currentTarget == this.containerEl) {
         this.restart();
       }
     }
 
-    if (this.activated && !this.crashed && Runner.keycodes.DUCK[e.keyCode]) {
+    if (this.playing && !this.crashed && Runner.keycodes.DUCK[e.keyCode]) {
       e.preventDefault();
       if (this.tRex.jumping) {
         // Speed drop, activated only when jump key is not pressed.
         this.tRex.setSpeedDrop();
       } else if (!this.tRex.jumping && !this.tRex.ducking) {
         // Duck.
         this.tRex.setDuck(true);
       }
     }
   },
@@ skipping 37 matching lines @@
    * @return {boolean}
    */
   isLeftClickOnCanvas: function(e) {
     return e.button != null && e.button < 2 &&
         e.type == Runner.events.MOUSEUP && e.target == this.canvas;
   },
 
   /**
    * RequestAnimationFrame wrapper.
    */
-  raq: function() {
-    if (!this.drawPending) {
-      this.drawPending = true;
+  scheduleNextUpdate: function() {
+    if (!this.updatePending) {
+      this.updatePending = true;
       this.raqId = requestAnimationFrame(this.update.bind(this));
     }
   },
 
   /**
    * Whether the game is running.
    * @return {boolean}
    */
   isRunning: function() {
     return !!this.raqId;
@@ skipping 25 matching lines @@
     if (this.distanceRan > this.highestScore) {
       this.highestScore = Math.ceil(this.distanceRan);
       this.distanceMeter.setHighScore(this.highestScore);
     }
 
     // Reset the time clock.
     this.time = getTimeStamp();
   },
 
   stop: function() {
-    this.activated = false;
+    this.playing = false;
     this.paused = true;
     cancelAnimationFrame(this.raqId);
     this.raqId = 0;
   },
 
   play: function() {
     if (!this.crashed) {
-      this.activated = true;
+      this.playing = true;
       this.paused = false;
       this.tRex.update(0, Trex.status.RUNNING);
       this.time = getTimeStamp();
       this.update();
     }
   },
 
   restart: function() {
     if (!this.raqId) {
       this.playCount++;
       this.runningTime = 0;
-      this.activated = true;
+      this.playing = 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);
@@ skipping 658 matching lines @@
   this.canvas = canvas;
   this.canvasCtx = canvas.getContext('2d');
   this.spritePos = spritePos;
   this.xPos = 0;
   this.yPos = 0;
   // Position when on the ground.
   this.groundYPos = 0;
   this.currentFrame = 0;
   this.currentAnimFrames = [];
   this.blinkDelay = 0;
+  this.blinkCount = 0;
   this.animStartTime = 0;
   this.timer = 0;
   this.msPerFrame = 1000 / FPS;
   this.config = Trex.config;
   // Current status.
   this.status = Trex.status.WAITING;
 
   this.jumping = false;
   this.ducking = false;
   this.jumpVelocity = 0;
@@ skipping 92 matching lines @@
   }
 };
 
 
 Trex.prototype = {
   /**
    * T-rex player initaliser.
    * Sets the t-rex to blink at random intervals.
    */
   init: function() {
-    this.blinkDelay = this.setBlinkDelay();
     this.groundYPos = Runner.defaultDimensions.HEIGHT - this.config.HEIGHT -
         Runner.config.BOTTOM_PAD;
     this.yPos = this.groundYPos;
     this.minJumpHeight = this.groundYPos - this.config.MIN_JUMP_HEIGHT;
 
     this.draw(0, 0);
     this.update(0, Trex.status.WAITING);
   },
 
   /**
@@ skipping 108 matching lines @@
   blink: function(time) {
     var deltaTime = time - this.animStartTime;
 
     if (deltaTime >= this.blinkDelay) {
       this.draw(this.currentAnimFrames[this.currentFrame], 0);
 
       if (this.currentFrame == 1) {
         // Set new random delay to blink.
         this.setBlinkDelay();
         this.animStartTime = time;
+        this.blinkCount++;
       }
     }
   },
 
   /**
    * Initialise a jump.
    * @param {number} speed
    */
   startJump: function(speed) {
     if (!this.jumping) {
@@ skipping 946 matching lines @@
 
   /**
    * Add a new cloud to the horizon.
    */
   addCloud: function() {
     this.clouds.push(new Cloud(this.canvas, this.spritePos.CLOUD,
         this.dimensions.WIDTH));
   }
 };
 })();