Improvements to the offline intersitial and easter egg

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
  * @export
  */
 function Runner(outerContainerId, opt_config) {
   // Singleton
   if (Runner.instance_) {
     return Runner.instance_;
   }
   Runner.instance_ = this;
 
   this.outerContainerEl = document.querySelector(outerContainerId);
   this.containerEl = null;
+  this.snackbarEl = null;
   this.detailsButton = this.outerContainerEl.querySelector('#details-button');
 
   this.config = opt_config || Runner.config;
 
   this.dimensions = Runner.defaultDimensions;
 
   this.canvas = null;
   this.canvasCtx = null;
 
   this.tRex = null;
@@ skipping 48 matching lines @@
 /**
  * Frames per second.
  * @const
  */
 var FPS = 60;
 
 /** @const */
 var IS_HIDPI = window.devicePixelRatio > 1;
 
 /** @const */
-var IS_IOS =
-    window.navigator.userAgent.indexOf('UIWebViewForStaticFileContent') > -1;
+var IS_IOS = window.navigator.userAgent.indexOf('CriOS') > -1 ||
+    window.navigator.userAgent == 'UIWebViewForStaticFileContent';
 
 /** @const */
 var IS_MOBILE = window.navigator.userAgent.indexOf('Mobi') > -1 || IS_IOS;
 
 /** @const */
 var IS_TOUCH_ENABLED = 'ontouchstart' in window;
 
 /**
  * Default game configuration.
  * @enum {number}
  */
 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,
   MAX_CLOUDS: 6,
   MAX_OBSTACLE_LENGTH: 3,
-  MAX_SPEED: 12,
+  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
 };
 
 
 /**
  * Default dimensions.
@@ skipping 14 matching lines @@
   CONTAINER: 'runner-container',
   CRASHED: 'crashed',
   ICON: 'icon-offline',
   SNACKBAR: 'snackbar',
   SNACKBAR_SHOW: 'snackbar-show',
   TOUCH_CONTROLLER: 'controller'
 };
 
 
 /**
- * Image source urls.
- * @enum {array<object>}
+ * Sprite definition layout of the spritesheet.
+ * @enum {object}
  */
-Runner.imageSources = {
-  LDPI: [
-    {name: 'CACTUS_LARGE', id: '1x-obstacle-large'},
-    {name: 'CACTUS_SMALL', id: '1x-obstacle-small'},
-    {name: 'CLOUD', id: '1x-cloud'},
-    {name: 'HORIZON', id: '1x-horizon'},
-    {name: 'RESTART', id: '1x-restart'},
-    {name: 'TEXT_SPRITE', id: '1x-text'},
-    {name: 'TREX', id: '1x-trex'}
-  ],
-  HDPI: [
-    {name: 'CACTUS_LARGE', id: '2x-obstacle-large'},
-    {name: 'CACTUS_SMALL', id: '2x-obstacle-small'},
-    {name: 'CLOUD', id: '2x-cloud'},
-    {name: 'HORIZON', id: '2x-horizon'},
-    {name: 'RESTART', id: '2x-restart'},
-    {name: 'TEXT_SPRITE', id: '2x-text'},
-    {name: 'TREX', id: '2x-trex'}
-  ]
+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},
+    PTERODACTYL: {x: 134, y: 2},
+    RESTART: {x: 2, y: 2},
+    TEXT_SPRITE: {x: 484, y: 2},
+    TREX: {x: 677, 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}
+  }
 };
 
 
 /**
  * Sound FX. Reference to the ID of the audio tag on interstitial page.
  * @enum {string}
  */
 Runner.sounds = {
   BUTTON_PRESS: 'offline-sound-press',
   HIT: 'offline-sound-hit',
@@ skipping 79 matching lines @@
           this.tRex.setJumpVelocity(value);
           break;
         case 'SPEED':
           this.setSpeed(value);
           break;
       }
     }
   },
 
   /**
-   * Load and cache the image assets from the page.
+   * Cache the approprate image sprite from the page and get the sprite sheet

[arv (Not doing code reviews), 2015/03/31 19:10:56]

typo

[edwardjung, 2015/04/01 10:40:46]

Done.

+   * definition.
    */
   loadImages: function() {
-    var imageSources = IS_HIDPI ? Runner.imageSources.HDPI :
-        Runner.imageSources.LDPI;
+    if (IS_HIDPI) {
+      Runner.imageSprite = document.getElementById('offline-resources-2x');
+      this.spriteDef = Runner.spriteDefinition.HDPI;
+    } else {
+      Runner.imageSprite = document.getElementById('offline-resources-1x');
+      this.spriteDef = Runner.spriteDefinition.LDPI;
+    }
 
-    var numImages = imageSources.length;
-
-    for (var i = numImages - 1; i >= 0; i--) {
-      var imgSource = imageSources[i];
-      this.images[imgSource.name] = document.getElementById(imgSource.id);
-    }
     this.init();
   },
 
   /**
    * Load and decode base 64 encoded sounds.
    */
   loadSounds: function() {
     if (!IS_IOS) {
       this.audioContext = new AudioContext();
+
       var resourceTemplate =
           document.getElementById(this.config.RESOURCE_TEMPLATE_ID).content;
 
       for (var sound in Runner.sounds) {
         var soundSrc =
             resourceTemplate.getElementById(Runner.sounds[sound]).src;
         soundSrc = soundSrc.substr(soundSrc.indexOf(',') + 1);
         var buffer = decodeBase64ToArrayBuffer(soundSrc);
 
         // Async, so no guarantee of order in array.
@@ skipping 38 matching lines @@
     // Player canvas container.
     this.canvas = createCanvas(this.containerEl, this.dimensions.WIDTH,
         this.dimensions.HEIGHT, Runner.classes.PLAYER);
 
     this.canvasCtx = this.canvas.getContext('2d');
     this.canvasCtx.fillStyle = '#f7f7f7';
     this.canvasCtx.fill();
     Runner.updateCanvasScaling(this.canvas);
 
     // Horizon contains clouds, obstacles and the ground.
-    this.horizon = new Horizon(this.canvas, this.images, this.dimensions,
+    this.horizon = new Horizon(this.canvas, this.spriteDef, this.dimensions,
         this.config.GAP_COEFFICIENT);
 
     // Distance meter
     this.distanceMeter = new DistanceMeter(this.canvas,
-          this.images.TEXT_SPRITE, this.dimensions.WIDTH);
+          this.spriteDef.TEXT_SPRITE, this.dimensions.WIDTH);
 
     // Draw t-rex
-    this.tRex = new Trex(this.canvas, this.images.TREX);
+    this.tRex = new Trex(this.canvas, this.spriteDef.TREX);
 
     this.outerContainerEl.appendChild(this.containerEl);
 
     if (IS_MOBILE) {
       this.createTouchController();
     }
 
     this.startListening();
     this.update();
 
@@ skipping 128 matching lines @@
     this.drawPending = false;
 
     var now = getTimeStamp();
     var deltaTime = now - (this.time || now);
     this.time = now;
 
     if (this.activated) {
       this.clearCanvas();
 
       if (this.tRex.jumping) {
-        this.tRex.updateJump(deltaTime, this.config);
+        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();
       }
 
@@ skipping 12 matching lines @@
       if (!collision) {
         this.distanceRan += this.currentSpeed * deltaTime / this.msPerFrame;
 
         if (this.currentSpeed < this.config.MAX_SPEED) {
           this.currentSpeed += this.config.ACCELERATION;
         }
       } else {
         this.gameOver();
       }
 
-      if (this.distanceMeter.getActualDistance(this.distanceRan) >
-          this.distanceMeter.maxScore) {
-        this.distanceRan = 0;
-      }
-
       var playAcheivementSound = this.distanceMeter.update(deltaTime,
           Math.ceil(this.distanceRan));
 
       if (playAcheivementSound) {
         this.playSound(this.soundFx.SCORE);
       }
     }
 
     if (!this.crashed) {
       this.tRex.update(deltaTime);
@@ skipping 56 matching lines @@
       document.removeEventListener(Runner.events.MOUSEDOWN, this);
       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) {
+      e.preventDefault();
+    }
+
     if (e.target != this.detailsButton) {
-      if (!this.crashed && (Runner.keycodes.JUMP[String(e.keyCode)] ||
+      if (!this.crashed && (Runner.keycodes.JUMP[e.keyCode] ||
            e.type == Runner.events.TOUCHSTART)) {
         if (!this.activated) {
           this.loadSounds();
           this.activated = true;
+          errorPageController.trackEasterEgg();
         }
 
-        if (!this.tRex.jumping) {
+        if (!this.tRex.jumping && !this.tRex.ducking) {
           this.playSound(this.soundFx.BUTTON_PRESS);
-          this.tRex.startJump();
+          this.tRex.startJump(this.currentSpeed);
         }
       }
 
       if (this.crashed && e.type == Runner.events.TOUCHSTART &&
           e.currentTarget == this.containerEl) {
         this.restart();
       }
     }
 
-    // Speed drop, activated only when jump key is not pressed.
-    if (Runner.keycodes.DUCK[e.keyCode] && this.tRex.jumping) {
+    if (this.activated && !this.crashed && Runner.keycodes.DUCK[e.keyCode]) {
       e.preventDefault();
-      this.tRex.setSpeedDrop();
+      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);
+      }
     }
   },
 
 
   /**
    * Process key up.
    * @param {Event} e
    */
   onKeyUp: function(e) {
     var keyCode = String(e.keyCode);
     var isjumpKey = Runner.keycodes.JUMP[keyCode] ||
        e.type == Runner.events.TOUCHEND ||
        e.type == Runner.events.MOUSEDOWN;
 
     if (this.isRunning() && isjumpKey) {
       this.tRex.endJump();
     } else if (Runner.keycodes.DUCK[keyCode]) {
       this.tRex.speedDrop = false;
+      this.tRex.setDuck(false);
     } else if (this.crashed) {
       // Check that enough time has elapsed before allowing jump key to restart.
       var deltaTime = getTimeStamp() - this.time;
 
-      if (Runner.keycodes.RESTART[keyCode] ||
-         (e.type == Runner.events.MOUSEUP && e.target == this.canvas) ||
-         (deltaTime >= this.config.GAMEOVER_CLEAR_TIME &&
-         Runner.keycodes.JUMP[keyCode])) {
+      if (Runner.keycodes.RESTART[keyCode] || this.isLeftClickOnCanvas(e) ||
+          (deltaTime >= this.config.GAMEOVER_CLEAR_TIME &&
+          Runner.keycodes.JUMP[keyCode])) {
         this.restart();
       }
     } else if (this.paused && isjumpKey) {
+      // Reset the jump state
+      this.tRex.reset();
       this.play();
     }
   },
 
   /**
+   * Returns whether the event was a left click on canvas.
+   * On Windows right click is registered as a click.
+   * @param {Event} e
+   * @return {boolean}
+   */
+  isLeftClickOnCanvas: function(e) {
+    return e.which && e.which < 2 && e.type == Runner.events.MOUSEUP &&

[arv (Not doing code reviews), 2015/03/31 19:10:56]

Use e.button instead of of e.which.

[edwardjung, 2015/04/01 10:40:46]

Done.

+        e.target == this.canvas;
+  },
+
+  /**
    * RequestAnimationFrame wrapper.
    */
   raq: function() {
     if (!this.drawPending) {
       this.drawPending = true;
       this.raqId = requestAnimationFrame(this.update.bind(this));
     }
   },
 
   /**
@@ skipping 13 matching lines @@
 
     this.stop();
     this.crashed = true;
     this.distanceMeter.acheivement = false;
 
     this.tRex.update(100, Trex.status.CRASHED);
 
     // Game over panel.
     if (!this.gameOverPanel) {
       this.gameOverPanel = new GameOverPanel(this.canvas,
-          this.images.TEXT_SPRITE, this.images.RESTART,
+          this.spriteDef.TEXT_SPRITE, this.spriteDef.RESTART,
           this.dimensions);
     } else {
       this.gameOverPanel.draw();
     }
 
     // Update the high score.
     if (this.distanceRan > this.highestScore) {
       this.highestScore = Math.ceil(this.distanceRan);
       this.distanceMeter.setHighScore(this.highestScore);
     }
@@ skipping 82 matching lines @@
 Runner.updateCanvasScaling = function(canvas, opt_width, opt_height) {
   var context = canvas.getContext('2d');
 
   // Query the various pixel ratios
   var devicePixelRatio = Math.floor(window.devicePixelRatio) || 1;
   var backingStoreRatio = Math.floor(context.webkitBackingStorePixelRatio) || 1;
   var ratio = devicePixelRatio / backingStoreRatio;
 
   // Upscale the canvas if the two ratios don't match
   if (devicePixelRatio !== backingStoreRatio) {
-
     var oldWidth = opt_width || canvas.width;
     var oldHeight = opt_height || canvas.height;
 
     canvas.width = oldWidth * ratio;
     canvas.height = oldHeight * ratio;
 
     canvas.style.width = oldWidth + 'px';
     canvas.style.height = oldHeight + 'px';
 
     // Scale the context to counter the fact that we've manually scaled
@@ skipping 77 matching lines @@
   return IS_IOS ? new Date().getTime() : performance.now();
 }
 
 
 //******************************************************************************
 
 
 /**
  * Game over panel.
  * @param {!HTMLCanvasElement} canvas
- * @param {!HTMLImage} textSprite
- * @param {!HTMLImage} restartImg
+ * @param {object} textImgPos

[arv (Not doing code reviews), 2015/03/31 19:10:56]

s/object/Object/

+ * @param {object} restartImgPos
  * @param {!Object} dimensions Canvas dimensions.
  * @constructor
  */
-function GameOverPanel(canvas, textSprite, restartImg, dimensions) {
+function GameOverPanel(canvas, textImgPos, restartImgPos, dimensions) {
   this.canvas = canvas;
   this.canvasCtx = canvas.getContext('2d');
   this.canvasDimensions = dimensions;
-  this.textSprite = textSprite;
-  this.restartImg = restartImg;
+  this.textImgPos = textImgPos;
+  this.restartImgPos = restartImgPos;
   this.draw();
 };
 
 
 /**
  * Dimensions used in the panel.
  * @enum {number}
  */
 GameOverPanel.dimensions = {
   TEXT_X: 0,
@@ skipping 44 matching lines @@
 
     if (IS_HIDPI) {
       textSourceY *= 2;
       textSourceX *= 2;
       textSourceWidth *= 2;
       textSourceHeight *= 2;
       restartSourceWidth *= 2;
       restartSourceHeight *= 2;
     }
 
+    textSourceX += this.textImgPos.x;
+    textSourceY += this.textImgPos.y;
+
     // Game over text from sprite.
-    this.canvasCtx.drawImage(this.textSprite,
+    this.canvasCtx.drawImage(Runner.imageSprite,
         textSourceX, textSourceY, textSourceWidth, textSourceHeight,
         textTargetX, textTargetY, textTargetWidth, textTargetHeight);
 
     // Restart button.
-    this.canvasCtx.drawImage(this.restartImg, 0, 0,
+    this.canvasCtx.drawImage(Runner.imageSprite,
+        this.restartImgPos.x, this.restartImgPos.y,
         restartSourceWidth, restartSourceHeight,
         restartTargetX, restartTargetY, dimensions.RESTART_WIDTH,
         dimensions.RESTART_HEIGHT);
   }
 };
 
 
 //******************************************************************************
 
 /**
@@ skipping 22 matching lines @@
       obstacle.typeConfig.height - 2);
 
   // Debug outer box
   if (opt_canvasCtx) {
     drawCollisionBoxes(opt_canvasCtx, tRexBox, obstacleBox);
   }
 
   // Simple outer bounds check.
   if (boxCompare(tRexBox, obstacleBox)) {
     var collisionBoxes = obstacle.collisionBoxes;
-    var tRexCollisionBoxes = Trex.collisionBoxes;
+    var tRexCollisionBoxes = tRex.ducking ?
+        Trex.collisionBoxes.DUCKING : Trex.collisionBoxes.RUNNING;
 
     // Detailed axis aligned box check.
     for (var t = 0; t < tRexCollisionBoxes.length; t++) {
       for (var i = 0; i < collisionBoxes.length; i++) {
         // Adjust the box to actual positions.
         var adjTrexBox =
             createAdjustedCollisionBox(tRexCollisionBoxes[t], tRexBox);
         var adjObstacleBox =
             createAdjustedCollisionBox(collisionBoxes[i], obstacleBox);
         var crashed = boxCompare(adjTrexBox, adjObstacleBox);
@@ skipping 27 matching lines @@
       box.height);
 };
 
 
 /**
  * Draw the collision boxes for debug.
  */
 function drawCollisionBoxes(canvasCtx, tRexBox, obstacleBox) {
   canvasCtx.save();
   canvasCtx.strokeStyle = '#f00';
-  canvasCtx.strokeRect(tRexBox.x, tRexBox.y,
-  tRexBox.width, tRexBox.height);
+  canvasCtx.strokeRect(tRexBox.x, tRexBox.y, tRexBox.width, tRexBox.height);
 
   canvasCtx.strokeStyle = '#0f0';
   canvasCtx.strokeRect(obstacleBox.x, obstacleBox.y,
-  obstacleBox.width, obstacleBox.height);
+      obstacleBox.width, obstacleBox.height);
   canvasCtx.restore();
 };
 
 
 /**
  * Compare two collision boxes for a collision.
  * @param {CollisionBox} tRexBox
  * @param {CollisionBox} obstacleBox
  * @return {boolean} Whether the boxes intersected.
  */
@@ skipping 33 matching lines @@
   this.height = h;
 };
 
 
 //******************************************************************************
 
 /**
  * Obstacle.
  * @param {HTMLCanvasCtx} canvasCtx
  * @param {Obstacle.type} type
- * @param {image} obstacleImg Image sprite.
+ * @param {Object} spritePos Obstacle position in sprite.
  * @param {Object} dimensions
  * @param {number} gapCoefficient Mutipler in determining the gap.
  * @param {number} speed
  */
-function Obstacle(canvasCtx, type, obstacleImg, dimensions,
+function Obstacle(canvasCtx, type, spriteImgPos, dimensions,
     gapCoefficient, speed) {
 
   this.canvasCtx = canvasCtx;
-  this.image = obstacleImg;
+  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.yPos = this.typeConfig.yPos;
+  this.yPos = 0;
   this.width = 0;
   this.collisionBoxes = [];
   this.gap = 0;
+  this.speedOffset = 0;
+
+  // For animated obstacles.
+  this.currentFrame = 0;
+  this.timer = 0;
 
   this.init(speed);
 };
 
 /**
  * Coefficient for calculating the maximum gap.
  * @const
  */
 Obstacle.MAX_GAP_COEFFICIENT = 1.5;
 
@@ skipping 13 matching lines @@
     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;
+    }
+
     this.draw();
 
     // Make collision box adjustments,
     // Central box is adjusted to the size as one box.
     //      ____        ______        ________
     //    _|   |-|    _|     |-|    _|       |-|
     //   | |<->| |   | |<--->| |   | |<----->| |
     //   | | 1 | |   | |  2  | |   | |   3   | |
     //   |_|___|_|   |_|_____|_|   |_|_______|_|
     //
     if (this.size > 1) {
       this.collisionBoxes[1].width = this.width - this.collisionBoxes[0].width -
           this.collisionBoxes[2].width;
       this.collisionBoxes[2].x = this.width - this.collisionBoxes[2].width;
     }
 
+    // For obstacles that go at a different speed from the horizon.
+    if (this.typeConfig.speedOffset) {
+      this.speedOffset = Math.random() > 0.5 ? this.typeConfig.speedOffset :
+          -this.typeConfig.speedOffset;
+    }
+
     this.gap = this.getGap(this.gapCoefficient, speed);
   },
 
   /**
    * Draw and crop based on size.
    */
   draw: function() {
     var sourceWidth = this.typeConfig.width;
     var sourceHeight = this.typeConfig.height;
 
     if (IS_HIDPI) {
       sourceWidth = sourceWidth * 2;
       sourceHeight = sourceHeight * 2;
     }
 
-    // Sprite
-    var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1));
-    this.canvasCtx.drawImage(this.image,
-      sourceX, 0,
+    // X position in sprite.
+    var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1)) +
+        this.spritePos.x;
+
+    // Animation frames.
+    if (this.currentFrame > 0) {
+      sourceX += sourceWidth * this.currentFrame;
+    }
+
+    this.canvasCtx.drawImage(Runner.imageSprite,
+      sourceX, this.spritePos.y,
       sourceWidth * this.size, sourceHeight,
       this.xPos, this.yPos,
       this.typeConfig.width * this.size, this.typeConfig.height);
   },
 
   /**
    * Obstacle frame update.
    * @param {number} deltaTime
    * @param {number} speed
    */
   update: function(deltaTime, speed) {
     if (!this.remove) {
+      if (this.typeConfig.speedOffset) {
+        speed += this.speedOffset;
+      }
       this.xPos -= Math.floor((speed * FPS / 1000) * deltaTime);
+
+      // Update frame
+      if (this.typeConfig.numFrames) {
+        this.timer += deltaTime;
+        if (this.timer >= this.typeConfig.frameRate) {
+          this.currentFrame =
+              this.currentFrame == this.typeConfig.numFrames - 1 ?
+              0 : this.currentFrame + 1;
+          this.timer = 0;
+        }
+      }
       this.draw();
 
       if (!this.isVisible()) {
         this.remove = true;
       }
     }
   },
 
   /**
    * Calculate a random gap size.
@@ skipping 30 matching lines @@
           collisionBoxes[i].height);
     }
   }
 };
 
 
 /**
  * Obstacle definitions.
  * minGap: minimum pixel space betweeen obstacles.
  * multipleSpeed: Speed at which multiples are allowed.
+ * speedOffset: speed faster / slower than the horizon.
+ * minSpeed: Minimum speed which the obstacle can make an appearance.
  */
 Obstacle.types = [
   {
     type: 'CACTUS_SMALL',
-    className: ' cactus cactus-small ',
     width: 17,
     height: 35,
     yPos: 105,
-    multipleSpeed: 3,
+    multipleSpeed: 4,
     minGap: 120,
+    minSpeed: 0,
     collisionBoxes: [
       new CollisionBox(0, 7, 5, 27),
       new CollisionBox(4, 0, 6, 34),
       new CollisionBox(10, 4, 7, 14)
     ]
   },
   {
     type: 'CACTUS_LARGE',
-    className: ' cactus cactus-large ',
     width: 25,
     height: 50,
     yPos: 90,
-    multipleSpeed: 6,
+    multipleSpeed: 7,
     minGap: 120,
+    minSpeed: 0,
     collisionBoxes: [
       new CollisionBox(0, 12, 7, 38),
       new CollisionBox(8, 0, 7, 49),
       new CollisionBox(13, 10, 10, 38)
     ]
+  },
+  {
+    type: 'PTERODACTYL',

[arv (Not doing code reviews), 2015/03/31 19:10:56]

New game elements. Exciting!

[edwardjung, 2015/04/01 10:40:47]

Acknowledged.

+    width: 46,
+    height: 40,
+    yPos: [ 100, 75, 50 ], // Variable height.
+    yPosMobile: [ 100, 50 ], // Variable height mobile.
+    multipleSpeed: 999,
+    minSpeed: 8.5,
+    minGap: 150,
+    collisionBoxes: [
+      new CollisionBox(15, 15, 16, 5),
+      new CollisionBox(18, 21, 24, 6),
+      new CollisionBox(2, 14, 4, 3),
+      new CollisionBox(6, 10, 4, 7),
+      new CollisionBox(10, 8, 6, 9)
+    ],
+    numFrames: 2,
+    frameRate: 1000/6,
+    speedOffset: .8
   }
 ];
 
 
 //******************************************************************************
 /**
  * T-rex game character.
  * @param {HTMLCanvas} canvas
- * @param {HTMLImage} image Character image.
+ * @param {Object} spritePos Positioning within image sprite.
  * @constructor
  */
-function Trex(canvas, image) {
+function Trex(canvas, spritePos) {
   this.canvas = canvas;
   this.canvasCtx = canvas.getContext('2d');
-  this.image = image;
+  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.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;
   this.reachedMinHeight = false;
   this.speedDrop = false;
   this.jumpCount = 0;
   this.jumpspotX = 0;
 
   this.init();
 };
 
 
 /**
  * T-rex player config.
  * @enum {number}
  */
 Trex.config = {
   DROP_VELOCITY: -5,
   GRAVITY: 0.6,
   HEIGHT: 47,
+  HEIGHT_DUCK: 25,
   INIITAL_JUMP_VELOCITY: -10,
   INTRO_DURATION: 1500,
   MAX_JUMP_HEIGHT: 30,
   MIN_JUMP_HEIGHT: 30,
   SPEED_DROP_COEFFICIENT: 3,
   SPRITE_WIDTH: 262,
   START_X_POS: 50,
-  WIDTH: 44
+  WIDTH: 44,
+  WIDTH_DUCK: 59
 };
 
 
 /**
  * Used in collision detection.
  * @type {Array<CollisionBox>}
  */
-Trex.collisionBoxes = [
-  new CollisionBox(1, -1, 30, 26),
-  new CollisionBox(32, 0, 8, 16),
-  new CollisionBox(10, 35, 14, 8),
-  new CollisionBox(1, 24, 29, 5),
-  new CollisionBox(5, 30, 21, 4),
-  new CollisionBox(9, 34, 15, 4)
-];
+Trex.collisionBoxes = {
+  DUCKING: [
+    new CollisionBox(1, 18, 55, 25)
+  ],
+  RUNNING: [
+    new CollisionBox(22, 0, 17, 16),
+    new CollisionBox(1, 18, 30, 9),
+    new CollisionBox(10, 35, 14, 8),
+    new CollisionBox(1, 24, 29, 5),
+    new CollisionBox(5, 30, 21, 4),
+    new CollisionBox(9, 34, 15, 4)
+  ]
+};
 
 
 /**
  * Animation states.
  * @enum {string}
  */
 Trex.status = {
   CRASHED: 'CRASHED',
+  DUCKING: 'DUCKING',
   JUMPING: 'JUMPING',
   RUNNING: 'RUNNING',
   WAITING: 'WAITING'
 };
 
 /**
  * Blinking coefficient.
  * @const
  */
 Trex.BLINK_TIMING = 7000;
@@ skipping 12 matching lines @@
     frames: [88, 132],
     msPerFrame: 1000 / 12
   },
   CRASHED: {
     frames: [220],
     msPerFrame: 1000 / 60
   },
   JUMPING: {
     frames: [0],
     msPerFrame: 1000 / 60
+  },
+  DUCKING: {
+    frames: [262, 321],
+    msPerFrame: 1000 / 8
   }
 };
 
 
 Trex.prototype = {
   /**
    * T-rex player initaliser.
    * Sets the t-rex to blink at random intervals.
    */
   init: function() {
@@ skipping 48 matching lines @@
     } else {
       this.draw(this.currentAnimFrames[this.currentFrame], 0);
     }
 
     // Update the frame position.
     if (this.timer >= this.msPerFrame) {
       this.currentFrame = this.currentFrame ==
           this.currentAnimFrames.length - 1 ? 0 : this.currentFrame + 1;
       this.timer = 0;
     }
+
+    // Speed drop becomes duck if the down key is still being pressed.
+    if (this.speedDrop && this.yPos == this.groundYPos) {
+      this.speedDrop = false;
+      this.setDuck(true);
+    }
   },
 
   /**
    * Draw the t-rex to a particular position.
    * @param {number} x
    * @param {number} y
    */
   draw: function(x, y) {
     var sourceX = x;
     var sourceY = y;
-    var sourceWidth = this.config.WIDTH;
+    var sourceWidth = this.ducking && this.status != Trex.status.CRASHED ?
+        this.config.WIDTH_DUCK : this.config.WIDTH;
     var sourceHeight = this.config.HEIGHT;
 
     if (IS_HIDPI) {
       sourceX *= 2;
       sourceY *= 2;
       sourceWidth *= 2;
       sourceHeight *= 2;
     }
 
-    this.canvasCtx.drawImage(this.image, sourceX, sourceY,
-        sourceWidth, sourceHeight,
-        this.xPos, this.yPos,
-        this.config.WIDTH, this.config.HEIGHT);
+    // Adjustments for sprite sheet position.
+    sourceX += this.spritePos.x;
+    sourceY += this.spritePos.y;
+
+    // Ducking.
+    if (this.ducking && this.status != Trex.status.CRASHED) {
+      this.canvasCtx.drawImage(Runner.imageSprite, sourceX, sourceY,
+          sourceWidth, sourceHeight,
+          this.xPos, this.yPos,
+          this.config.WIDTH_DUCK, this.config.HEIGHT);
+    } else {
+      // Crashed whilst ducking. Trex is standing up so needs adjustment.
+      if (this.ducking && this.status == Trex.status.CRASHED) {
+        this.xPos++;
+      }
+      // Standing / running
+      this.canvasCtx.drawImage(Runner.imageSprite, sourceX, sourceY,
+          sourceWidth, sourceHeight,
+          this.xPos, this.yPos,
+          this.config.WIDTH, this.config.HEIGHT);
+    }
   },
 
   /**
    * Sets a random time for the blink to happen.
    */
   setBlinkDelay: function() {
     this.blinkDelay = Math.ceil(Math.random() * Trex.BLINK_TIMING);
   },
 
   /**
    * Make t-rex blink at random intervals.
    * @param {number} time Current time in milliseconds.
    */
   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;
       }
     }
   },
 
   /**
    * Initialise a jump.
+   * @param {number} speed
    */
-  startJump: function() {
+  startJump: function(speed) {
     if (!this.jumping) {
       this.update(0, Trex.status.JUMPING);
-      this.jumpVelocity = this.config.INIITAL_JUMP_VELOCITY;
+      // Tweak the jump velocity based on the speed.
+      this.jumpVelocity = this.config.INIITAL_JUMP_VELOCITY - (speed / 10);
       this.jumping = true;
       this.reachedMinHeight = false;
       this.speedDrop = false;
     }
   },
 
   /**
    * Jump is complete, falling down.
    */
   endJump: function() {
     if (this.reachedMinHeight &&
         this.jumpVelocity < this.config.DROP_VELOCITY) {
       this.jumpVelocity = this.config.DROP_VELOCITY;
     }
   },
 
   /**
    * Update frame for a jump.
    * @param {number} deltaTime
+   * @param {number} speed
    */
-  updateJump: function(deltaTime) {
+  updateJump: function(deltaTime, speed) {
     var msPerFrame = Trex.animFrames[this.status].msPerFrame;
     var framesElapsed = deltaTime / msPerFrame;
 
     // Speed drop makes Trex fall faster.
     if (this.speedDrop) {
       this.yPos += Math.round(this.jumpVelocity *
           this.config.SPEED_DROP_COEFFICIENT * framesElapsed);
     } else {
       this.yPos += Math.round(this.jumpVelocity * framesElapsed);
     }
@@ skipping 21 matching lines @@
 
   /**
    * Set the speed drop. Immediately cancels the current jump.
    */
   setSpeedDrop: function() {
     this.speedDrop = true;
     this.jumpVelocity = 1;
   },
 
   /**
+   * @param {boolean} isDucking.
+   */
+  setDuck: function(isDucking) {
+    if (isDucking && this.status != Trex.status.DUCKING) {
+      this.update(0, Trex.status.DUCKING);
+      this.ducking = true;
+    } else if (this.status == Trex.status.DUCKING) {
+      this.update(0, Trex.status.RUNNING);
+      this.ducking = false;
+    }
+  },
+
+  /**
    * Reset the t-rex to running at start of game.
    */
   reset: function() {
     this.yPos = this.groundYPos;
     this.jumpVelocity = 0;
     this.jumping = false;
+    this.ducking = false;
     this.update(0, Trex.status.RUNNING);
     this.midair = false;
     this.speedDrop = false;
     this.jumpCount = 0;
   }
 };
 
 
 //******************************************************************************
 
 /**
  * Handles displaying the distance meter.
  * @param {!HTMLCanvasElement} canvas
- * @param {!HTMLImage} spriteSheet Image sprite.
+ * @param {Object} spritePos Image position in sprite.
  * @param {number} canvasWidth
  * @constructor
  */
-function DistanceMeter(canvas, spriteSheet, canvasWidth) {
+function DistanceMeter(canvas, spritePos, canvasWidth) {
   this.canvas = canvas;
   this.canvasCtx = canvas.getContext('2d');
-  this.image = spriteSheet;
+  this.image = Runner.imageSprite;
+  this.spritePos = spritePos;
   this.x = 0;
   this.y = 5;
 
   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.config = DistanceMeter.config;
+  this.maxScoreUnits = this.config.MAX_DISTANCE_UNITS;
   this.init(canvasWidth);
 };
 
 
 /**
  * @enum {number}
  */
 DistanceMeter.dimensions = {
   WIDTH: 10,
   HEIGHT: 13,
   DEST_WIDTH: 11
 };
 
 
 /**
  * Y positioning of the digits in the sprite sheet.
  * X position is always 0.
- * @type {array<number>}
+ * @type {Array<number>}
  */
 DistanceMeter.yPos = [0, 13, 27, 40, 53, 67, 80, 93, 107, 120];
 
 
 /**
  * Distance meter config.
  * @enum {number}
  */
 DistanceMeter.config = {
   // Number of digits.
@@ skipping 15 matching lines @@
 
 DistanceMeter.prototype = {
   /**
    * Initialise the distance meter to '00000'.
    * @param {number} width Canvas width in px.
    */
   init: function(width) {
     var maxDistanceStr = '';
 
     this.calcXPos(width);
-    this.maxScore = this.config.MAX_DISTANCE_UNITS;
-    for (var i = 0; i < this.config.MAX_DISTANCE_UNITS; i++) {
+    this.maxScore = this.maxScoreUnits;
+    for (var i = 0; i < this.maxScoreUnits; i++) {
       this.draw(i, 0);
       this.defaultString += '0';
       maxDistanceStr += '9';
     }
 
     this.maxScore = parseInt(maxDistanceStr);
   },
 
   /**
    * Calculate the xPos in the canvas.
    * @param {number} canvasWidth
    */
   calcXPos: function(canvasWidth) {
     this.x = canvasWidth - (DistanceMeter.dimensions.DEST_WIDTH *
-        (this.config.MAX_DISTANCE_UNITS + 1));
+        (this.maxScoreUnits + 1));
   },
 
   /**
    * Draw a digit to canvas.
    * @param {number} digitPos Position of the digit.
    * @param {number} value Digit value 0-9.
    * @param {boolean} opt_highScore Whether drawing the high score.
    */
   draw: function(digitPos, value, opt_highScore) {
     var sourceWidth = DistanceMeter.dimensions.WIDTH;
     var sourceHeight = DistanceMeter.dimensions.HEIGHT;
     var sourceX = DistanceMeter.dimensions.WIDTH * value;
+    var sourceY = 0;
 
     var targetX = digitPos * DistanceMeter.dimensions.DEST_WIDTH;
     var targetY = this.y;
     var targetWidth = DistanceMeter.dimensions.WIDTH;
     var targetHeight = DistanceMeter.dimensions.HEIGHT;
 
     // For high DPI we 2x source values.
     if (IS_HIDPI) {
       sourceWidth *= 2;
       sourceHeight *= 2;
       sourceX *= 2;
     }
 
+    sourceX += this.spritePos.x;
+    sourceY += this.spritePos.y;
+
     this.canvasCtx.save();
 
     if (opt_highScore) {
       // Left of the current score.
-      var highScoreX = this.x - (this.config.MAX_DISTANCE_UNITS * 2) *
+      var highScoreX = this.x - (this.maxScoreUnits * 2) *
           DistanceMeter.dimensions.WIDTH;
       this.canvasCtx.translate(highScoreX, this.y);
     } else {
       this.canvasCtx.translate(this.x, this.y);
     }
 
-    this.canvasCtx.drawImage(this.image, sourceX, 0,
+    this.canvasCtx.drawImage(this.image, sourceX, sourceY,
         sourceWidth, sourceHeight,
         targetX, targetY,
         targetWidth, targetHeight
       );
 
     this.canvasCtx.restore();
   },
 
   /**
    * Covert pixel distance to a 'real' distance.
    * @param {number} distance Pixel distance ran.
    * @return {number} The 'real' distance ran.
    */
   getActualDistance: function(distance) {
-    return distance ?
-        Math.round(distance * this.config.COEFFICIENT) : 0;
+    return distance ? Math.round(distance * this.config.COEFFICIENT) : 0;
   },
 
   /**
    * Update the distance meter.
+   * @param {number} distance
    * @param {number} deltaTime
-   * @param {number} distance
    * @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) {
         // Acheivement unlocked
         if (distance % this.config.ACHIEVEMENT_DISTANCE == 0) {
           // Flash score and play sound.
           this.acheivement = true;
           this.flashTimer = 0;
           playSound = true;
         }
 
         // Create a string representation of the distance with leading 0.
         var distanceStr = (this.defaultString +
-            distance).substr(-this.config.MAX_DISTANCE_UNITS);
+            distance).substr(-this.maxScoreUnits);
         this.digits = distanceStr.split('');
       } else {
         this.digits = this.defaultString.split('');
       }
     } else {
       // Control flashing of the score on reaching acheivement.
       if (this.flashIterations <= this.config.FLASH_ITERATIONS) {
         this.flashTimer += deltaTime;
 
         if (this.flashTimer < this.config.FLASH_DURATION) {
@@ skipping 35 matching lines @@
   },
 
   /**
    * Set the highscore as a array string.
    * Position of char in the sprite: H - 10, I - 11.
    * @param {number} distance Distance ran in pixels.
    */
   setHighScore: function(distance) {
     distance = this.getActualDistance(distance);
     var highScoreStr = (this.defaultString +
-        distance).substr(-this.config.MAX_DISTANCE_UNITS);
+        distance).substr(-this.maxScoreUnits);
 
     this.highScore = ['10', '11', ''].concat(highScoreStr.split(''));
   },
 
   /**
    * Reset the distance meter back to '00000'.
    */
   reset: function() {
     this.update(0);
     this.acheivement = false;
   }
 };
 
 
 //******************************************************************************
 
 /**
  * Cloud background item.
  * Similar to an obstacle object but without collision boxes.
  * @param {HTMLCanvasElement} canvas Canvas element.
- * @param {Image} cloudImg
+ * @param {Object} spritePos Position of image in sprite.
  * @param {number} containerWidth
  */
-function Cloud(canvas, cloudImg, containerWidth) {
+function Cloud(canvas, spritePos, containerWidth) {
   this.canvas = canvas;
   this.canvasCtx = this.canvas.getContext('2d');
-  this.image = cloudImg;
+  this.spritePos = spritePos;
   this.containerWidth = containerWidth;
   this.xPos = containerWidth;
   this.yPos = 0;
   this.remove = false;
   this.cloudGap = getRandomNum(Cloud.config.MIN_CLOUD_GAP,
       Cloud.config.MAX_CLOUD_GAP);
 
   this.init();
 };
 
@@ skipping 28 matching lines @@
   draw: function() {
     this.canvasCtx.save();
     var sourceWidth = Cloud.config.WIDTH;
     var sourceHeight = Cloud.config.HEIGHT;
 
     if (IS_HIDPI) {
       sourceWidth = sourceWidth * 2;
       sourceHeight = sourceHeight * 2;
     }
 
-    this.canvasCtx.drawImage(this.image, 0, 0,
+    this.canvasCtx.drawImage(Runner.imageSprite, this.spritePos.x,
+        this.spritePos.y,
         sourceWidth, sourceHeight,
         this.xPos, this.yPos,
         Cloud.config.WIDTH, Cloud.config.HEIGHT);
 
     this.canvasCtx.restore();
   },
 
   /**
    * Update the cloud position.
    * @param {number} speed
@@ skipping 19 matching lines @@
   }
 };
 
 
 //******************************************************************************
 
 /**
  * Horizon Line.
  * Consists of two connecting lines. Randomly assigns a flat / bumpy horizon.
  * @param {HTMLCanvasElement} canvas
- * @param {HTMLImage} bgImg Horizon line sprite.
+ * @param {Object} spritePos Horizon position in sprite.
  * @constructor
  */
-function HorizonLine(canvas, bgImg) {
-  this.image = bgImg;
+function HorizonLine(canvas, spritePos) {
+  this.spritePos = spritePos;
   this.canvas = canvas;
   this.canvasCtx = canvas.getContext('2d');
   this.sourceDimensions = {};
   this.dimensions = HorizonLine.dimensions;
-  this.sourceXPos = [0, this.dimensions.WIDTH];
+  this.sourceXPos = [this.spritePos.x, this.spritePos.x +
+      this.dimensions.WIDTH];
   this.xPos = [];
   this.yPos = 0;
   this.bumpThreshold = 0.5;
 
   this.setSourceDimensions();
   this.draw();
 };
 
 
 /**
@@ skipping 34 matching lines @@
    * Return the crop x position of a type.
    */
   getRandomType: function() {
     return Math.random() > this.bumpThreshold ? this.dimensions.WIDTH : 0;
   },
 
   /**
    * Draw the horizon line.
    */
   draw: function() {
-    this.canvasCtx.drawImage(this.image, this.sourceXPos[0], 0,
+    this.canvasCtx.drawImage(Runner.imageSprite, this.sourceXPos[0],
+        this.spritePos.y,
         this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,
         this.xPos[0], this.yPos,
         this.dimensions.WIDTH, this.dimensions.HEIGHT);
 
-    this.canvasCtx.drawImage(this.image, this.sourceXPos[1], 0,
+    this.canvasCtx.drawImage(Runner.imageSprite, this.sourceXPos[1],
+        this.spritePos.y,
         this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,
         this.xPos[1], this.yPos,
         this.dimensions.WIDTH, this.dimensions.HEIGHT);
   },
 
   /**
    * Update the x position of an indivdual piece of the line.
    * @param {number} pos Line position.
    * @param {number} increment
    */
   updateXPos: function(pos, increment) {
     var line1 = pos;
     var line2 = pos == 0 ? 1 : 0;
 
     this.xPos[line1] -= increment;
     this.xPos[line2] = this.xPos[line1] + this.dimensions.WIDTH;
 
     if (this.xPos[line1] <= -this.dimensions.WIDTH) {
       this.xPos[line1] += this.dimensions.WIDTH * 2;
       this.xPos[line2] = this.xPos[line1] - this.dimensions.WIDTH;
-      this.sourceXPos[line1] = this.getRandomType();
+      this.sourceXPos[line1] = this.getRandomType() + this.spritePos.x;
     }
   },
 
   /**
    * Update the horizon line.
    * @param {number} deltaTime
    * @param {number} speed
    */
   update: function(deltaTime, speed) {
     var increment = Math.floor(speed * (FPS / 1000) * deltaTime);
@@ skipping 14 matching lines @@
     this.xPos[1] = HorizonLine.dimensions.WIDTH;
   }
 };
 
 
 //******************************************************************************
 
 /**
  * Horizon background class.
  * @param {HTMLCanvasElement} canvas
- * @param {Array<HTMLImageElement>} images
+ * @param {Object} spritePos Sprite positioning.
  * @param {object} dimensions Canvas dimensions.

[arv (Not doing code reviews), 2015/03/31 19:10:56]

typo here too

[edwardjung, 2015/04/01 10:40:46]

Done.

  * @param {number} gapCoefficient
  * @constructor
  */
-function Horizon(canvas, images, dimensions, gapCoefficient) {
+function Horizon(canvas, spritePos, dimensions, gapCoefficient) {
   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;
 
   // Cloud
   this.clouds = [];
-  this.cloudImg = images.CLOUD;
   this.cloudSpeed = this.config.BG_CLOUD_SPEED;
 
   // Horizon
-  this.horizonImg = images.HORIZON;
   this.horizonLine = null;
 
-  // Obstacles
-  this.obstacleImgs = {
-    CACTUS_SMALL: images.CACTUS_SMALL,
-    CACTUS_LARGE: images.CACTUS_LARGE
-  };
-
   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.horizonImg);
+    this.horizonLine = new HorizonLine(this.canvas, this.spritePos.HORIZON);
   },
 
   /**
    * @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.
    */
   update: function(deltaTime, currentSpeed, updateObstacles) {
@@ skipping 70 matching lines @@
       // Create new obstacles.
       this.addNewObstacle(currentSpeed);
     }
   },
 
   /**
    * Add a new obstacle.
    * @param {number} currentSpeed
    */
   addNewObstacle: function(currentSpeed) {
-    var obstacleTypeIndex =
-        getRandomNum(0, Obstacle.types.length - 1);
+    var obstacleTypeIndex = getRandomNum(0, Obstacle.types.length - 1);
     var obstacleType = Obstacle.types[obstacleTypeIndex];
-    var obstacleImg = this.obstacleImgs[obstacleType.type];
 
-    this.obstacles.push(new Obstacle(this.canvasCtx, obstacleType,
-        obstacleImg, this.dimensions, this.gapCoefficient, currentSpeed));
+    // 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.obstacleHistory.unshift(obstacleType.type);
+
+      if (this.obstacleHistory.length > 1) {
+        this.obstacleHistory.splice(Runner.config.MAX_OBSTACLE_DUPLICATION);
+      }
+    }
   },
 
   /**
+   * Returns whether the previous two obstacles are the same as the next one.
+   * Maximum duplication is set in config value MAX_OBSTACLE_DUPLICATION.
+   * @return {boolean}
+   */
+  duplicateObstacleCheck: function(nextObstacleType) {
+    var duplicateCount = 0;
+
+    for (var i = 0; i < this.obstacleHistory.length; i++) {
+      duplicateCount = this.obstacleHistory[i] == nextObstacleType ?
+          duplicateCount + 1 : 0;
+    }
+    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();
   },
 
   /**
    * 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.cloudImg,
+    this.clouds.push(new Cloud(this.canvas, this.spritePos.CLOUD,
         this.dimensions.WIDTH));
   }
 };
 })();