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 26 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;

[mmenke, 2016/08/15 19:23:32]

Can you document this value?  It's not clear what it actually means.

[edwardjung, 2016/08/16 21:06:19]

Reading through I can see how this is confusing, so I've renamed the activate to
playing and started to activated. 

   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 376 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.

[mmenke, 2016/08/15 19:23:32]

+"And schedules next frame update"  (I'm asking for the addition because it took
me quite a while to figure out how the next update call was getting scheduled).

Actually...could you rename this draw, too?  The names "drawPending" and
"update" should match.

As someone who is learning how things work here for the first time, I'm giving
clean up suggestions based on what took me a while to figure out.

[edwardjung, 2016/08/16 21:06:19]

Sure thing, appreciate the input. Added the comment, this method does more than
draw, as it has the update logic for playing sounds, calling collision
detection, detecting night mode and more. 

I updated drawPending to updatePending to make it consistent.

    */
   update: function() {
     this.drawPending = false;
 
     var now = getTimeStamp();
     var deltaTime = now - (this.time || now);
     this.time = now;
 
     if (this.activated) {
       this.clearCanvas();
@@ skipping 56 matching lines @@
               this.config.INVERT_DISTANCE);
 
           if (this.invertTrigger && this.invertTimer === 0) {
             this.invertTimer += deltaTime;
             this.invert();
           }
         }
       }
     }
 
-    if (!this.crashed) {
+    if (this.activated || (!this.activated &&
+        this.tRex.blinkCount < Runner.config.MAX_BLINK_COUNT)) {
       this.tRex.update(deltaTime);
       this.raq();

[mmenke, 2016/08/15 19:23:32]

Would you mind renaming this method?  "raq" does not say to me "If this method
is called, continues animating".  Maybe scheduleNextUpdate?

[mmenke, 2016/08/15 19:52:27]

Or if you rename update to draw, scheduleNextDraw

[edwardjung, 2016/08/16 21:06:19]

Updated. It's shorthand for requestAnimationFrame Animation Queue but guess that
pretty obscure for most people not using requestAnimationFrame. 

     }
   },
 
   /**
    * Event handler.
    */
   handleEvent: function(e) {
     return (function(evtType, events) {
       switch (evtType) {
         case events.KEYDOWN:
@@ skipping 56 matching lines @@
     if (IS_MOBILE && this.activated) {
       e.preventDefault();
     }
 
     if (e.target != this.detailsButton) {
       if (!this.crashed && (Runner.keycodes.JUMP[e.keyCode] ||
            e.type == Runner.events.TOUCHSTART)) {
         if (!this.activated) {
           this.loadSounds();
           this.activated = true;
+          this.update();

[mmenke, 2016/08/15 19:23:32]

Think this is worth a comment.  Or could call this.raq instead.

[edwardjung, 2016/08/16 21:06:20]

Done.

           if (window.errorPageController) {
             errorPageController.trackEasterEgg();
           }

[mmenke, 2016/08/15 19:23:32]

Should we return early here, or is the game deliberately started with a jump
this first time only?  (i.e., not after "crashing"?)

[edwardjung, 2016/08/16 21:06:20]

This is deliberate, we start on a jump and sound effect. Added a comment. 

         }
 
         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) {
@@ skipping 799 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 -

[mmenke, 2016/08/15 19:23:32]

So does the first blink happen instantly now?

[edwardjung, 2016/08/16 21:06:19]

No, this was a duplicate as the blink delay is already being set in the update
method when I set the state to waiting.

         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);
   },
 
   /**
    * Setter for the jump velocity.
@@ skipping 107 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));
   }
 };
 })();