Update network error template to new design

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() {
+/**
+ * Canvas port of the T-rex runner.
+ * @author Edward Jung (edwardjung@google.com)
+ *
+ * Note, the file referenced on the offline interstitial is the
+ * compiled version.
+ *
+ * Build command:
+ *  java -jar path/to/closure/compiler.jar \
+ *    --compilation_level ADVANCED_OPTIMIZATIONS \
+ *    --js runrunrun-canvas.js \
+ *    --js_output_file runrunrun-canvas.min.js
+ */
+
+
+/**
+ * T-Rex runner.
+ * @param {string} outerContainerId Outer containing element id.
+ * @param {object} opt_config Optional configuration object.
+ * @constructor
+ * @export
+ */
+var Runner = function(outerContainerId, opt_config) {
+  this.outerContainerEl = document.querySelector(outerContainerId);
+
+  this.containerEl = null;
+
+  this.config = opt_config || Runner.config;
+
+  this.dimensions = Runner.defaultDimensions;
+
+  this.canvas = null;
+  this.canvasCtx = null;
+
+  this.tRex = null;
+
+  this.distanceMeter = null;
+  this.distanceRan = 0;
+
+  this.highestScore = 0;
+
+  this.time = 0;
+  this.runningTime = 0;
+  this.msPerFrame = 1000 / Runner.FPS;
+  this.currentSpeed = this.config.SPEED;
+
+  this.obstacles = [];
+
+  this.started = false;
+  this.activated = false;
+  this.crashed = false;
+  this.paused = false;
+
+  this.resizeTimerId_ = null;
+
+  this.playCount = 0;
+
+  // Images.
+  this.images = {};
+  this.imagesLoaded = 0;
+  this.loadImages();
+
+  // Sound FX.
+  this.audioBuffer = null;
+  this.audioContext = window.AudioContext ?
+      new AudioContext() : new webkitAudioContext();
+  this.soundFx = {};
+
+  // Singleton
+  if (Runner.instance_) {
+    return Runner.instance_;
+  }
+  Runner.instance_ = this;
+};
+// Export for Closure compiler
+window['Runner'] = Runner;
+window['Runner']['Trex'] = Runner.Trex;
+window['Runner']['Clouds'] = Runner.Clouds;
+window['Runner']['Horizon'] = Runner.Horizon;
+Runner.prototype['handleEvent'] = Runner.prototype.handleEvent;
+
+
+/**
+ * Singleton getter.
+ * @return {Runner}
+ */
+Runner.getInstance = function(container, opt_config) {
+  return Runner.instance_ || new Runner(container, opt_config);
+};
+
+
+/**
+ * Setting individual settings for debugging.
+ * @param {string} setting Setting name.
+ * @param {*} value Setting value to assign.
+ */
+Runner.prototype.updateConfigSetting = function(setting, value) {
+  if (setting in this.config && value != undefined) {
+    this.config[setting] = value;
+
+    switch (setting) {
+      case 'GRAVITY':
+      case 'MIN_JUMP_HEIGHT':
+      case 'SPEED_DROP_COEFFICIENT':
+        this.tRex.config[setting] = value;
+        break;
+      case 'INITIAL_JUMP_VELOCITY':
+        this.tRex.setJumpVelocity(value);
+        break;
+      case 'SPEED':
+        this.setSpeed(value);
+        break;
+    }
+  }
+};
+
+
+/**
+ * Default game configuration.
+ * @enum {string}
+ */
+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,
+  MIN_JUMP_HEIGHT: 35,
+  MOBILE_SPEED_COEFFICIENT: 1.2,
+  SPEED: 6,
+  SPEED_DROP_COEFFICIENT: 3
+};
+
+
+// Default game width.
+Runner.DEFAULT_WIDTH = 600;
+
+// Frames per second.
+Runner.FPS = 60;
+
+
+/**
+ * Default dimensions.
+ * @enum {string}
+ */
+Runner.defaultDimensions = {
+  WIDTH: Runner.DEFAULT_WIDTH,
+  HEIGHT: 150
+};
+
+
+/**
+ * CSS class names.
+ * @enum {string}
+ */
+Runner.classes = {
+  CANVAS: 'runner-canvas',
+  CONTAINER: 'runner-container',
+  CRASHED: 'crashed',
+  ICON: 'icon-offline',
+  TOUCH_CONTROLLER: 'controller'
+};
+
+
+/**
+ * Image source urls.
+ * @enum {string}
+ */
+Runner.imageSources = {
+  LDPI: [
+      { name: 'CACTUS_LARGE', id: '1x-obstacle-large' },

[arv (Not doing code reviews), 2014/09/15 17:35:44]

wrong indentation

no ws after {

[edwardjung, 2014/09/16 13:14:31]

Done.

+      { 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' }
+    ]
+};
+
+
+/**
+ * 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',
+  SCORE: 'offline-sound-reached'
+};
+
+
+/**
+ * Key code mapping.
+ * @enum {string}
+ */
+Runner.keycodes = {
+  JUMP: { '38': 1, '32': 1 }, // Up, spacebar
+  DUCK: { '40': 1 }, // Down
+  RESTART: { '13': 1 } // Enter
+};
+
+
+/**
+ * Runner event names.
+ * @enum {string}
+ */
+Runner.events = {
+  ANIM_END: 'webkitAnimationEnd',

[arv (Not doing code reviews), 2014/09/15 17:35:43]

skip webkit prefix

[edwardjung, 2014/09/16 13:14:31]

CSS animations are still prefixed in Chrome. The unprefixed event does not work.

+  CLICK: 'click',
+  KEYDOWN: 'keydown',
+  KEYUP: 'keyup',
+  MOUSEDOWN: 'mousedown',
+  MOUSEUP: 'mouseup',
+  RESIZE: 'resize',
+  TOUCHEND: 'touchend',
+  TOUCHSTART: 'touchstart',
+  VISIBILITY: 'visibilitychange',
+  BLUR: 'blur',
+  FOCUS: 'focus',
+  LOAD: 'load'
+};
+
+
+/**
+ * Global web audio context for playing sounds.
+ */
+Runner.audioContext = window.AudioContext ?
+      new AudioContext() : new webkitAudioContext();

[arv (Not doing code reviews), 2014/09/15 17:35:43]

Remove webkit prefix

[arv (Not doing code reviews), 2014/09/15 17:35:43]

wrong indentation

[edwardjung, 2014/09/16 13:14:31]

Done.

[edwardjung, 2014/09/16 13:14:31]

Done. Just assigned a AudioContext instead. 

+
+/**
+ * Load and cache the image assets from the page.
+ */
+Runner.prototype.loadImages = function() {
+  var imageSources = Runner.isHDPI ? Runner.imageSources.HDPI :
+      Runner.imageSources.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);
+

[arv (Not doing code reviews), 2014/09/15 17:35:44]

remove empty line

[edwardjung, 2014/09/16 13:14:32]

Done.

+  }
+  this.init();
+};
+
+
+/**
+ * Load and decode base 64 encoded sounds.
+ */
+Runner.prototype.loadSounds = function() {
+  for (var sound in Runner.sounds) {
+    var soundSrc = String(document.getElementById(Runner.sounds[sound]).src);

[arv (Not doing code reviews), 2014/09/15 17:35:44]

useless String cast?

[edwardjung, 2014/09/16 13:14:31]

Done.

+    soundSrc = soundSrc.substr(soundSrc.indexOf(',') + 1);
+    var buffer = Runner.decodeBase64ToArrayBuffer(soundSrc);
+
+    // Async, so no guarantee of order in array.
+    Runner.audioContext['decodeAudioData'](buffer, function(index, audioData) {

[arv (Not doing code reviews), 2014/09/15 17:35:43]

Why not Runner.audioContext.decodeAudioData? Are you missing some externs?

[edwardjung, 2014/09/16 13:14:32]

Removed. Actually I'm not compiling the file anymore. The closure compiled file
doesn't pass the presubmit checks and didn't feel the extra manual overhead in
maintaining the compiled version was worth it. 

Do you have any suggestions regarding submitting a compiled file. 

+          this.soundFx[index] = audioData;

[arv (Not doing code reviews), 2014/09/15 17:35:43]

wrong indentation

[edwardjung, 2014/09/16 13:14:32]

Done.

+        }.bind(this, sound));
+  }
+
+};
+
+
+/**
+ * Sets the game speed. Adjust the speed accordingly if on a smaller screen.
+ * @param {number} opt_speed Optional speed.
+ */
+Runner.prototype.setSpeed = function(opt_speed) {
+  var speed = opt_speed || this.currentSpeed;
+
+  // Reduce the speed on smaller mobile screens.
+  if (Runner.test.mobile() && this.dimensions.WIDTH < Runner.DEFAULT_WIDTH) {

[arv (Not doing code reviews), 2014/09/15 17:35:43]

Why bother testing if mobile. The screen width should be sufficient

[edwardjung, 2014/09/16 13:14:32]

Done.

We were trying to restrict this to mobile only. However seems like the same
logic should apply to desktop if you happen to resize to a narrow viewport. 

+    var mobileSpeed = speed * ((this.dimensions.WIDTH / Runner.DEFAULT_WIDTH) *
+        this.config.MOBILE_SPEED_COEFFICIENT);
+    this.currentSpeed = mobileSpeed > speed ? speed : mobileSpeed;
+  } else if (opt_speed) {
+    this.currentSpeed = opt_speed;
+  }
+};
+
+
+/**
+ * Game initialiser.
+ */
+Runner.prototype.init = function() {
+  // Hide the static icon.
+  document.querySelector('.' + Runner.classes.ICON).style.visibility = 'hidden';
+
+  this.adjustDimensions();
+  this.setSpeed();
+
+  this.containerEl = document.createElement('div');
+  this.containerEl.className = Runner.classes.CONTAINER;
+
+  // Player canvas container.
+  this.canvas = Runner.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 Runner.Horizon(this.canvas, this.images, this.dimensions,
+      this.config.GAP_COEFFICIENT);
+
+  // Distance meter
+  this.distanceMeter = new Runner.DistanceMeter(this.canvas,
+        this.images['TEXT_SPRITE'], this.dimensions.WIDTH);
+
+  // Draw t-rex
+  this.tRex = new Runner.Trex(this.canvas, this.images['TREX']);
+
+  this.outerContainerEl.appendChild(this.containerEl);
+
+  if (Runner.isMobile) {
+    this.createTouchController();
+  }
+
+  this.startListening();
+  this.update();
+  this.loadSounds();
+
+  window.addEventListener(Runner.events.RESIZE,
+      this.debounceResize.bind(this), false);
+};
+
+
+/**
+ * Create the touch controller. A div that covers whole screen.
+ */
+Runner.prototype.createTouchController = function() {
+  this.touchController = document.createElement('div');
+  this.touchController.className = Runner.classes.TOUCH_CONTROLLER;
+};
+
+
+/**
+ * Debounce the resize event.
+ */
+Runner.prototype.debounceResize = function() {
+  if (!this.resizeTimerId_) {
+    this.resizeTimerId_ =
+        setInterval(this.adjustDimensions.bind(this), 250);
+  }
+};
+
+
+/**
+ * Adjust game space dimensions on resize.
+ */
+Runner.prototype.adjustDimensions = function() {
+  clearInterval(this.resizeTimerId_);
+  this.resizeTimerId_ = null;
+
+  var boxStyles = window.getComputedStyle(this.outerContainerEl);
+  var padding = parseInt(boxStyles.paddingLeft.substr(0,
+      boxStyles.paddingLeft.length - 2));
+
+  this.dimensions.WIDTH = this.outerContainerEl.offsetWidth - (padding * 2);
+
+  // Redraw the elements back onto the canvas.
+  if (this.canvas) {
+    this.canvas.width = this.dimensions.WIDTH;
+    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.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.
+ */
+Runner.prototype.playIntro = function() {
+  if (!this.started && !this.crashed) {
+    this.playingIntro = true;
+    this.tRex.playingIntro = true;
+
+    // CSS animation definition.
+    var keyframes = '@-webkit-keyframes intro { ' +
+          'from { width:' + Runner.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.activated = true;
+    this.started = true;
+  } else if (this.crashed) {
+    this.restart();
+  }
+};
+
+
+/**
+ * Update the game status to started.
+ */
+Runner.prototype.startGame = function() {
+  this.runningTime = 0;
+  this.playingIntro = false;
+  this.tRex.playingIntro = false;
+  this.containerEl.style.webkitAnimation = '';
+  this.playCount++;
+
+  // Handle tabbing off the page. Pause the current game.
+  window.addEventListener(Runner.events.VISIBILITY,
+        this.onVisibilityChange.bind(this), false);
+
+  window.addEventListener(Runner.events.BLUR,
+        this.onVisibilityChange.bind(this), false);
+
+  window.addEventListener(Runner.events.FOCUS,
+        this.onVisibilityChange.bind(this), false);
+};
+
+
+/**
+ * Clear the whole canvas.
+ */
+Runner.prototype.clearCanvas = function() {
+  this.canvasCtx.clearRect(0, 0, this.dimensions.WIDTH, this.dimensions.HEIGHT);
+};
+
+
+/**
+ * Update the game frame.
+ */
+Runner.prototype.update = function() {
+  this.drawPending = false;
+
+  var now = new Date().getTime();

[arv (Not doing code reviews), 2014/09/15 17:35:44]

Date.now but you are better of using performance.now for better granularity

[edwardjung, 2014/09/16 13:14:32]

Thanks for the tip. Switched to performance.now.

+  var deltaTime = now - (this.time || now);
+  this.time = now;
+
+  // Chrome Tracer
+  // if (deltaTime > 17) {
+  //   console.time('update');
+  // }
+
+  if (this.activated) {
+    this.clearCanvas();
+
+    if (this.tRex.jumping) {
+       this.tRex.updateJump(deltaTime, this.config);

[arv (Not doing code reviews), 2014/09/15 17:35:44]

wrong indent

[edwardjung, 2014/09/16 13:14:31]

Done.

+    }
+
+    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;
+      this.horizon.update(deltaTime, this.currentSpeed, hasObstacles);
+    }
+
+    // Check for collisions.
+    var collision = hasObstacles ?
+        Runner.Collision.check(this.horizon.obstacles[0], this.tRex) : false;
+
+    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;
+    }
+
+    this.distanceMeter.update(deltaTime, Math.ceil(this.distanceRan),
+        this.soundFx.SCORE);
+  }
+
+  if (!this.crashed) {
+    this.tRex.update(deltaTime);
+    this.raq();
+  }
+  // if (deltaTime > 17) {
+  //   console.timeEnd('update');
+  // }
+};
+
+
+/**
+ * Updates the canvas size taking into
+ * account the backing store pixel ratio and
+ * the device pixel ratio.
+ *
+ * See article by Paul Lewis:
+ * http://www.html5rocks.com/en/tutorials/canvas/hidpi/
+ *
+ * @param {HTMLCanvasElement} canvas Canvas to scale.
+ * @param {number} opt_width Canvas to scale.
+ * @param {number} opt_width Canvas to scale.
+ * @return {boolean} Whether the canvas was scaled.
+ */
+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
+    // our canvas element.
+    context.scale(ratio, ratio);
+    return true;
+  }
+  return false;
+};
+
+
+/**
+ * Draw the collision boxes on canvas, for debugging.
+ * @param {Runner.CollisionBox} collision T-Rex collison box.
+ * @param {Runner.CollisionBox} obstacle Obstacle collison box.
+ */
+Runner.prototype.drawCollisionBoxes = function(collision, obstacle) {
+  this.canvasCtx.save();
+  this.canvasCtx.strokeStyle = '#f00';
+  this.canvasCtx.strokeRect(collision[0].x, collision[0].y,
+      collision[0].width, collision[0].height);
+
+  this.canvasCtx.strokeStyle = '#00f';
+  this.canvasCtx.strokeRect(collision[1].x, collision[1].y,
+      collision[1].width, collision[1].height);
+  this.canvasCtx.restore();
+};
+
+
+/**
+ * Event handler.
+ */
+Runner.prototype.handleEvent = function(e) {
+  switch (e.type) {
+    case Runner.events.KEYDOWN:

[arv (Not doing code reviews), 2014/09/15 17:35:44]

I would just put all of this code in an IIFE and have local constants for these
instead of putting them on Runner.

[edwardjung, 2014/09/16 13:14:30]

Something like this?

+    case Runner.events.TOUCHSTART:
+    case Runner.events.MOUSEDOWN:
+      this.onKeyDown(e);
+      break;
+    case Runner.events.KEYUP:
+    case Runner.events.TOUCHEND:
+    case Runner.events.MOUSEUP:
+      this.onKeyUp(e);
+      break;
+  }
+};
+
+
+/**
+ * Bind relevant key / mouse / touch listeners.
+ */
+Runner.prototype.startListening = function() {
+  // Keys.
+  document.addEventListener(Runner.events.KEYDOWN, this);
+  document.addEventListener(Runner.events.KEYUP, this);
+
+  if (Runner.isMobile) {
+    // Mobile only touch devices.
+    this.touchController.addEventListener(Runner.events.TOUCHSTART, this);
+    this.touchController.addEventListener(Runner.events.TOUCHEND, this);
+    this.containerEl.addEventListener(Runner.events.TOUCHSTART, this);
+  } else {
+    // Mouse.
+    document.addEventListener(Runner.events.MOUSEDOWN, this, false);
+    document.addEventListener(Runner.events.MOUSEUP, this, false);
+  }
+};
+
+
+/**
+ * Remove all listeners.
+ */
+Runner.prototype.stopListening = function() {
+  document.removeEventListener(Runner.events.KEYDOWN, this);
+  document.removeEventListener(Runner.events.KEYUP, this);
+
+  if (Runner.isMobile) {
+    this.touchController.removeEventListener(Runner.events.TOUCHSTART, this);
+    this.touchController.removeEventListener(Runner.events.TOUCHEND, this);
+    this.containerEl.removeEventListener(Runner.events.TOUCHSTART, this);
+  } else {
+    document.removeEventListener(Runner.events.MOUSEDOWN, this, false);
+    document.removeEventListener(Runner.events.MOUSEUP, this, false);
+  }
+};
+
+
+/**
+ * Process keydown.
+ * @param {Event} e The event object.
+ */
+Runner.prototype.onKeyDown = function(e) {
+
+  if (!this.crashed && (Runner.keycodes.JUMP[String(e.keyCode)] ||
+       e.type == Runner.events.TOUCHSTART)) {
+    if (!this.activated) {
+      this.activated = true;
+    }
+
+    if (!this.tRex.jumping) {
+      Runner.playSound(this.soundFx.BUTTON_PRESS);
+      this.tRex.startJump();
+    }
+  }
+
+  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[String(e.keyCode)] && this.tRex.jumping) {

[arv (Not doing code reviews), 2014/09/15 17:35:43]

useless stringify

[edwardjung, 2014/09/16 13:14:31]

Done.

+    e.preventDefault();
+    this.tRex.setSpeedDrop();
+  }
+};
+
+
+/**
+ * Process key up.
+ * @param {Event} e The event object.
+ */
+Runner.prototype.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;
+  } else if (this.crashed) {
+    // Check that enough time has elapsed before allowing jump key to restart.
+    var deltaTime = new Date().getTime() - 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])) {
+      this.restart();
+    }
+  } else if (this.paused && isjumpKey) {
+    this.play();
+  }
+};
+
+
+/**
+ * RequestAnimationFrame wrapper.
+ */
+Runner.prototype.raq = function() {
+  if (!this.drawPending) {
+    this.drawPending = true;
+    this.raqId = requestAnimationFrame(this.update.bind(this));
+  }
+};
+
+
+/**
+ * Whether the game is running.
+ * @return {boolean}
+ */
+Runner.prototype.isRunning = function() {
+  return this.raqId ? true : false;
+};
+
+
+/**
+ * Get random number.
+ * @param {number} min Minimum number.
+ * @param {number} max Maximum number.
+ * @param {number} A random number.
+ */
+Runner.getRandomNum = function(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+
+Runner.vibrate = function(duration) {
+  if (Runner.isMobile) {
+    window.navigator['vibrate'](duration);
+  }
+};
+
+/**
+ * Game over state.
+ */
+Runner.prototype.gameOver = function() {
+  Runner.playSound(this.soundFx.HIT);
+  Runner.vibrate(200);
+
+  this.stop();
+  this.crashed = true;
+  this.distanceMeter.acheivement = false;
+
+  this.tRex.update(100, Runner.Trex.status.CRASHED);
+
+  // Game over panel.
+  if (!this.gameOverPanel) {
+    this.gameOverPanel = new Runner.GameOverPanel(this.canvas,
+        this.images['TEXT_SPRITE'], this.images['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);
+  }
+
+  // Reset the time clock.
+  this.time = new Date().getTime();
+};
+
+
+/**
+ * Stop the game.
+ */
+Runner.prototype.stop = function() {
+  this.activated = false;
+  this.paused = true;
+  cancelAnimationFrame(this.raqId);
+  this.raqId = 0;
+};
+
+
+/**
+ * Play the game.
+ */
+Runner.prototype.play = function() {
+  if (!this.crashed) {
+    this.activated = true;
+    this.paused = false;
+    this.tRex.update(0, Runner.Trex.status.RUNNING);
+    this.time = new Date().getTime();
+    this.update();
+  }
+};
+
+
+/**
+ * Restart game.
+ */
+Runner.prototype.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 = new Date().getTime();
+    this.containerEl.classList.remove(Runner.classes.CRASHED);
+    this.clearCanvas();
+    this.distanceMeter.reset(this.highestScore);
+    this.horizon.reset();
+    this.tRex.reset();
+    Runner.playSound(this.soundFx.BUTTON_PRESS);
+
+    this.update();
+  }
+};
+
+
+/**
+ * Pause the game if the tab is not in focus.
+ */
+Runner.prototype.onVisibilityChange = function(e) {
+  if (document.hidden || document.webkitHidden || e.type == 'blur') {
+    this.stop();
+  } else {
+    this.play();
+  }
+};
+
+
+/**
+ * Whether the game is running.
+ * @return {boolean}
+ */
+Runner.prototype.isRunning = function() {
+  return this.raqId ? true : false;

[arv (Not doing code reviews), 2014/09/15 17:35:43]

return !!this.raqId;

[edwardjung, 2014/09/16 13:14:30]

Done.

+};
+
+
+/**
+ * Create canvas element.
+ * @param {HTMLElement} container Container element to append canvas to.
+ * @param {number} width Width of canvas.
+ * @param {number} height Height of canvas
+ * @param {string} opt_classname Optional class name.
+ * @return {HTMLCanvasElement} The canvas element.
+ */
+Runner.createCanvas = function(container, width, height, opt_classname) {
+  var canvas = document.createElement('canvas');
+  canvas.className = opt_classname ? Runner.classes.CANVAS + ' ' +
+      opt_classname : Runner.classes.CANVAS;
+  canvas.width = width;
+  canvas.height = height;
+  container.appendChild(canvas);
+
+  return canvas;
+};
+
+
+/**
+ * Play a sound.
+ * @param {SoundBuffer} soundBuffer
+ */
+Runner.playSound = function(soundBuffer) {
+  if (soundBuffer) {
+    var sourceNode = Runner.audioContext['createBufferSource']();
+    sourceNode.buffer = soundBuffer;
+    sourceNode['connect'](Runner.audioContext['destination']);
+    sourceNode['start'](0);
+  }
+};
+
+
+/**
+ * Decodes the base 64 audio to ArrayBuffer used by Web Audio.
+ */
+Runner.decodeBase64ToArrayBuffer = function(base64String) {
+
+  var len = (base64String.length / 4) * 3;
+  var str = atob(base64String);
+  var arrayBuffer = new ArrayBuffer(len);
+  var bytes = new Uint8Array(arrayBuffer);
+
+  for (var i = 0; i < len; i++) {
+    bytes[i] = str.charCodeAt(i);
+  }
+  return bytes.buffer;
+};
+
+
+Runner.test = {};
+
+/**
+ * Test for mobile platform.
+ * @return {boolean} Whether the platform is mobile.
+ */
+Runner.test.mobile = function() {
+  return window.navigator.userAgent.indexOf('Mobi') > -1;
+};
+
+/**
+ * Test for hi DPI.
+ * @return {boolean} Whether the device has a high device pixel ratio.
+ */
+Runner.test.hiDPI = function() {
+  return window.devicePixelRatio > 1;
+};
+
+
+/**
+ * Test for touch.
+ * @return {boolean} Whether touch support is available.
+ */
+Runner.test.touchEnabled = function() {
+  return 'ontouchstart' in window;
+};
+
+
+Runner.isHDPI = Runner.test.hiDPI();
+
+Runner.isMobile = Runner.test.mobile();
+
+Runner.isTouchEnabled = Runner.test.touchEnabled();
+
+
+//******************************************************************************
+
+
+/**
+ * Game over panel.
+ * @param {!HTMLCanvasElement} canvas  Canvas element to draw on.
+ * @param {!HTMLImage} textSprite Text sprite Image
+ * @param {!HTMLImage} restartImg Restart image.
+ * @param {!Object} dimensions Dimensions of the canvas.
+ * @constructor
+ */
+Runner.GameOverPanel = function(canvas, textSprite, restartImg, dimensions) {
+  this.canvas = canvas;
+
+  this.canvasCtx = canvas.getContext('2d');
+
+  this.canvasDimensions = dimensions;
+
+  this.textSprite = textSprite;
+
+  this.restartImg = restartImg;
+
+  this.draw();
+};
+
+
+/**
+ * Dimensions used in the panel.
+ * @enum {string}
+ */
+Runner.GameOverPanel.dimensions = {
+  TEXT_X: 0,
+  TEXT_Y: 13,
+  TEXT_WIDTH: 191,
+  TEXT_HEIGHT: 11,
+  RESTART_WIDTH: 36,
+  RESTART_HEIGHT: 32
+};
+
+
+/**
+ * Update the panel dimensions.
+ * @param {number} width New canvas width.
+ * @param {number} opt_height Optional new canvas height.
+ */
+Runner.GameOverPanel.prototype.updateDimensions = function(width, opt_height) {
+  this.canvasDimensions.WIDTH = width;
+  if (opt_height) {
+    this.canvasDimensions.HEIGHT = opt_height;
+  }
+};
+
+
+/**
+ * Draw the panel.
+ */
+Runner.GameOverPanel.prototype.draw = function() {
+  var dimensions = Runner.GameOverPanel.dimensions;
+
+  var centerX = this.canvasDimensions.WIDTH / 2;
+
+  // Game over text.
+  var textSourceX = dimensions.TEXT_X;
+  var textSourceY = dimensions.TEXT_Y;
+  var textSourceWidth = dimensions.TEXT_WIDTH;
+  var textSourceHeight = dimensions.TEXT_HEIGHT;
+
+  var textTargetX = Math.round(centerX - (dimensions.TEXT_WIDTH / 2));
+  var textTargetY = Math.round((this.canvasDimensions.HEIGHT - 25) / 3);
+  var textTargetWidth = dimensions.TEXT_WIDTH;
+  var textTargetHeight = dimensions.TEXT_HEIGHT;
+
+  var restartSourceWidth = dimensions.RESTART_WIDTH;
+  var restartSourceHeight = dimensions.RESTART_HEIGHT;
+  var restartTargetX = centerX - (dimensions.RESTART_WIDTH / 2);
+  var restartTargetY = this.canvasDimensions.HEIGHT / 2;
+
+
+  if (Runner.isHDPI) {
+    textSourceY *= 2;
+    textSourceX *= 2;
+    textSourceWidth = textSourceWidth * 2;
+    textSourceHeight = textSourceHeight * 2;
+    restartSourceWidth = restartSourceWidth * 2;
+    restartSourceHeight = restartSourceHeight * 2;
+  }
+
+  // Game over text from sprite.
+  this.canvasCtx.drawImage(this.textSprite,
+      textSourceX, textSourceY, textSourceWidth, textSourceHeight,
+      textTargetX, textTargetY, textTargetWidth, textTargetHeight);
+
+  // Restart button.
+  this.canvasCtx.drawImage(this.restartImg, 0, 0,
+      restartSourceWidth, restartSourceHeight,
+      restartTargetX, restartTargetY, dimensions.RESTART_WIDTH,
+      dimensions.RESTART_HEIGHT);
+};
+
+
+//******************************************************************************
+
+/**
+ * Collision checker utilities.
+ */
+Runner.Collision = function() {};
+
+
+/**
+ * Check for a collision.
+ * @param {!Runner.Obstacle} obstacle Obstacle object.
+ * @param {!Runner.Trex} tRex T-rex object.
+ * @param {HTMLCanvasContext} opt_canvasCtx Optional canvas context for drawing
+ *    collision boxes.
+ * @return {Array.<Runner.CollisionBox>}
+ */
+Runner.Collision.check = function(obstacle, tRex, opt_canvasCtx) {
+  var obstacleBoxXPos = Runner.defaultDimensions.WIDTH + obstacle.xPos;
+
+  // Adjustments are made to the bounding box as there is a 1 pixel white
+  // border around the t-rex and obstacles.
+  var tRexBox = new Runner.CollisionBox(
+      tRex.xPos + 1,
+      tRex.yPos + 1,
+      tRex.config.WIDTH - 2,
+      tRex.config.HEIGHT - 2
+    );
+
+  var obstacleBox = new Runner.CollisionBox(
+      obstacle.xPos + 1,
+      obstacle.yPos + 1,
+      obstacle.typeConfig.width * obstacle.size - 2,
+      obstacle.typeConfig.height - 2
+    );
+
+  // Debug outer box
+  if (opt_canvasCtx) {
+    Runner.Collision.drawCollisionBoxes(opt_canvasCtx, tRexBox, obstacleBox);
+  }
+
+  // Simple outer bounds check.
+  if (Runner.Collision.boxCompare(tRexBox, obstacleBox)) {
+    var collisionBoxes = obstacle.collisionBoxes;
+    var tRexCollisionBoxes = Runner.Trex.collisionBoxes;
+
+    // Detailed axis aligned box check.
+    for (var t = 0, l = tRexCollisionBoxes.length; t < l; t++) {
+      for (var i = 0, j = collisionBoxes.length; i < j; i++) {
+        // Adjust the box to actual positions.
+        var adjTrexBox =
+            Runner.Collision.createAdjustedCollisionBox(tRexCollisionBoxes[t],
+                tRexBox);
+        var adjObstacleBox =
+            Runner.Collision.createAdjustedCollisionBox(collisionBoxes[i],
+                obstacleBox);
+
+        var crashed = Runner.Collision.boxCompare(adjTrexBox, adjObstacleBox);
+
+        // Draw boxes for debug.
+        if (opt_canvasCtx) {
+          Runner.Collision.drawCollisionBoxes(opt_canvasCtx,
+              adjTrexBox, adjObstacleBox);
+        }
+
+        if (crashed) {
+          return [adjTrexBox, adjObstacleBox];
+        }
+      }
+    }
+  }
+  return false;
+};
+
+
+/**
+ * Adjust the collision box.
+ * @param {!Runner.CollisionBox} box The original box.
+ * @param {!Runner.CollisionBox} adjustment Adjustment box.
+ * @return {Runner.CollisionBox} The adjusted collision box object.
+ */
+Runner.Collision.createAdjustedCollisionBox = function(box, adjustment) {
+  return new Runner.CollisionBox(
+      box.x + adjustment.x,
+      box.y + adjustment.y,
+      box.width,
+      box.height);
+};
+
+
+/**
+ * Draw the collision box for debug.
+ */
+Runner.Collision.drawCollisionBoxes =
+    function(canvasCtx, tRexBox, obstacleBox) {
+  canvasCtx.save();
+  canvasCtx.strokeStyle = '#f00';
+  canvasCtx.strokeRect(tRexBox.x, tRexBox.y,
+  tRexBox.width, tRexBox.height);
+
+  canvasCtx.strokeStyle = '#0f0';
+  canvasCtx.strokeRect(obstacleBox.x, obstacleBox.y,
+  obstacleBox.width, obstacleBox.height);
+  canvasCtx.restore();
+};
+
+
+/**
+ * Compare two collision boxes for a collision.
+ * @param {Runner.CollisionBox} tRexBox
+ * @param {Runner.CollisionBox} obstacleBox
+ * @return {boolean} Whether the boxes intersected.
+ */
+Runner.Collision.boxCompare = function(tRexBox, obstacleBox) {
+  var crashed = false;
+  var tRexBoxX = tRexBox.x;
+  var tRexBoxY = tRexBox.y;
+
+  var obstacleBoxX = obstacleBox.x;
+  var obstacleBoxY = obstacleBox.y;
+
+  // Axis-Aligned Bounding Box method.
+  if (tRexBox.x < obstacleBoxX + obstacleBox.width &&
+      tRexBox.x + tRexBox.width > obstacleBoxX &&
+      tRexBox.y < obstacleBox.y + obstacleBox.height &&
+      tRexBox.height + tRexBox.y > obstacleBox.y) {
+    crashed = true;
+  }
+
+  return crashed;
+};
+
+
+//******************************************************************************
+
+/**
+ * Collision box object.
+ * @param {number} x X position.
+ * @param {number} y Y Position.
+ * @param {number} w Width.
+ * @param {number} h Height.
+ */
+Runner.CollisionBox = function(x, y, w, h) {
+  this.x = x;
+  this.y = y;
+  this.width = w;
+  this.height = h;
+};
+
+
+//******************************************************************************
+
+/**
+ * Obstacle.
+ * @param {HTMLCanvasCtx} canvasCtx Canvas context.
+ * @param {Runner.Obstacle.type} type Type of object.
+ * @param {image} obstacleImg Image sprite to use obstacle.
+ * @param {Object} dimensions Obstacle dimensions.
+ * @param {number} gapCoefficient Mutipler in determining the gap.
+ * @param {number} speed Current game speed.
+ */
+Runner.Obstacle = function(canvasCtx, type, obstacleImg, dimensions,
+    gapCoefficient, speed) {
+
+  this.canvasCtx = canvasCtx;
+
+  this.image = obstacleImg;
+
+  this.typeConfig = type;
+
+  this.gapCoefficient = gapCoefficient;
+
+  this.size = Runner.getRandomNum(1, Runner.Obstacle.MAX_OBSTACLE_LENGTH);
+
+  this.dimensions = dimensions;
+
+  this.remove = false;
+
+  this.xPos = 0;
+
+  this.yPos = this.typeConfig.yPos;
+
+  this.width = 0;
+
+  this.collisionBoxes = [];
+
+  this.gap = 0;
+
+  this.init(speed);
+};
+
+/**
+ *
+ */
+Runner.Obstacle.MAX_GAP_COEFFICIENT = 1.5;
+
+/**
+ * Maximum obstacle grouping count.
+ */
+Runner.Obstacle.MAX_OBSTACLE_LENGTH = 3,
+
+
+/**
+ * Initialise the DOM for the obstacle.
+ * @param {number} speed
+ */
+Runner.Obstacle.prototype.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;
+
+  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;
+  }
+
+  this.gap = this.getGap(this.gapCoefficient, speed);
+};
+
+
+/**
+ * Draw and crop based on size.
+ */
+Runner.Obstacle.prototype.draw = function() {
+  // this.canvasCtx.save();
+
+  var sourceWidth = this.typeConfig.width;
+  var sourceHeight = this.typeConfig.height;
+
+  if (Runner.isHDPI) {
+    sourceWidth = sourceWidth * 2;
+    sourceHeight = sourceHeight * 2;
+  }
+
+  // Sprite
+  var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1));
+  this.canvasCtx.drawImage(this.image,
+        sourceX, 0,
+        sourceWidth * this.size, sourceHeight,
+        this.xPos, this.yPos,
+        this.typeConfig.width * this.size, this.typeConfig.height);
+  // this.canvasCtx.restore();
+};
+
+
+/**
+ * Obstacle frame update.
+ * @param {number} deltaTime Time in ms.
+ * @param {number} speed Current speed.
+ */
+Runner.Obstacle.prototype.update = function(deltaTime, speed) {
+  if (!this.remove) {
+    this.xPos -= Math.floor((speed * Runner.FPS / 1000) * deltaTime);
+    this.draw();
+
+    if (!this.isVisible()) {
+      this.remove = true;
+    }
+  }
+};
+
+
+/**
+ * Calculate a random gap size.
+ * - Minimum gap gets wider as speed increses
+ * @param {number} gapCoefficient
+ * @param {number} speed Current speed.
+ * @return {number} The gap size.
+ */
+Runner.Obstacle.prototype.getGap = function(gapCoefficient, speed) {
+  var minGap = Math.round((this.width * speed) +
+        (this.typeConfig.minGap * gapCoefficient));
+  var maxGap = Math.round(minGap * Runner.Obstacle.MAX_GAP_COEFFICIENT);
+  return Runner.getRandomNum(minGap, maxGap);
+};
+
+
+
+/**
+ * Check if obstacle is visible.
+ * @return {boolean} Whether the obstacle is in the game area.
+ */
+Runner.Obstacle.prototype.isVisible = function() {
+  return (this.xPos + this.width) > 0;
+};
+
+
+/**
+ * Make a copy of the collision boxes, since these will change based on
+ * obstacle type and size.
+ */
+Runner.Obstacle.prototype.cloneCollisionBoxes = function() {
+  var collisionBoxes = this.typeConfig.collisionBoxes;
+
+  for (var i = collisionBoxes.length - 1; i >= 0; i--) {
+    this.collisionBoxes[i] = new Runner.CollisionBox(collisionBoxes[i].x,
+        collisionBoxes[i].y, collisionBoxes[i].width, collisionBoxes[i].height);
+  }
+};
+
+
+/**
+ * Obstacle definitions.
+ * minGap: minimum pixel space betweeen obstacles.
+ * multipleSpeed: Speed at which multiples are allowed.
+ */
+Runner.Obstacle.types = [
+  {
+    type: 'CACTUS_SMALL',
+    className: ' cactus cactus-small ',
+    width: 17,
+    height: 35,
+    yPos: 105,
+    multipleSpeed: 3,
+    minGap: 120,
+    collisionBoxes: [
+        new Runner.CollisionBox(0, 7, 5, 27),
+        new Runner.CollisionBox(4, 0, 6, 34),
+        new Runner.CollisionBox(10, 4, 7, 14)
+      ]
+  },
+  {
+    type: 'CACTUS_LARGE',
+    className: ' cactus cactus-large ',
+    width: 25,
+    height: 50,
+    yPos: 90,
+    multipleSpeed: 6,
+    minGap: 120,
+    collisionBoxes: [
+        new Runner.CollisionBox(0, 12, 7, 38),
+        new Runner.CollisionBox(8, 0, 7, 49),
+        new Runner.CollisionBox(13, 10, 10, 38)
+      ]
+  }
+];
+
+
+//******************************************************************************
+/**
+ * T-rex game character.
+ * @param {HTMLCanvas} canvas HTML Canvas.
+ * @param {HTMLImage} image Character image.
+ * @constructor
+ */
+Runner.Trex = function(canvas, image) {
+  this.canvas = canvas;
+  this.canvasCtx = canvas.getContext('2d');
+
+  this.image = image;
+
+  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 / Runner.FPS;
+
+  this.config = Runner.Trex.config;
+
+  // Current status.
+  this.status = Runner.Trex.status.WAITING;
+
+  this.jumping = false;
+
+  this.jumpVelocity = 0;
+
+  this.reachedMinHeight = false;
+
+  this.speedDrop = false;
+
+  this.jumpCount = 0;
+
+  this.jumpspotX = 0;
+
+  this.init();
+};
+
+
+/**
+ * T-rex player config.
+ */
+Runner.Trex.config = {
+  DROP_VELOCITY: -5,
+  GRAVITY: 0.6,
+  HEIGHT: 47,
+  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
+};
+
+
+/**
+ * Used in collision detection.
+ * @type {Array.<Runner.CollisionBox>}
+ */
+Runner.Trex.collisionBoxes = [
+  new Runner.CollisionBox(1, -1, 30, 26),
+  new Runner.CollisionBox(32, 0, 8, 16),
+  new Runner.CollisionBox(10, 35, 14, 8),
+  new Runner.CollisionBox(1, 24, 29, 5),
+  new Runner.CollisionBox(5, 30, 21, 4),
+  new Runner.CollisionBox(9, 34, 15, 4)
+];
+
+
+/**
+ * Animation states.
+ * @enum {string}
+ */
+Runner.Trex.status = {
+  CRASHED: 'crashed',
+  JUMPING: 'jumping',
+  RUNNING: 'running',
+  WAITING: 'waiting'
+};
+
+// Blinking coefficient.
+Runner.Trex.BLINK_TIMING = 7000;
+
+
+/**
+ * Animation config for different states.
+ */
+Runner.Trex.animFrames = {
+  'waiting': {
+      frames: [44, 0],
+      msPerFrame: 1000 / 3
+    },
+  'running': {
+      frames: [88, 132],
+      msPerFrame: 1000 / 12
+    },
+  'crashed': {
+      frames: [220],
+      msPerFrame: 1000 / 60
+    },
+  'jumping': {
+      frames: [0],
+      msPerFrame: 1000 / 60
+    }
+};
+
+/**
+ * T-rex player initaliser.
+ * Sets the t-rex to blink at random intervals.
+ */
+Runner.Trex.prototype.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, Runner.Trex.status.WAITING);
+};
+
+
+/**
+ * Setter for the jump velocity.
+ * The approriate drop velocity is also set.
+ */
+Runner.Trex.prototype.setJumpVelocity = function(setting) {
+  this.config.INIITAL_JUMP_VELOCITY = -setting;
+  this.config.DROP_VELOCITY = -setting / 2;
+};
+
+
+/**
+ * Set the animation status.
+ * @param {!number} deltaTime Time since last update.
+ * @param {Runner.Trex.status} status Optional status to switch to.
+ */
+Runner.Trex.prototype.update = function(deltaTime, opt_status) {
+  this.timer += deltaTime;
+
+  // Update the status.
+  if (opt_status) {
+    this.status = opt_status;
+    this.currentFrame = 0;
+    this.msPerFrame = Runner.Trex.animFrames[opt_status].msPerFrame;
+    this.currentAnimFrames = Runner.Trex.animFrames[opt_status].frames;
+
+    if (opt_status == Runner.Trex.status.WAITING) {
+      this.animStartTime = new Date().getTime();
+      this.setBlinkDelay();
+    }
+  }
+
+  // Game intro animation, t-rex moves in from the left.
+  if (this.playingIntro && this.xPos < this.config.START_X_POS) {
+    this.xPos += Math.round((this.config.START_X_POS /
+        this.config.INTRO_DURATION) * deltaTime);
+  }
+
+  if (this.status == Runner.Trex.status.WAITING) {
+    this.blink(new Date().getTime());
+  } 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;
+  }
+};
+
+
+/**
+ * Draw the t-rex to a particular position.
+ * @param {number} x X position.
+ * @param {number} y Y position.
+ */
+Runner.Trex.prototype.draw = function(x, y) {
+  var sourceX = x;
+  var sourceY = y;
+  var sourceWidth = this.config.WIDTH;
+  var sourceHeight = this.config.HEIGHT;
+
+  if (Runner.isHDPI) {
+    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);
+};
+
+
+/**
+ * Sets a random time for the blink to happen.
+ */
+Runner.Trex.prototype.setBlinkDelay = function() {
+  this.blinkDelay = Math.ceil(Math.random() * Runner.Trex.BLINK_TIMING);
+};
+
+/**
+ * Make t-rex blink at random intervals.
+ * @param {number} time Current time in milliseconds.
+ */
+Runner.Trex.prototype.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.
+ */
+Runner.Trex.prototype.startJump = function() {
+  if (!this.jumping) {
+    this.update(0, Runner.Trex.status.JUMPING);
+    this.jumpVelocity = this.config.INIITAL_JUMP_VELOCITY;
+    this.jumping = true;
+    this.reachedMinHeight = false;
+    this.speedDrop = false;
+  }
+};
+
+
+/**
+ * Jump is complete, falling down.
+ */
+Runner.Trex.prototype.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 Time since last update.
+ */
+Runner.Trex.prototype.updateJump = function(deltaTime) {
+  var msPerFrame = Runner.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);
+  }
+
+  this.jumpVelocity += this.config.GRAVITY * framesElapsed;
+
+  // Minimum height has been reached.
+  if (this.yPos < this.minJumpHeight || this.speedDrop) {
+    this.reachedMinHeight = true;
+  }
+
+  // Reached max height
+  if (this.yPos < this.config.MAX_JUMP_HEIGHT || this.speedDrop) {
+    this.endJump();
+  }
+
+  // Back down at ground level. Jump completed.
+  if (this.yPos > this.groundYPos) {
+    this.reset();
+    this.jumpCount++;
+  }
+
+  this.update(deltaTime);
+};
+
+
+/**
+ * Set the speed drop. Immediately cancels the current jump.
+ */
+Runner.Trex.prototype.setSpeedDrop = function() {
+  this.tRex.speedDrop = true;
+  this.tRex.jumpVelocity = 1;
+};
+
+
+/**
+ * Reset the t-rex to running at start of game.
+ */
+Runner.Trex.prototype.reset = function() {
+  this.yPos = this.groundYPos;
+  this.jumpVelocity = 0;
+  this.jumping = false;
+  this.update(0, Runner.Trex.status.RUNNING);
+  this.midair = false;
+  this.speedDrop = false;
+  this.jumpCount = 0;
+};
+
+
+//******************************************************************************
+
+/**
+ * Handles displaying the distance meter.
+ * @param {!HTMLCanvasElement} canvas Canvas element to draw to.
+ * @param {!HTMLImage} spriteSheet Image sprite.
+ * @param {number} width Width of the container
+ * @constructor
+ */
+Runner.DistanceMeter = function(canvas, spriteSheet, canvasWidth) {
+  this.canvas = canvas;
+
+  this.canvasCtx = canvas.getContext('2d');
+
+  this.image = spriteSheet;
+
+  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.init(canvasWidth);
+};
+
+
+Runner.DistanceMeter.dimensions = {
+  WIDTH: 10,
+  HEIGHT: 13,
+  DEST_WIDTH: 11
+};
+
+
+/**
+ * Y positioning of the digits in the sprite sheet.
+ * X position is always 0.
+ */
+Runner.DistanceMeter.yPos = [0, 13, 27, 40, 53, 67, 80, 93, 107, 120];
+
+/**
+ * Number of digits.
+ */
+Runner.DistanceMeter.MAX_DISTANCE_UNITS = 5;
+
+/**
+ * Distance that causes achievement animation.
+ */
+Runner.DistanceMeter.ACHIEVEMENT_DISTANCE = 100;
+
+/**
+ * Used for conversion from pixel distance to a scaled unit.
+ */
+Runner.DistanceMeter.COEFFICIENT = 0.025;
+
+/**
+ * Flash duration in milliseconds.
+ */
+Runner.DistanceMeter.FLASH_DURATION = 1000 / 4;
+
+/**
+ * Flash iterations for achievement animation.
+ */
+Runner.DistanceMeter.FLASH_ITERATIONS = 3;
+
+
+/**
+ * Initialise the distance meter to '00000'.
+ */
+Runner.DistanceMeter.prototype.init = function(width) {
+  var maxDistanceStr = '';
+
+  this.calcXPos(width);
+  this.maxScore = Runner.DistanceMeter.MAX_DISTANCE_UNITS;
+  for (var i = 0; i < Runner.DistanceMeter.MAX_DISTANCE_UNITS; i++) {
+    this.draw(i, 0);
+    this.defaultString += '0';
+    maxDistanceStr += '9';
+  }
+
+  this.maxScore = parseInt(maxDistanceStr);
+
+};
+
+
+/**
+ * Calculate the xPos in the canvas.
+ */
+Runner.DistanceMeter.prototype.calcXPos = function(canvasWidth) {
+  this.x = canvasWidth - (Runner.DistanceMeter.dimensions.DEST_WIDTH *
+      (Runner.DistanceMeter.MAX_DISTANCE_UNITS + 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 we a drawing the high score.
+ */
+Runner.DistanceMeter.prototype.draw = function(digitPos, value, opt_highScore) {
+  var sourceWidth = Runner.DistanceMeter.dimensions.WIDTH;
+  var sourceHeight = Runner.DistanceMeter.dimensions.HEIGHT;
+  var sourceX = (Runner.DistanceMeter.dimensions.WIDTH) * value;
+
+  var targetX = (digitPos * (Runner.DistanceMeter.dimensions.DEST_WIDTH));
+  var targetY = this.y;
+  var targetWidth = Runner.DistanceMeter.dimensions.WIDTH;
+  var targetHeight = Runner.DistanceMeter.dimensions.HEIGHT;
+
+  // For high DPI we 2x source values.
+  if (Runner.isHDPI) {
+    sourceWidth = sourceWidth * 2;
+    sourceHeight = sourceHeight * 2;
+    sourceX = sourceX * 2;
+  }
+
+  this.canvasCtx.save();
+
+  if (opt_highScore) {
+    // Left of the current score.
+    var highScoreX = this.x - ((Runner.DistanceMeter.MAX_DISTANCE_UNITS * 2)) *
+        Runner.DistanceMeter.dimensions.WIDTH;
+
+    this.canvasCtx.translate(highScoreX, this.y);
+  } else {
+    this.canvasCtx.translate(this.x, this.y);
+  }
+
+  this.canvasCtx.drawImage(this.image, sourceX, 0,
+      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.
+ */
+Runner.DistanceMeter.prototype.getActualDistance = function(distance) {
+  return distance ?
+      Math.round(distance * Runner.DistanceMeter.COEFFICIENT) : 0;
+};
+
+
+/**
+ * Update the distance meter.
+ * @param {number} deltaTime Time since last update.
+ * @param {number} distance Distance to display.
+ * @param {sound} sound Sound to play.
+ */
+Runner.DistanceMeter.prototype.update = function(deltaTime, distance, sound) {
+  var paint = true;
+
+  if (!this.acheivement) {
+    distance = this.getActualDistance(distance);
+
+    if (distance > 0) {
+      // Acheivement unlocked
+      if (distance % Runner.DistanceMeter.ACHIEVEMENT_DISTANCE == 0) {
+        // Flash score and play sound.
+        this.acheivement = true;
+        this.flashTimer = 0;
+        Runner.playSound(sound);
+      }
+
+      // Create a string representation of the distance with leading 0.
+      var distanceStr = (this.defaultString +
+          distance).substr(-Runner.DistanceMeter.MAX_DISTANCE_UNITS);
+      this.digits = String(distanceStr).split('');
+    } else {
+      this.digits = this.defaultString.split('');
+    }
+  } else {
+    // Control flashing of the score on reaching acheivement.
+    if (this.flashIterations <= Runner.DistanceMeter.FLASH_ITERATIONS) {
+      this.flashTimer += deltaTime;
+
+      if (this.flashTimer < Runner.DistanceMeter.FLASH_DURATION) {
+        paint = false;
+      } else if (this.flashTimer > (Runner.DistanceMeter.FLASH_DURATION * 2)) {
+        this.flashTimer = 0;
+        this.flashIterations++;
+      }
+    } else {
+      this.acheivement = false;
+      this.flashIterations = 0;
+      this.flashTimer = 0;
+    }
+  }
+
+  // Draw the digits if not flashing.
+  if (paint) {
+    for (var i = this.digits.length - 1; i > -1; i--) {
+      this.draw(i, parseInt(this.digits[i]));
+    }
+  }
+
+  this.drawHighScore();
+
+  return this.acheivement;
+};
+
+
+/**
+ * Draw the high score.
+ */
+Runner.DistanceMeter.prototype.drawHighScore = function() {
+  this.canvasCtx.save();
+  this.canvasCtx.globalAlpha = .8;
+  for (var i = this.highScore.length - 1; i > -1; i--) {
+    this.draw(i, parseInt(this.highScore[i]), true);
+  }
+  this.canvasCtx.restore();
+};
+
+
+/**
+ * Set the highscore as a array string.
+ * Position of char in the sprite: H - 10 in and I - 11.
+ * @param {number} distance Distance in pixels.
+ */
+Runner.DistanceMeter.prototype.setHighScore = function(distance) {
+  distance = this.getActualDistance(distance);
+  var highScoreStr = (this.defaultString +
+      distance).substr(-Runner.DistanceMeter.MAX_DISTANCE_UNITS);
+
+  this.highScore = ['10', '11', ''].concat(highScoreStr.split(''));
+};
+
+
+/**
+ * Reset the distance meter back to '00000'.
+ */
+Runner.DistanceMeter.prototype.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 Cloud image.
+ * @param {number} containerWidth Width of container.
+ */
+Runner.Cloud = function(canvas, cloudImg, containerWidth) {
+  this.canvas = canvas;
+
+  this.canvasCtx = this.canvas.getContext('2d');
+
+  this.image = cloudImg;
+
+  this.containerWidth = containerWidth;
+
+  this.xPos = containerWidth;
+
+  this.yPos = 0;
+
+  this.remove = false;
+
+  this.cloudGap = Runner.getRandomNum(Runner.Cloud.config.MIN_CLOUD_GAP,
+      Runner.Cloud.config.MAX_CLOUD_GAP);
+
+  this.init();
+};
+
+
+/**
+ * Cloud object config.
+ * @enum {string}
+ */
+Runner.Cloud.config = {
+  HEIGHT: 13,
+  MAX_CLOUD_GAP: 400,
+  MAX_SKY_LEVEL: 30,
+  MIN_CLOUD_GAP: 100,
+  MIN_SKY_LEVEL: 71,
+  WIDTH: 46
+};
+
+
+/**
+ * Initialise the cloud. Sets the Cloud height.
+ */
+Runner.Cloud.prototype.init = function() {
+  this.yPos = Runner.getRandomNum(Runner.Cloud.config.MAX_SKY_LEVEL,
+      Runner.Cloud.config.MIN_SKY_LEVEL);
+  this.draw();
+};
+
+
+/**
+ * Draw the cloud.
+ */
+Runner.Cloud.prototype.draw = function() {
+  this.canvasCtx.save();
+  var sourceWidth = Runner.Cloud.config.WIDTH;
+  var sourceHeight = Runner.Cloud.config.HEIGHT;
+
+  if (Runner.isHDPI) {
+    sourceWidth = sourceWidth * 2;
+    sourceHeight = sourceHeight * 2;
+  }
+
+  this.canvasCtx.drawImage(this.image, 0, 0,
+      sourceWidth, sourceHeight,
+      this.xPos, this.yPos,
+      Runner.Cloud.config.WIDTH, Runner.Cloud.config.HEIGHT);
+
+  this.canvasCtx.restore();
+};
+
+
+/**
+ * Update the cloud position.
+ * @param {number} speed Speed.
+ */
+Runner.Cloud.prototype.update = function(speed) {
+  if (!this.remove) {
+    this.xPos -= Math.ceil(speed);
+    this.draw();
+
+    // Mark as removeable if no longer in the canvas.
+    if (!this.isVisible()) {
+      this.remove = true;
+    }
+  }
+};
+
+
+/**
+ * Check if the cloud is in the stage.
+ */
+Runner.Cloud.prototype.isVisible = function() {
+  return (this.xPos + Runner.Cloud.config.WIDTH) > 0;
+};
+
+
+//******************************************************************************
+
+/**
+ * Horizon Line.
+ * Consists of two connecting lines. Randomly assigns a flat / bumpy horizon.
+ * @param {HTMLCanvasElement} canvas Canvas element.
+ * @param {HTMLImage} bgImg Horizon line sprite.
+ * @constructor
+ */
+Runner.HorizonLine = function(canvas, bgImg) {
+  this.image = bgImg;
+  this.canvas = canvas;
+  this.canvasCtx = canvas.getContext('2d');
+  this.sourceDimensions = {};
+  this.dimensions = Runner.HorizonLine.dimensions;
+  this.sourceXPos = [0, this.dimensions.WIDTH];
+  this.xPos = [];
+  this.yPos = 0;
+  this.bumpThreshold = 0.5;
+
+  this.setSourceDimensions();
+  this.draw();
+};
+
+
+/**
+ * Horizon line dimensions.
+ * @enum {string}
+ */
+Runner.HorizonLine.dimensions = {
+  WIDTH: 600,
+  HEIGHT: 12,
+  YPOS: 127
+};
+
+
+/**
+ * Set the source dimensions of the horizon line.
+ */
+Runner.HorizonLine.prototype.setSourceDimensions = function() {
+
+  for (var dimension in Runner.HorizonLine.dimensions) {
+    if (Runner.isHDPI) {
+      if (dimension != 'YPOS') {
+        this.sourceDimensions[dimension] =
+            Runner.HorizonLine.dimensions[dimension] * 2;
+      }
+    } else {
+      this.sourceDimensions[dimension] =
+          Runner.HorizonLine.dimensions[dimension];
+    }
+    this.dimensions[dimension] = Runner.HorizonLine.dimensions[dimension];
+  }
+
+  this.xPos = [0, Runner.HorizonLine.dimensions.WIDTH];
+  this.yPos = Runner.HorizonLine.dimensions.YPOS;
+};
+
+
+/**
+ * Return the crop x position of a type.
+ */
+Runner.HorizonLine.prototype.getRandomType = function() {
+  return (Math.random() > this.bumpThreshold) ? this.dimensions.WIDTH : 0;
+};
+
+
+/**
+ * Draw the horizon line.
+ */
+Runner.HorizonLine.prototype.draw = function() {
+
+  this.canvasCtx.drawImage(this.image, this.sourceXPos[0], 0,
+      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.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 Amount to increment by.
+ */
+Runner.HorizonLine.prototype.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();
+  }
+};
+
+
+/**
+ * Update the horizon line.
+ * @param {number} deltaTime Time since last update.
+ * @param {number} speed Speed.
+ */
+Runner.HorizonLine.prototype.update = function(deltaTime, speed) {
+  var increment = Math.floor((speed * (Runner.FPS / 1000)) * deltaTime);
+
+  if (this.xPos[0] <= 0) {
+    this.updateXPos(0, increment);
+  } else {
+    this.updateXPos(1, increment);
+  }
+  this.draw();
+};
+
+
+/**
+ * Reset horizon to the starting position.
+ */
+Runner.HorizonLine.prototype.reset = function() {
+  this.xPos[0] = 0;
+  this.xPos[1] = Runner.HorizonLine.dimensions.WIDTH;
+};
+
+//******************************************************************************
+/**
+ * Horizon background class.
+ * @param {HTMLCanvasElement} canvas
+ * @param {Array.<HTMLImageElement>} images Array of images.
+ * @param {object} dimensions Canvas dimensions.
+ * @param {number} gapCoefficient Gap coefficient.
+ * @constructor
+ */
+Runner.Horizon = function(canvas, images, dimensions, gapCoefficient) {
+
+  this.canvas = canvas;
+
+  this.canvasCtx = this.canvas.getContext('2d');
+
+  this.config = Runner.Horizon.config;
+
+  this.dimensions = dimensions;
+
+  this.gapCoefficient = gapCoefficient;
+
+  // 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.obstacles = [];
+
+  this.horizonOffsets = [0, 0];
+
+  this.cloudFrequency = this.config.CLOUD_FREQUENCY;
+
+  this.init();
+};
+
+
+/**
+ * Horizon config.
+ * @enum {string}
+ */
+Runner.Horizon.config = {
+  BG_CLOUD_SPEED: 0.2,
+  BUMPY_THRESHOLD: .3,
+  CLOUD_FREQUENCY: .5,
+  HORIZON_HEIGHT: 16,
+  MAX_CLOUDS: 6
+};
+
+
+/**
+ * Initialise the horizon. Just add the line and a cloud. No obstacles.
+ */
+Runner.Horizon.prototype.init = function() {
+  this.addCloud();
+
+  this.horizonLine = new Runner.HorizonLine(this.canvas, this.horizonImg);
+};
+
+
+/**
+ *
+ * @param {number} deltaTime Time elapsed.
+ * @param {number} currentSpeed Speed.
+ * @param {boolean} updateObstacles Used as an override to prevent the obstacles
+ *    from being updated / added. This happens in the ease in section.
+ */
+Runner.Horizon.prototype.update =
+    function(deltaTime, currentSpeed, updateObstacles) {
+
+  this.runningTime += deltaTime;
+
+  this.horizonLine.update(deltaTime, currentSpeed);
+  this.updateClouds(deltaTime, currentSpeed);
+
+  if (updateObstacles) {
+    this.updateObstacles(deltaTime, currentSpeed);
+  }
+};
+
+/**
+ * Update the cloud positions.
+ * @param {number} deltaTime Time elapsed.
+ * @param {number} currentSpeed Speed.
+ */
+Runner.Horizon.prototype.updateClouds = function(deltaTime, speed) {
+  var cloudSpeed = ((this.cloudSpeed / 1000) * deltaTime) * speed;
+  var numClouds = this.clouds.length;
+
+  if (numClouds) {
+    for (var i = numClouds - 1; i >= 0; i--) {
+      this.clouds[i].update(cloudSpeed);
+    }
+
+    var lastCloud = this.clouds[numClouds - 1];
+
+    // Check for adding a new cloud.
+    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;
+        });
+  }
+};
+
+
+/**
+ * Update the obstacle positions.
+ * @param {number} deltaTime Time elapsed.
+ * @param {number} currentSpeed Speed.
+ */
+Runner.Horizon.prototype.updateObstacles = function(deltaTime, currentSpeed) {
+  // Obstacles, move to Horizon layer.
+  var updatedObstacles = this.obstacles.slice(0);
+
+  for (var i = 0, j = this.obstacles.length; i < j; i++) {
+    var obstacle = this.obstacles[i];
+    obstacle.update(deltaTime, currentSpeed);
+
+    // Clean up existing obstacles.
+    if (obstacle.remove) {
+      updatedObstacles.shift();
+    }
+  }
+  this.obstacles = updatedObstacles;
+
+  if (this.obstacles.length > 0) {
+    var lastObstacle = this.obstacles[this.obstacles.length - 1];
+
+    if (lastObstacle && !lastObstacle.followingObstacleCreated &&
+        lastObstacle.isVisible() &&
+        (lastObstacle.xPos + (lastObstacle.width + lastObstacle.gap)) <
+        this.dimensions.WIDTH) {
+      this.addNewObstacle(currentSpeed);
+      lastObstacle.followingObstacleCreated = true;
+    }
+  } else {
+    // Create new obstacles.
+    this.addNewObstacle(currentSpeed);
+  }
+};
+
+
+/**
+ * Add a new obstacle.
+ * @param {number} currentSpeed Speed.
+ */
+Runner.Horizon.prototype.addNewObstacle = function(currentSpeed) {
+  var obstacleTypeIndex =
+      Runner.getRandomNum(0, Runner.Obstacle.types.length - 1);
+  var obstacleType = Runner.Obstacle.types[obstacleTypeIndex];
+  var obstacleImg = this.obstacleImgs[obstacleType.type];
+
+  this.obstacles.push(new Runner.Obstacle(this.canvasCtx, obstacleType,
+      obstacleImg, this.dimensions, this.gapCoefficient, currentSpeed));
+};
+
+
+/**
+ * Reset the horizon layer.
+ * Remove existing obstacles and reposition the horizon line.
+ */
+Runner.Horizon.prototype.reset = function() {
+  this.obstacles = [];
+  this.horizonLine.reset();
+};
+
+
+/**
+ * Update the canvas width and scaling.
+ * @param {number} width Canvas width.
+ * @param {number} height Canvas height.
+ */
+Runner.Horizon.prototype.resize = function(width, height) {
+  this.canvas.width = width;
+  this.canvas.height = height;
+};
+
+
+/**
+ * Add a new cloud to the horizon.
+ */
+Runner.Horizon.prototype.addCloud = function() {
+  this.clouds.push(new Runner.Cloud(this.canvas, this.cloudImg,
+      this.dimensions.WIDTH));
+
+};
+
+})();