HTML Website - Google Dino

Back to Encyclopedia

<html>

<head>

function hideClass(name) {

for (var elem of $(name)) elem.style.display = "none";

}

var DEFAULT_WIDTH = 600, FPS = 60;

var IS_HIDPI = false, IS_IOS = false, IS_MOBILE = false, IS_TOUCH_ENABLED = false;

function Runner(outerContainerId) {

Runner.instance_ = this;

var outerContainerEl = document.querySelector(outerContainerId);

this.outerContainerEl = outerContainerEl

this.containerEl = null;

this.detailsButton = outerContainerEl.querySelector("#details-button");

this.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 / FPS;

this.currentSpeed = Runner.config.SPEED;

this.obstacles = [];

this.started = false;

this.activated = false;

this.crashed = false;

this.paused = false;

this.resizeTimerId_ = null;

this.playCount = 0;

this.audioBuffer = null;

this.soundFx = {};

this.audioContext = null;

this.images = {};

this.imagesLoaded = 0;

loadImages(this);

};

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,

RESOURCE_TEMPLATE_ID: "audio-resources",

SPEED: 6,

SPEED_DROP_COEFFICIENT: 3

};

Runner.defaultDimensions = {

WIDTH: DEFAULT_WIDTH,

HEIGHT: 150

};

Runner.classes = {

CANVAS: "runner-canvas",

CONTAINER: "runner-container",

CRASHED: "crashed",

ICON: "icon-offline",

TOUCH_CONTROLLER: "controller"

};

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.sounds = {

BUTTON_PRESS: "offline-sound-press",

HIT: "offline-sound-hit",

SCORE: "offline-sound-reached"

};

Runner.keycodes = {

JUMP: { "38": 1, "32": 1 }, // Up, spacebar

DUCK: { "40": 1 }, // Down

RESTART: { "13": 1 } // Enter

};

Runner.events = {

ANIM_END: "webkitAnimationEnd",

CLICK: "click",

KEYDOWN: "keydown",

KEYUP: "keyup",

MOUSEDOWN: "mousedown",

MOUSEUP: "mouseup",

RESIZE: "resize",

TOUCHEND: "touchend",

TOUCHSTART: "touchstart",

VISIBILITY: "visibilitychange",

BLUR: "blur",

FOCUS: "focus",

LOAD: "load"

};

function loadImages(runner) {

var imageSources = Runner.imageSources.LDPI;

var numImages = imageSources.length;

for (var i = numImages - 1; i >= 0; i--) {

var imgSource = imageSources[i];

runner.images[imgSource.name] = document.getElementById(

imgSource.id

);

}

init(runner);

}

function init(runner) {

runner.adjustDimensions();

runner.setSpeed();

runner.containerEl = document.createElement("div");

runner.containerEl.className = Runner.classes.CONTAINER;

// Player canvas container.

runner.canvas = createCanvas(

runner.containerEl,

runner.dimensions.WIDTH,

runner.dimensions.HEIGHT,

Runner.classes.PLAYER

);

runner.canvasCtx = runner.canvas.getContext("2d");

runner.canvasCtx.fillStyle = "#f7f7f7";

runner.canvasCtx.fill();

Runner.updateCanvasScaling(runner.canvas);

// Horizon contains clouds, obstacles and the ground.

runner.horizon = new Horizon(

runner.canvas,

runner.images,

runner.dimensions,

runner.config.GAP_COEFFICIENT

);

// Distance meter

runner.distanceMeter = new DistanceMeter(

runner.canvas,

runner.images.TEXT_SPRITE,

runner.dimensions.WIDTH

);

// Draw t-rex

runner.tRex = new Trex(runner.canvas, runner.images.TREX);

runner.outerContainerEl.appendChild(runner.containerEl);

if (IS_MOBILE) {

this.createTouchController();

}

runner.startListening();

runner.update();

window.addEventListener(

Runner.events.RESIZE,

runner.debounceResize.bind(runner)

);

}

Runner.prototype = {

updateConfigSetting: function(setting, value) {

console.log(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;

}

//}

},

/*loadImages: function() {

var imageSources = 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

);

}

this.init();

},*/

loadSounds: function() {

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.

this.audioContext.decodeAudioData(

buffer,

function(index, audioData) {

this.soundFx[index] = audioData;

}.bind(this, sound)

);

}

},

setSpeed: function(opt_speed) {

var speed = opt_speed || this.currentSpeed;

// Reduce the speed on smaller mobile screens.

if (this.dimensions.WIDTH < DEFAULT_WIDTH) {

var mobileSpeed =

speed *

this.dimensions.WIDTH /

DEFAULT_WIDTH *

this.config.MOBILE_SPEED_COEFFICIENT;

this.currentSpeed = mobileSpeed > speed ? speed : mobileSpeed;

} else if (opt_speed) {

this.currentSpeed = opt_speed;

}

},

/*init: function() {

this.adjustDimensions();

this.setSpeed();

this.containerEl = document.createElement("div");

this.containerEl.className = Runner.classes.CONTAINER;

// 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.config.GAP_COEFFICIENT

);

// Distance meter

this.distanceMeter = new DistanceMeter(

this.canvas,

this.images.TEXT_SPRITE,

this.dimensions.WIDTH

);

// Draw t-rex

this.tRex = new Trex(this.canvas, this.images.TREX);

this.outerContainerEl.appendChild(this.containerEl);

if (IS_MOBILE) {

this.createTouchController();

}

this.startListening();

this.update();

window.addEventListener(

Runner.events.RESIZE,

this.debounceResize.bind(this)

);

},*/

createTouchController: function() {

this.touchController = document.createElement("div");

this.touchController.className = Runner.classes.TOUCH_CONTROLLER;

},

debounceResize: function() {

if (!this.resizeTimerId_) {

this.resizeTimerId_ = setInterval(

this.adjustDimensions.bind(this),

250

);

}

},

adjustDimensions: function() {

clearInterval(this.resizeTimerId_);

this.resizeTimerId_ = null;

var boxStyles = window.getComputedStyle(this.outerContainerEl);

var padding = Number(

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();

}

},

playIntro: function() {

if (!this.started && !this.crashed) {

this.playingIntro = true;

this.tRex.playingIntro = true;

// CSS animation definition.

var keyframes =

"@-webkit-keyframes intro { " +

"from { width:" +

Trex.config.WIDTH +

"px }" +

"to { width: " +

this.dimensions.WIDTH +

"px }" +

"}";

document.styleSheets[0].insertRule(keyframes, 0);

this.containerEl.addEventListener(

Runner.events.ANIM_END,

this.startGame.bind(this)

);

this.containerEl.style.webkitAnimation =

"intro .4s ease-out 1 both";

this.containerEl.style.width = this.dimensions.WIDTH + "px";

if (this.touchController) {

this.outerContainerEl.appendChild(this.touchController);

}

this.activated = true;

this.started = true;

} else if (this.crashed) {

this.restart();

}

},

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)

);

window.addEventListener(

Runner.events.BLUR,

this.onVisibilityChange.bind(this)

);

window.addEventListener(

Runner.events.FOCUS,

this.onVisibilityChange.bind(this)

);

},

clearCanvas: function() {

this.canvasCtx.clearRect(

0,

this.dimensions.WIDTH,

this.dimensions.HEIGHT

);

},

update: function() {

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

checkForCollision(this.horizon.obstacles[0], this.tRex);

if (!collision) {

this.distanceRan +=

this.currentSpeed * deltaTime / this.msPerFrame;

if (this.currentSpeed < this.config.MAX_SPEED) {

this.currentSpeed += this.config.ACCELERATION;

}

} else {

this.gameOver();

}

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

this.raq();

}

},

handleEvent: function(e) {

return function(evtType, events) {

switch (evtType) {

case events.KEYDOWN:

case events.TOUCHSTART:

case events.MOUSEDOWN:

this.onKeyDown(e);

break;

case events.KEYUP:

case events.TOUCHEND:

case events.MOUSEUP:

this.onKeyUp(e);

break;

}

}.bind(this)(e.type, Runner.events);

},

startListening: function() {

// Keys.

document.addEventListener(Runner.events.KEYDOWN, this);

document.addEventListener(Runner.events.KEYUP, this);

if (IS_MOBILE) {

// 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);

document.addEventListener(Runner.events.MOUSEUP, this);

}

},

stopListening: function() {

document.removeEventListener(Runner.events.KEYDOWN, this);

document.removeEventListener(Runner.events.KEYUP, this);

if (IS_MOBILE) {

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

document.removeEventListener(Runner.events.MOUSEUP, this);

}

},

onKeyDown: function(e) {

if (e.target != this.detailsButton) {

if (

!this.crashed &&

(Runner.keycodes.JUMP[String(e.keyCode)] ||

e.type == Runner.events.TOUCHSTART)

) {

if (!this.activated) {

this.loadSounds();

this.activated = true;

}

if (!this.tRex.jumping) {

this.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[e.keyCode] && this.tRex.jumping) {

e.preventDefault();

this.tRex.setSpeedDrop();

}

},

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 = 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])

) {

this.restart();

}

} else if (this.paused && isjumpKey) {

this.play();

}

},

raq: function() {

if (!this.drawPending) {

this.drawPending = true;

this.raqId = requestAnimationFrame(this.update.bind(this));

}

},

isRunning: function() {

return !!this.raqId;

},

gameOver: function() {

this.playSound(this.soundFx.HIT);

vibrate(200);

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.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 = getTimeStamp();

},

stop: function() {

this.activated = false;

this.paused = true;

cancelAnimationFrame(this.raqId);

this.raqId = 0;

},

play: function() {

if (!this.crashed) {

this.activated = true;

this.paused = false;

this.tRex.update(0, Trex.status.RUNNING);

this.time = getTimeStamp();

this.update();

}

},

restart: function() {

if (!this.raqId) {

this.playCount++;

this.runningTime = 0;

this.activated = true;

this.crashed = false;

this.distanceRan = 0;

this.setSpeed(this.config.SPEED);

this.time = getTimeStamp();

this.containerEl.classList.remove(Runner.classes.CRASHED);

this.clearCanvas();

this.distanceMeter.reset(this.highestScore);

this.horizon.reset();

this.tRex.reset();

this.playSound(this.soundFx.BUTTON_PRESS);

this.update();

}

},

onVisibilityChange: function(e) {

if (document.hidden || document.webkitHidden || e.type == "blur") {

this.stop();

} else {

this.play();

}

},

playSound: function(soundBuffer) {

if (soundBuffer) {

var sourceNode = this.audioContext.createBufferSource();

sourceNode.buffer = soundBuffer;

sourceNode.connect(this.audioContext.destination);

sourceNode.start(0);

}

};

// Updates the canvas size taking into account the backing store pixel ratio and the device pixel ratio.

// See article by Paul Lewis: https://www.html5rocks.com/en/tutorials/canvas/hidpi/

Runner.updateCanvasScaling = function(canvas, opt_width, opt_height) {

var context = canvas.getContext("2d");

// Query the various pixel ratios

var devicePxRatio = Math.floor(window.devicePixelRatio) || 1;

var backingStoreRatio = Math.floor(context.webkitBackingStorePixelRatio) || 1;

var ratio = devicePxRatio / backingStoreRatio;

// Upscale the canvas if the two ratios don't match

if (ratio !== 1) {

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;

};

var getRandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

var vibrate = duration => navigator.vibrate(duration);

function createCanvas(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;

}

function decodeBase64ToArrayBuffer(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;

}

function getTimeStamp() {

return performance.now();

}

function GameOverPanel(canvas, textSprite, restartImg, dimensions) {

this.canvas = canvas;

this.canvasCtx = canvas.getContext("2d");

this.canvasDimensions = dimensions;

this.textSprite = textSprite;

this.restartImg = restartImg;

this.draw();

}

GameOverPanel.dimensions = {

TEXT_X: 0,

TEXT_Y: 13,

TEXT_WIDTH: 191,

TEXT_HEIGHT: 11,

RESTART_WIDTH: 36,

RESTART_HEIGHT: 32

};

GameOverPanel.prototype = {

updateDimensions: function(width, opt_height) {

this.canvasDimensions.WIDTH = width;

if (opt_height) {

this.canvasDimensions.HEIGHT = opt_height;

}

},

draw: function() {

var dimensions = 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 (IS_HIDPI) {

textSourceY *= 2;

textSourceX *= 2;

textSourceWidth *= 2;

textSourceHeight *= 2;

restartSourceWidth *= 2;

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,

restartSourceWidth,

restartSourceHeight,

restartTargetX,

restartTargetY,

dimensions.RESTART_WIDTH,

dimensions.RESTART_HEIGHT

);

}

};

function checkForCollision(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 CollisionBox(

tRex.xPos + 1,

tRex.yPos + 1,

tRex.config.WIDTH - 2,

tRex.config.HEIGHT - 2

);

var obstacleBox = new CollisionBox(

obstacle.xPos + 1,

obstacle.yPos + 1,

obstacle.typeConfig.width * obstacle.size - 2,

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;

// 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);

// Draw boxes for debug.

if (opt_canvasCtx) {

drawCollisionBoxes(

opt_canvasCtx,

adjTrexBox,

adjObstacleBox

);

}

if (crashed) {

return [adjTrexBox, adjObstacleBox];

}

return false;

}

function createAdjustedCollisionBox(box, adjustment) {

return new CollisionBox(

box.x + adjustment.x,

box.y + adjustment.y,

box.width,

box.height

);

}

function drawCollisionBoxes(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();

}

function boxCompare(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;

}

function CollisionBox(x, y, w, h) {

this.x = x;

this.y = y;

this.width = w;

this.height = h;

}

function Obstacle(

canvasCtx,

type,

obstacleImg,

dimensions,

gapCoefficient,

speed

) {

this.canvasCtx = canvasCtx;

this.image = obstacleImg;

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.width = 0;

this.collisionBoxes = [];

this.gap = 0;

this.init(speed);

}

Obstacle.MAX_GAP_COEFFICIENT = 1.5;

Obstacle.MAX_OBSTACLE_LENGTH = 3;

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: 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,

sourceWidth * this.size,

sourceHeight,

this.xPos,

this.yPos,

this.typeConfig.width * this.size,

this.typeConfig.height

);

},

update: function(deltaTime, speed) {

if (!this.remove) {

this.xPos -= Math.floor(speed * FPS / 1000 * deltaTime);

this.draw();

if (!this.isVisible()) {

this.remove = true;

}

},

getGap: function(gapCoefficient, speed) {

var minGap = Math.round(

this.width * speed + this.typeConfig.minGap * gapCoefficient

);

var maxGap = Math.round(minGap * Obstacle.MAX_GAP_COEFFICIENT);

return getRandomNum(minGap, maxGap);

},

isVisible: function() {

return this.xPos + this.width > 0;

},

cloneCollisionBoxes: function() {

var collisionBoxes = this.typeConfig.collisionBoxes;

for (var i = collisionBoxes.length - 1; i >= 0; i--) {

this.collisionBoxes[i] = new CollisionBox(

collisionBoxes[i].x,

collisionBoxes[i].y,

collisionBoxes[i].width,

collisionBoxes[i].height

);

}

};

Obstacle.types = [

{

type: "CACTUS_SMALL",

className: " cactus cactus-small ",

width: 17,

height: 35,

yPos: 105,

multipleSpeed: 3,

minGap: 120,

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,

minGap: 120,

collisionBoxes: [

new CollisionBox(0, 12, 7, 38),

new CollisionBox(8, 0, 7, 49),

new CollisionBox(13, 10, 10, 38)

]

}

];

function Trex(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 / FPS;

this.config = Trex.config;

// Current status.

this.status = Trex.status.WAITING;

this.jumping = false;

this.jumpVelocity = 0;

this.reachedMinHeight = false;

this.speedDrop = false;

this.jumpCount = 0;

this.jumpspotX = 0;

this.init();

}

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

};

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.status = {

CRASHED: "CRASHED",

JUMPING: "JUMPING",

RUNNING: "RUNNING",

WAITING: "WAITING"

};

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

}

};

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, Trex.status.WAITING);

},

setJumpVelocity: function(setting) {

this.config.INIITAL_JUMP_VELOCITY = -setting;

this.config.DROP_VELOCITY = -setting / 2;

},

update: function(deltaTime, opt_status) {

this.timer += deltaTime;

// Update the status.

if (opt_status) {

this.status = opt_status;

this.currentFrame = 0;

this.msPerFrame = Trex.animFrames[opt_status].msPerFrame;

this.currentAnimFrames = Trex.animFrames[opt_status].frames;

if (opt_status == Trex.status.WAITING) {

this.animStartTime = getTimeStamp();

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 == Trex.status.WAITING) {

this.blink(getTimeStamp());

} 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: function(x, y) {

var sourceX = x;

var sourceY = y;

var sourceWidth = 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

);

},

setBlinkDelay: function() {

this.blinkDelay = Math.ceil(Math.random() * Trex.BLINK_TIMING);

},

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;

}

},

startJump: function() {

if (!this.jumping) {

this.update(0, Trex.status.JUMPING);

this.jumpVelocity = this.config.INIITAL_JUMP_VELOCITY;

this.jumping = true;

this.reachedMinHeight = false;

this.speedDrop = false;

}

},

endJump: function() {

if (

this.reachedMinHeight &&

this.jumpVelocity < this.config.DROP_VELOCITY

) {

this.jumpVelocity = this.config.DROP_VELOCITY;

}

},

updateJump: function(deltaTime) {

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

}

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

},

setSpeedDrop: function() {

this.speedDrop = true;

this.jumpVelocity = 1;

},

reset: function() {

this.yPos = this.groundYPos;

this.jumpVelocity = 0;

this.jumping = false;

this.update(0, Trex.status.RUNNING);

this.midair = false;

this.speedDrop = false;

this.jumpCount = 0;

}

};

function DistanceMeter(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.config = DistanceMeter.config;

this.init(canvasWidth);

}

DistanceMeter.dimensions = {

WIDTH: 10,

HEIGHT: 13,

DEST_WIDTH: 11

};

DistanceMeter.yPos = [0, 13, 27, 40, 53, 67, 80, 93, 107, 120];

DistanceMeter.config = {

// Number of digits.

MAX_DISTANCE_UNITS: 5,

// Distance that causes achievement animation.

ACHIEVEMENT_DISTANCE: 100,

// Used for conversion from pixel distance to a scaled unit.

COEFFICIENT: 0.025,

// Flash duration in milliseconds.

FLASH_DURATION: 1000 / 4,

// Flash iterations for achievement animation.

FLASH_ITERATIONS: 3

};

DistanceMeter.prototype = {

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.draw(i, 0);

this.defaultString += "0";

maxDistanceStr += "9";

}

this.maxScore = parseInt(maxDistanceStr);

},

calcXPos: function(canvasWidth) {

this.x =

canvasWidth -

DistanceMeter.dimensions.DEST_WIDTH *

(this.config.MAX_DISTANCE_UNITS + 1);

},

draw: function(digitPos, value, opt_highScore) {

var sourceWidth = DistanceMeter.dimensions.WIDTH;

var sourceHeight = DistanceMeter.dimensions.HEIGHT;

var sourceX = DistanceMeter.dimensions.WIDTH * value;

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;

}

this.canvasCtx.save();

if (opt_highScore) {

// Left of the current score.

var highScoreX =

this.x -

this.config.MAX_DISTANCE_UNITS *

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,

sourceWidth,

sourceHeight,

targetX,

targetY,

targetWidth,

targetHeight

);

this.canvasCtx.restore();

},

getActualDistance: function(distance) {

return distance

? Math.round(distance * this.config.COEFFICIENT)

: 0;

},

update: function(deltaTime, distance) {

var paint = true;

var playSound = false;

if (!this.acheivement) {

distance = this.getActualDistance(distance);

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

);

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) {

paint = false;

} else if (

this.flashTimer >

this.config.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 >= 0; i--) {

this.draw(i, parseInt(this.digits[i]));

}

this.drawHighScore();

return playSound;

},

drawHighScore: function() {

this.canvasCtx.save();

this.canvasCtx.globalAlpha = 0.8;

for (var i = this.highScore.length - 1; i >= 0; i--) {

this.draw(i, parseInt(this.highScore[i], 10), true);

}

this.canvasCtx.restore();

},

setHighScore: function(distance) {

distance = this.getActualDistance(distance);

var highScoreStr = (this.defaultString + distance).substr(

-this.config.MAX_DISTANCE_UNITS

);

this.highScore = ["10", "11", ""].concat(highScoreStr.split(""));

},

reset: function() {

this.update(0);

this.acheivement = false;

}

};

function Cloud(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 = getRandomNum(

Cloud.config.MIN_CLOUD_GAP,

Cloud.config.MAX_CLOUD_GAP

);

this.init();

}

Cloud.config = {

HEIGHT: 14,

MAX_CLOUD_GAP: 400,

MAX_SKY_LEVEL: 30,

MIN_CLOUD_GAP: 100,

MIN_SKY_LEVEL: 71,

WIDTH: 46

};

Cloud.prototype = {

init: function() {

this.yPos = getRandomNum(

Cloud.config.MAX_SKY_LEVEL,

Cloud.config.MIN_SKY_LEVEL

);

this.draw();

},

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,

sourceWidth,

sourceHeight,

this.xPos,

this.yPos,

Cloud.config.WIDTH,

Cloud.config.HEIGHT

);

this.canvasCtx.restore();

},

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;

}

},

isVisible: function() {

return this.xPos + Cloud.config.WIDTH > 0;

}

};

function HorizonLine(canvas, bgImg) {

this.image = bgImg;

this.canvas = canvas;

this.canvasCtx = canvas.getContext("2d");

this.sourceDimensions = {};

this.dimensions = HorizonLine.dimensions;

this.sourceXPos = [0, this.dimensions.WIDTH];

this.xPos = [];

this.yPos = 0;

this.bumpThreshold = 0.5;

this.setSourceDimensions();

this.draw();

}

HorizonLine.dimensions = {

WIDTH: 600,

HEIGHT: 12,

YPOS: 127

};

HorizonLine.prototype = {

setSourceDimensions: function() {

for (var dimension in HorizonLine.dimensions) {

if (IS_HIDPI) {

if (dimension != "YPOS") {

this.sourceDimensions[dimension] =

HorizonLine.dimensions[dimension] * 2;

}

} else {

this.sourceDimensions[dimension] =

HorizonLine.dimensions[dimension];

}

this.dimensions[dimension] = HorizonLine.dimensions[dimension];

}

this.xPos = [0, HorizonLine.dimensions.WIDTH];

this.yPos = HorizonLine.dimensions.YPOS;

},

getRandomType: function() {

return Math.random() > this.bumpThreshold

? this.dimensions.WIDTH

: 0;

},

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

);

},

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: function(deltaTime, speed) {

var increment = Math.floor(speed * (FPS / 1000) * deltaTime);

if (this.xPos[0] <= 0) {

this.updateXPos(0, increment);

} else {

this.updateXPos(1, increment);

}

this.draw();

},

reset: function() {

this.xPos[0] = 0;

this.xPos[1] = HorizonLine.dimensions.WIDTH;

}

};

function Horizon(canvas, images, dimensions, gapCoefficient) {

this.canvas = canvas;

this.canvasCtx = this.canvas.getContext("2d");

this.config = Horizon.config;

this.dimensions = dimensions;

this.gapCoefficient = gapCoefficient;

this.obstacles = [];

this.horizonOffsets = [0, 0];

this.cloudFrequency = this.config.CLOUD_FREQUENCY;

// 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 = {

BG_CLOUD_SPEED: 0.2,

BUMPY_THRESHOLD: 0.3,

CLOUD_FREQUENCY: 0.5,

HORIZON_HEIGHT: 16,

MAX_CLOUDS: 6

};

Horizon.prototype = {

init: function() {

this.addCloud();

this.horizonLine = new HorizonLine(this.canvas, this.horizonImg);

},

// updateObstacles used as an override to prevent the obstacles from being updated / added in the ease in section.

update: function(deltaTime, currentSpeed, updateObstacles) {

this.runningTime += deltaTime;

this.horizonLine.update(deltaTime, currentSpeed);

this.updateClouds(deltaTime, currentSpeed);

if (updateObstacles) {

this.updateObstacles(deltaTime, currentSpeed);

}

},

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;

});

}

},

updateObstacles: function(deltaTime, currentSpeed) {

// Obstacles, move to Horizon layer.

var updatedObstacles = this.obstacles.slice(0);

for (var i = 0; i < this.obstacles.length; 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);

}

},

addNewObstacle: function(currentSpeed) {

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

)

);

},

reset: function() {

this.obstacles = [];

this.horizonLine.reset();

},

resize: function(width, height) {

this.canvas.width = width;

this.canvas.height = height;

},

addCloud: function() {

this.clouds.push(

new Cloud(this.canvas, this.cloudImg, this.dimensions.WIDTH)

);

}

};

</script>

<style>

a {

color: #585858;

}

body {

background-color: #f7f7f7;

color: #585858;

font-size: 125%;

}

body.safe-browsing {

background-color: rgb(206, 52, 38);

color: white;

}

button {

background: rgb(76, 142, 250);

border: 0;

border-radius: 2px;

box-sizing: border-box;

color: #fff;

cursor: pointer;

float: right;

font-size: .875em;

height: 36px;

margin: -6px 0 0;

padding: 8px 24px;

transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);

}

[dir='rtl'] button {

float: left;

}

button:active {

background: rgb(50, 102, 213);

outline: 0;

}

button:hover {

box-shadow: 0 1px 3px rgba(0, 0, 0, .50);

}

.debugging-content {

line-height: 1em;

margin-bottom: 0;

margin-top: 0;

}

.debugging-title {

font-weight: bold;

}

#details {

color: #696969;

margin: 45px 0 50px;

}

#details p:not(:first-of-type) {

margin-top: 20px;

}

#error-code {

color: black;

opacity: .35;

text-transform: uppercase;

}

#error-debugging-info {

font-size: 0.8em;

}

h1 {

-webkit-margin-after: 16px;

color: #585858;

font-size: 1.6em;

font-weight: normal;

line-height: 1.25em;

}

h2 {

font-size: 1.2em;

font-weight: normal;

}

.hidden {

display: none;

}

.icon {

background-repeat: no-repeat;

background-size: 100%;

height: 72px;

margin: 0 0 40px;

width: 72px;

}

input[type=checkbox] {

visibility: hidden;

}

.interstitial-wrapper {

box-sizing: border-box;

font-size: 1em;

line-height: 1.6em;

margin: 50px auto 0;

max-width: 600px;

width: 100%;

}

#malware-opt-in {

font-size: .875em;

margin-top: 39px;

}

.nav-wrapper {

margin-top: 51px;

}

.nav-wrapper::after {

clear: both;

content: '';

display: table;

width: 100%;

}

#opt-in-label {

-webkit-margin-start: 32px;

}

.safe-browsing:-webkit-any(a, #details, #details-button, h1, h2, p, .small-link) {

color: white;

}

.safe-browsing button {

background-color: rgb(206, 52, 38);

border: 1px solid white;

}

.safe-browsing button:active {

background-color: rgb(206, 52, 38);

border-color: rgba(255, 255, 255, .6);

}

.safe-browsing button:hover {

box-shadow: 0 2px 3px rgba(0, 0, 0, .5);

}

.safe-browsing .icon {

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAABoVBMVEX///+Li4v////////y8vL09PT99fTbRDfXzMzt7e3v7+/s7Ozy8vLw8PDu7u799PPSQTXx8fHZdGv19fX09PTm5ubbV0zXzczgW1Dd3d3c3Nzjb2Th4eHr6+vl5eXp6enZ2dng4OD29vbz8/PYYFXZV0zaYVbjbWP219TRQTTXdGz43Nn++/rib2T////b29vTQjXaYVf66ObngXjjbmTq6ura2trngHf76Ofk19bX19fe3t7o6Oji4uLk5OTeU0f119TYQzbZQzbWQjbXQzbZRDfaRDfn5+fbV0vj4+PVQjXf39/Y2Njgcmney8rqk4zdysn43drcysjcUETa1tbadGvaV0vaWEzZYVbibmXc2NjfzMvi0M7mfHPYYVbhzszd2dnZx8XieXDkc2nWX1Xacmne2trZdGzbcWjj0c/XTUHX1NPVX1Xg3NzYdGvYXFHZ1dXWTUHgzczUX1Xh3d3XdWzWXFHaVkvXxcTVTEHhbmXTXlXi3t7ayMbVXFLgbmXUTEDXYFXSXlTXzMvk4ODUXFHWbGPWzMvk4eHZioP39/f9Ro5BAAAABnRSTlMAAOQk5ye8yu+CAAACRklEQVR4XrXWRZPbUBSEUWdmIpl5mJmZg8zMzMzMzPCr43isNqif76u6lW+nuzgrtUqB/1ptzUSVamrVDiS1A0ntQFI7kNQOJLUDSe1AUjuQ1A4ktQNJ70DSO5D0DiS9A0nvQIKjlOAoJThqyewsXZ1hQOL8YZNkcJrcJiIlBt2No0zKQSbHJVJiznW5BIg4kMocSDIEBxKcwvkoJAE6uMJAguO13xIaWyyRiDPdGGGQJBFnzb4Qh2Qp0VrmdHXFCSRKxFmYDAsQpNkSiTgtLZAAydIgcZqbYwQSJOqs3QsJkCRxp7s7RSBBok5bW5RAgkSd9bujIoS3AA0QZ0NHrx3ktLro5SvidNRnAUkO2nWZOPU7s4BEB9J74qzrzACSHNRwhDid8xlAogPpEHHa23sIxJyB60XpAHEioT9myBnf4XWq8W4aDw1niROKA/I7270u5HbxKI3Hk0+IEzZBzuktXn35XRw7jsOJi34nZoCcN5u9+gq7OJPGqf+czzFAzsdtXp+xi0tpHPtvVzopDl3Z6nUtWNzXjZs436p0DNDQnT0r3QuW7vT+g8L54XKlEzX8RAw9nvrX02D53p89z59f+J0602/NptfJZPKt52AX70Zy5w/EWR0wSp+Gv3z1f3++jQx/545Z+vGTfcd+/eYOJFIEDtkpccxSyNqRpLitI0uWjiyFLR1ZignOqoC1VN0BJEupag4gK8nsALKToiYHkK3Uyx0CiRJ3ANlLWe4AspcyxKGQLHEHkL3UQxwKyRJxCKTtLyVXfw+a8JTgAAAAAElFTkSuQmCC)

1x,

url(data:image/png;base64,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)

2x

);

}

.small-link {

color: #696969;

font-size: .875em;

}

.ssl .icon {

url(data:image/png;base64,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)

1x,

url(data:image/png;base64,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)

2x

);

}

.styled-checkbox {

float: left;

height: 16px;

margin-top: .36em;

position: relative;

width: 16px;

}

[dir='rtl'] .styled-checkbox {

float: right;

}

.styled-checkbox label {

background: transparent;

border: white solid 1px;

border-radius: 2px;

height: 14px;

left: 0;

position: absolute;

right: 0;

top: 0;

width: 14px;

}

.styled-checkbox label::after {

background: transparent;

border: 2px solid white;

border-right-width: 0;

border-top-width: 0;

content: '';

height: 4px;

left: 2px;

opacity: 0.3;

position: absolute;

top: 3px;

transform: rotate(-45deg);

width: 9px;

}

.styled-checkbox input[type=checkbox]:checked + label::after {

opacity: 1;

}

@media (max-width: 700px) {

.interstitial-wrapper {

padding: 0 10%;

}

@media (max-height: 600px) {

.interstitial-wrapper {

margin-top: 5px;

}

@media (max-width: 400px) {

button, [dir='rtl'] button {

float: none;

font-size: 1em;

width: 100%;

}

#details {

margin: 20px 0 20px 0;

}

#details p:not(:first-of-type) {

margin-top: 10px;

}

#details-button {

display: block;

padding-top: 14px;

text-align: center;

width: 100%;

}

.interstitial-wrapper {

padding: 0 5%;

}

#malware-opt-in {

margin-top: 24px;

}

.nav-wrapper {

margin-top: 30px;

}

.small-link {

font-size: 1em;

}

</style>

<style>

html[subframe] #main-frame-error {

display: none;

}

/* Don't use the subframe error div when the error is in a main frame. */

html:not([subframe]) #sub-frame-error {

display: none;

}

#diagnose-button {

-webkit-margin-start: 0;

float: none;

margin-bottom: 10px;

margin-top: 20px;

}

h1 {

-webkit-margin-before: 0;

}

h2 {

color: #666;

font-size: 1.2em;

font-weight: normal;

margin: 10px 0;

}

a {

color: rgb(17, 85, 204);

text-decoration: none;

}

.icon {

-webkit-user-select: none;

}

.icon-generic {

/**

* Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted

* renderer process, so embed the resource manually.

*/

content: -webkit-image-set(

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAyCAAAAADkGq1yAAAAAnRSTlMA/1uRIrUAAABLSURBVHhe7dOxDQAgCERRdrza/ScwscNYSKIhWAror9+VR7BjKZbkrSpKeA45K8PQuoYqcUNKbmUzpNkD8kvM/ErlkVFk8necCyU7IotT35DVJRIAAAAASUVORK5CYII=')

1x,

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABkCAAAAAAwZDj3AAAAAnRSTlMA/1uRIrUAAABiSURBVHhe7cy7CYAwFABAd8z+HyewskkTW+EFA3kgSu4GuK2ktI71SqWyjeyxirlS2aeMQczfKcuNUjny/1KpPCbKjA+WSqVSqVQqawmy5TlZKpVPQciVSuUEpVKZtVypVF5DHE3/NzR+1AAAAABJRU5ErkJggg==')

2x

);

height: 50px;

padding-top: 20px;

width: 41px;

}

.icon-offline {

content: -webkit-image-set(

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAvAgMAAADlfsA8AAAADFBMVEX39/f////39/dTU1NOmoBdAAAAAnRSTlMAAHaTzTgAAAB6SURBVHherc2xDUIxDIThE6UbVmEZ9nN9TUZgJWo3Ju8UhGIrHX/1FScdnr82K+PMoZizbozLsfw+OP9mkpvNARuabB6OG6fIZr4uozi4noqTYrcKHoxi63ZodLBG0a0R0c2M5Uw5Z3rzoavqwNf3CGybKH4gYXTq6wPqOghb2tvIFQAAAABJRU5ErkJggg==')

1x,

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABeAgMAAADaoju6AAAADFBMVEX39/f////39/dTU1NOmoBdAAAAAnRSTlMAAHaTzTgAAACDSURBVHhe7dIhDgQhAEPR6jV7urnkN3PEbkIIICCQSdfNl8/UVNe0DA/R0p7BtTzjFkesLO8nX6YUYpj8IcO48Ie+GGa4XSqYYwO4lWUPSpjH4I8s5Vg8Z7RhkeeZE2fRNc/Y5oRtu7NrC26bCKNWktEp2xueT5on/F2yLQlAQGWt+AcZixZ9AfIcYgAAAABJRU5ErkJggg==')

2x

);

height: 47px;

margin: 0 0 40px;

position: relative;

width: 44px;

}

#content-top {

margin: 20px;

}

#help-box-outer {

-webkit-transition: height ease-in 218ms;

overflow: hidden;

}

#help-box-inner {

background-color: #f9f9f9;

border-top: 1px solid #EEE;

color: #444;

padding: 20px;

text-align: start;

}

#suggestion {

margin-top: 15px;

}

#short-suggestion {

margin-top: 5px;

}

#sub-frame-error-details {

color: #8F8F8F;

/* Not done on mobile for performance reasons. */

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);

}

[jscontent=failedUrl] {

overflow-wrap: break-word;

}

#search-container {

/* Prevents a space between controls. */

display: flex;

margin-top: 20px;

}

#search-box {

border: 1px solid #cdcdcd;

flex-grow: 1;

font-size: 16px;

height: 26px;

margin-right: 0;

padding: 1px 9px;

}

#search-box:focus {

border: 1px solid rgb(93, 154, 255);

outline: none;

}

#search-button {

border: none;

border-bottom-left-radius: 0;

border-top-left-radius: 0;

box-shadow: none;

display: flex;

height: 30px;

margin: 0;

padding: 0;

width: 60px;

}

#search-image {

content: -webkit-image-set(

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAQAAAB+HTb/AAAArElEQVR4Xn3NsUoCUBzG0XvB3U0chR4geo5qihpt6gkCx0bXFsMERWj2KWqIanAvmlUUoQapwU6g4l8H5bd9Z/iSPS0hu/RqZqrncBuzLl7U3Rn4cSpQFTeroejJl1Lgs7f4ceDPdeBMXYp86gaONYJkY83AnqHiGk9wHnjk16PKgo5N9BUCkzPf5j6M0PfuVg5MymoetFwoaKAlB26WdXAvJ7u5mezitqtkT//7Sv/u96CaLQAAAABJRU5ErkJggg==')

1x,

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAQAAACVzLYUAAABYElEQVR4Xr3VMUuVURzH8XO98jgkGikENkRD0KRGDUVDQy0h2SiC4IuIiktL4AvQt1CDBJUJwo1KXXS6cWdHw7tcjWwoC5Hrx+UZgnNO5CXiO/75jD/+QZf9MzjskVU7DrU1zRv9G9ir5hsA4Nii83+GA9ZI1nI1D6tWAE1TRlQMuuuFDthzMQefgo4nKr+f3dIGDdUUHPYD1ISoMQdgJgUfgqaKEOcxWE/BVTArJBvwC0cGY7gNLgiZNsD1GP4EPVn4EtyLYRuczcJ34HYMP4E7GdajDS7FcB48z8AJ8FmI4TjouBkzZ2yBuRQMlsButIZ+dfDVUBqOaIHvavpLVHXfFmAqv45r9gEHNr3y3hcAfLSgSMPgiiZR+6Z9AMuKNAwqpjUcA2h55pxgAfBWkYRlQ254YMJloaxPHbCkiGCymL5RlLA7GnRDXyuC7uhicLoKdRyaDE5Pl00K//93nABqPgBDK8sfWgAAAABJRU5ErkJggg==')

2x

);

margin: auto;

}

.hidden {

display: none;

}

.suggestions {

margin-top: 18px;

}

.suggestion-header {

font-weight: bold;

margin-bottom: 4px;

}

.suggestion-body {

color: #777;

}

.error-code {

color: #A0A0A0;

margin-top: 15px;

}

/* Increase line height at higher resolutions. */

@media (min-width: 641px) and (min-height: 641px) {

#help-box-inner {

line-height: 18px;

}

/* Decrease padding at low sizes. */

@media (max-width: 640px), (max-height: 640px) {

body {

margin: 15px;

}

h1 {

margin: 10px 0 15px;

}

#content-top {

margin: 15px;

}

#help-box-inner {

padding: 20px;

}

.suggestions {

margin-top: 10px;

}

.suggestion-header {

margin-bottom: 0;

}

.error-code {

margin-top: 10px;

}

/* Don't allow overflow when in a subframe. */

html[subframe] body {

overflow: hidden;

}

#sub-frame-error {

-webkit-align-items: center;

background-color: #DDD;

display: -webkit-flex;

-webkit-flex-flow: column;

height: 100%;

-webkit-justify-content: center;

left: 0;

position: absolute;

top: 0;

width: 100%;

}

#sub-frame-error:hover {

background-color: #EEE;

}

#sub-frame-error-details {

margin: 0 10px;

visibility: hidden;

}

/* Show details only when hovering. */

#sub-frame-error:hover #sub-frame-error-details {

visibility: visible;

}

/* If the iframe is too small, always hide the error code. */

/* TODO(mmenke): See if overflow: no-display works better, once supported. */

@media (max-width: 200px), (max-height: 95px) {

#sub-frame-error-details {

display: none;

}

/* details-button is special; it's a <button> element that looks like a link. */

#details-button {

background-color: inherit;

border: none;

box-shadow: none;

min-width: 0;

padding: 0;

text-decoration: underline;

}

/* Styles for platform dependent separation of controls and details button. */

.suggested-left > #control-buttons, .suggested-right > #details-button {

float: left;

}

.suggested-right > #control-buttons, .suggested-left > #details-button {

float: right;

}

#details-button.singular {

float: none;

}

#buttons::after {

clear: both;

content: '';

display: block;

width: 100%;

}

/* Offline page */

.offline .interstitial-wrapper {

color: #2b2b2b;

font-size: 1em;

line-height: 1.55;

margin: 100px auto 0;

max-width: 600px;

width: 100%;

}

.offline .runner-container {

height: 150px;

max-width: 600px;

overflow: hidden;

position: absolute;

top: 10px;

width: 44px;

z-index: 2;

}

.offline .runner-canvas {

height: 150px;

max-width: 600px;

opacity: 1;

overflow: hidden;

position: absolute;

top: 0;

}

.offline .controller {

background: rgba(247, 247, 247, .1);

height: 100vh;

left: 0;

position: absolute;

top: 0;

width: 100vw;

z-index: 1;

}

#offline-resources {

display: none;

}

@media (max-width: 400px) {

.suggested-left > #control-buttons, .suggested-right > #control-buttons {

float: none;

margin: 50px 0 20px;

}

@media (max-height: 350px) {

h1 {

margin: 0 0 15px;

}

.icon-offline {

margin: 0 0 10px;

}

.interstitial-wrapper {

margin-top: 5%;

}

.nav-wrapper {

margin-top: 30px;

}

</style>

</head>

window.fbAsyncInit = function() {

FB.init({

appId : '190786194818626',

cookie : true,

xfbml : true,

version : '2.2'

});

FB.AppEvents.logPageView();

};

(function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "https://connect.facebook.net/en_US/sdk.js";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

<div class="onlyforchrome" style="margin-top:5px;text-align:center;color:#8a8a8a;margin-bottom:80px; font-size:.8em;line-height:1.2em;font-family: Georgia;"><br/> Press "Space" to jump your Dino and start the game.</div>

<div id="main-frame-notchrome" style="display:none; margin-top:50px;">Sorry, this game only runs on the Google Chrome! You can download it free <a href="https://www.google.com/chrome">here</a></div>

</div>

</div>

</template>

</div>

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {

new Runner('.interstitial-wrapper');

} else {

document.getElementById("main-frame-notchrome").style.display="";

}

</script>

<td><div

class="fb-like"

data-share="false"

data-width="150"

data-show-faces="false">

</div></td>

</tr></table>

</div>

if (navigator.userAgent.toLowerCase().indexOf('chrome') <= -1) {

hideClass(".onlyforchrome");

}

</script>

</div>

</body>

</html>