fork(2) download
  1.  
  2.  
  3. <html>
  4.  
  5. <head>
  6. <title>T-Rex Game</title>
  7. <meta name="description" content="Ripped T-Rex/Dino game of Chromium">
  8. <meta property="og:title" content="Play the hidden T-Rex Dinosaur game of Chromium .">
  9. <meta property="og:type" content="article">
  10. <meta property="og:url" content="http://w...content-available-to-author-only...t.org">
  11. <meta property="og:image" content="http://i...content-available-to-author-only...t.org/2015/01/trex.png">
  12. <meta property="og:site_name" content="The Code Post">
  13. <meta property="og:description" content="Google Chrome has a hidden T-Rex game only for offline mode. But now, you can enjoy it any time and on any device, but you gotta stay online!!!">
  14.  
  15. <meta name="twitter:card" content="summary_large_image">
  16. <meta name="twitter:site" content="@thecodepost">
  17. <meta name="twitter:creator" content="@thecodepost">
  18. <meta name="twitter:title" content="Check out the cool hidden game from Google Chrome!">
  19. <meta name="twitter:description" content="Check out the cool hidden game from Google Chrome!">
  20. <meta name="twitter:image:src" content="http://i...content-available-to-author-only...t.org/2015/01/trex.png">
  21. <script src="https://apis.google.com/js/platform.js" async defer></script>
  22.  
  23. <!--script type="text/javascript" src="a.js"></script-->
  24. <script type="text/javascript">
  25. function hideClass(name) {
  26. var myClasses = document.querySelectorAll(name),
  27. i = 0,
  28. l = myClasses.length;
  29.  
  30. for (i; i < l; i++) {
  31. myClasses[i].style.display = 'none';
  32. }
  33. }
  34. // Copyright (c) 2014 The Chromium Authors. All rights reserved.
  35. // Use of this source code is governed by a BSD-style license that can be
  36. // found in the LICENSE file.
  37. (function() {
  38. 'use strict';
  39. /**
  40.   * T-Rex runner.
  41.   * @param {string} outerContainerId Outer containing element id.
  42.   * @param {object} opt_config
  43.   * @constructor
  44.   * @export
  45.   */
  46. function Runner(outerContainerId, opt_config) {
  47. // Singleton
  48. if (Runner.instance_) {
  49. return Runner.instance_;
  50. }
  51. Runner.instance_ = this;
  52. this.outerContainerEl = document.querySelector(outerContainerId);
  53. this.containerEl = null;
  54. this.detailsButton = this.outerContainerEl.querySelector('#details-button');
  55. this.config = opt_config || Runner.config;
  56. this.dimensions = Runner.defaultDimensions;
  57. this.canvas = null;
  58. this.canvasCtx = null;
  59. this.tRex = null;
  60. this.distanceMeter = null;
  61. this.distanceRan = 0;
  62. this.highestScore = 0;
  63. this.time = 0;
  64. this.runningTime = 0;
  65. this.msPerFrame = 1000 / FPS;
  66. this.currentSpeed = this.config.SPEED;
  67. this.obstacles = [];
  68. this.started = false;
  69. this.activated = false;
  70. this.crashed = false;
  71. this.paused = false;
  72. this.resizeTimerId_ = null;
  73. this.playCount = 0;
  74. // Sound FX.
  75. this.audioBuffer = null;
  76. this.soundFx = {};
  77. // Global web audio context for playing sounds.
  78. this.audioContext = null;
  79. // Images.
  80. this.images = {};
  81. this.imagesLoaded = 0;
  82. this.loadImages();
  83. }
  84. window['Runner'] = Runner;
  85. /**
  86.   * Default game width.
  87.   * @const
  88.   */
  89. var DEFAULT_WIDTH = 600;
  90. /**
  91.   * Frames per second.
  92.   * @const
  93.   */
  94. var FPS = 60;
  95. /** @const */
  96. var IS_HIDPI = window.devicePixelRatio > 1;
  97. /** @const */
  98. var IS_IOS =
  99. window.navigator.userAgent.indexOf('UIWebViewForStaticFileContent') > -1;
  100. /** @const */
  101. var IS_MOBILE = window.navigator.userAgent.indexOf('Mobi') > -1 || IS_IOS;
  102. /** @const */
  103. var IS_TOUCH_ENABLED = 'ontouchstart' in window;
  104. /**
  105.   * Default game configuration.
  106.   * @enum {number}
  107.   */
  108. Runner.config = {
  109. ACCELERATION: 0.001,
  110. BG_CLOUD_SPEED: 0.2,
  111. BOTTOM_PAD: 10,
  112. CLEAR_TIME: 3000,
  113. CLOUD_FREQUENCY: 0.5,
  114. GAMEOVER_CLEAR_TIME: 750,
  115. GAP_COEFFICIENT: 0.6,
  116. GRAVITY: 0.6,
  117. INITIAL_JUMP_VELOCITY: 12,
  118. MAX_CLOUDS: 6,
  119. MAX_OBSTACLE_LENGTH: 3,
  120. MAX_SPEED: 12,
  121. MIN_JUMP_HEIGHT: 35,
  122. MOBILE_SPEED_COEFFICIENT: 1.2,
  123. RESOURCE_TEMPLATE_ID: 'audio-resources',
  124. SPEED: 6,
  125. SPEED_DROP_COEFFICIENT: 3
  126. };
  127. /**
  128.   * Default dimensions.
  129.   * @enum {string}
  130.   */
  131. Runner.defaultDimensions = {
  132. WIDTH: DEFAULT_WIDTH,
  133. HEIGHT: 150
  134. };
  135. /**
  136.   * CSS class names.
  137.   * @enum {string}
  138.   */
  139. Runner.classes = {
  140. CANVAS: 'runner-canvas',
  141. CONTAINER: 'runner-container',
  142. CRASHED: 'crashed',
  143. ICON: 'icon-offline',
  144. TOUCH_CONTROLLER: 'controller'
  145. };
  146. /**
  147.   * Image source urls.
  148.   * @enum {array.<object>}
  149.   */
  150. Runner.imageSources = {
  151. LDPI: [
  152. {name: 'CACTUS_LARGE', id: '1x-obstacle-large'},
  153. {name: 'CACTUS_SMALL', id: '1x-obstacle-small'},
  154. {name: 'CLOUD', id: '1x-cloud'},
  155. {name: 'HORIZON', id: '1x-horizon'},
  156. {name: 'RESTART', id: '1x-restart'},
  157. {name: 'TEXT_SPRITE', id: '1x-text'},
  158. {name: 'TREX', id: '1x-trex'}
  159. ],
  160. HDPI: [
  161. {name: 'CACTUS_LARGE', id: '2x-obstacle-large'},
  162. {name: 'CACTUS_SMALL', id: '2x-obstacle-small'},
  163. {name: 'CLOUD', id: '2x-cloud'},
  164. {name: 'HORIZON', id: '2x-horizon'},
  165. {name: 'RESTART', id: '2x-restart'},
  166. {name: 'TEXT_SPRITE', id: '2x-text'},
  167. {name: 'TREX', id: '2x-trex'}
  168. ]
  169. };
  170. /**
  171.   * Sound FX. Reference to the ID of the audio tag on interstitial page.
  172.   * @enum {string}
  173.   */
  174. Runner.sounds = {
  175. BUTTON_PRESS: 'offline-sound-press',
  176. HIT: 'offline-sound-hit',
  177. SCORE: 'offline-sound-reached'
  178. };
  179. /**
  180.   * Key code mapping.
  181.   * @enum {object}
  182.   */
  183. Runner.keycodes = {
  184. JUMP: {'38': 1, '32': 1}, // Up, spacebar
  185. DUCK: {'40': 1}, // Down
  186. RESTART: {'13': 1} // Enter
  187. };
  188. /**
  189.   * Runner event names.
  190.   * @enum {string}
  191.   */
  192. Runner.events = {
  193. ANIM_END: 'webkitAnimationEnd',
  194. CLICK: 'click',
  195. KEYDOWN: 'keydown',
  196. KEYUP: 'keyup',
  197. MOUSEDOWN: 'mousedown',
  198. MOUSEUP: 'mouseup',
  199. RESIZE: 'resize',
  200. TOUCHEND: 'touchend',
  201. TOUCHSTART: 'touchstart',
  202. VISIBILITY: 'visibilitychange',
  203. BLUR: 'blur',
  204. FOCUS: 'focus',
  205. LOAD: 'load'
  206. };
  207. Runner.prototype = {
  208. /**
  209.   * Setting individual settings for debugging.
  210.   * @param {string} setting
  211.   * @param {*} value
  212.   */
  213. updateConfigSetting: function(setting, value) {
  214. if (setting in this.config && value != undefined) {
  215. this.config[setting] = value;
  216. switch (setting) {
  217. case 'GRAVITY':
  218. case 'MIN_JUMP_HEIGHT':
  219. case 'SPEED_DROP_COEFFICIENT':
  220. this.tRex.config[setting] = value;
  221. break;
  222. case 'INITIAL_JUMP_VELOCITY':
  223. this.tRex.setJumpVelocity(value);
  224. break;
  225. case 'SPEED':
  226. this.setSpeed(value);
  227. break;
  228. }
  229. }
  230. },
  231. /**
  232.   * Load and cache the image assets from the page.
  233.   */
  234. loadImages: function() {
  235. var imageSources = IS_HIDPI ? Runner.imageSources.HDPI :
  236. Runner.imageSources.LDPI;
  237. var numImages = imageSources.length;
  238. for (var i = numImages - 1; i >= 0; i--) {
  239. var imgSource = imageSources[i];
  240. this.images[imgSource.name] = document.getElementById(imgSource.id);
  241. }
  242. this.init();
  243. },
  244. /**
  245.   * Load and decode base 64 encoded sounds.
  246.   */
  247. loadSounds: function() {
  248. if (!IS_IOS) {
  249. this.audioContext = new AudioContext();
  250. var resourceTemplate =
  251. document.getElementById(this.config.RESOURCE_TEMPLATE_ID).content;
  252. for (var sound in Runner.sounds) {
  253. var soundSrc =
  254. resourceTemplate.getElementById(Runner.sounds[sound]).src;
  255. soundSrc = soundSrc.substr(soundSrc.indexOf(',') + 1);
  256. var buffer = decodeBase64ToArrayBuffer(soundSrc);
  257. // Async, so no guarantee of order in array.
  258. this.audioContext.decodeAudioData(buffer, function(index, audioData) {
  259. this.soundFx[index] = audioData;
  260. }.bind(this, sound));
  261. }
  262. }
  263. },
  264. /**
  265.   * Sets the game speed. Adjust the speed accordingly if on a smaller screen.
  266.   * @param {number} opt_speed
  267.   */
  268. setSpeed: function(opt_speed) {
  269. var speed = opt_speed || this.currentSpeed;
  270. // Reduce the speed on smaller mobile screens.
  271. if (this.dimensions.WIDTH < DEFAULT_WIDTH) {
  272. var mobileSpeed = speed * this.dimensions.WIDTH / DEFAULT_WIDTH *
  273. this.config.MOBILE_SPEED_COEFFICIENT;
  274. this.currentSpeed = mobileSpeed > speed ? speed : mobileSpeed;
  275. } else if (opt_speed) {
  276. this.currentSpeed = opt_speed;
  277. }
  278. },
  279. /**
  280.   * Game initialiser.
  281.   */
  282. init: function() {
  283. // Hide the static icon.
  284. //document.querySelector('.' + Runner.classes.ICON).style.visibility = 'hidden';
  285. this.adjustDimensions();
  286. this.setSpeed();
  287. this.containerEl = document.createElement('div');
  288. this.containerEl.className = Runner.classes.CONTAINER;
  289. // Player canvas container.
  290. this.canvas = createCanvas(this.containerEl, this.dimensions.WIDTH,
  291. this.dimensions.HEIGHT, Runner.classes.PLAYER);
  292. this.canvasCtx = this.canvas.getContext('2d');
  293. this.canvasCtx.fillStyle = '#f7f7f7';
  294. this.canvasCtx.fill();
  295. Runner.updateCanvasScaling(this.canvas);
  296. // Horizon contains clouds, obstacles and the ground.
  297. this.horizon = new Horizon(this.canvas, this.images, this.dimensions,
  298. this.config.GAP_COEFFICIENT);
  299. // Distance meter
  300. this.distanceMeter = new DistanceMeter(this.canvas,
  301. this.images.TEXT_SPRITE, this.dimensions.WIDTH);
  302. // Draw t-rex
  303. this.tRex = new Trex(this.canvas, this.images.TREX);
  304. this.outerContainerEl.appendChild(this.containerEl);
  305. if (IS_MOBILE) {
  306. this.createTouchController();
  307. }
  308. this.startListening();
  309. this.update();
  310. window.addEventListener(Runner.events.RESIZE,
  311. this.debounceResize.bind(this));
  312. },
  313. /**
  314.   * Create the touch controller. A div that covers whole screen.
  315.   */
  316. createTouchController: function() {
  317. this.touchController = document.createElement('div');
  318. this.touchController.className = Runner.classes.TOUCH_CONTROLLER;
  319. },
  320. /**
  321.   * Debounce the resize event.
  322.   */
  323. debounceResize: function() {
  324. if (!this.resizeTimerId_) {
  325. this.resizeTimerId_ =
  326. setInterval(this.adjustDimensions.bind(this), 250);
  327. }
  328. },
  329. /**
  330.   * Adjust game space dimensions on resize.
  331.   */
  332. adjustDimensions: function() {
  333. clearInterval(this.resizeTimerId_);
  334. this.resizeTimerId_ = null;
  335. var boxStyles = window.getComputedStyle(this.outerContainerEl);
  336. var padding = Number(boxStyles.paddingLeft.substr(0,
  337. boxStyles.paddingLeft.length - 2));
  338. this.dimensions.WIDTH = this.outerContainerEl.offsetWidth - padding * 2;
  339. // Redraw the elements back onto the canvas.
  340. if (this.canvas) {
  341. this.canvas.width = this.dimensions.WIDTH;
  342. this.canvas.height = this.dimensions.HEIGHT;
  343. Runner.updateCanvasScaling(this.canvas);
  344. this.distanceMeter.calcXPos(this.dimensions.WIDTH);
  345. this.clearCanvas();
  346. this.horizon.update(0, 0, true);
  347. this.tRex.update(0);
  348. // Outer container and distance meter.
  349. if (this.activated || this.crashed) {
  350. this.containerEl.style.width = this.dimensions.WIDTH + 'px';
  351. this.containerEl.style.height = this.dimensions.HEIGHT + 'px';
  352. this.distanceMeter.update(0, Math.ceil(this.distanceRan));
  353. this.stop();
  354. } else {
  355. this.tRex.draw(0, 0);
  356. }
  357. // Game over panel.
  358. if (this.crashed && this.gameOverPanel) {
  359. this.gameOverPanel.updateDimensions(this.dimensions.WIDTH);
  360. this.gameOverPanel.draw();
  361. }
  362. }
  363. },
  364. /**
  365.   * Play the game intro.
  366.   * Canvas container width expands out to the full width.
  367.   */
  368. playIntro: function() {
  369. if (!this.started && !this.crashed) {
  370. this.playingIntro = true;
  371. this.tRex.playingIntro = true;
  372. // CSS animation definition.
  373. var keyframes = '@-webkit-keyframes intro { ' +
  374. 'from { width:' + Trex.config.WIDTH + 'px }' +
  375. 'to { width: ' + this.dimensions.WIDTH + 'px }' +
  376. '}';
  377. document.styleSheets[0].insertRule(keyframes, 0);
  378. this.containerEl.addEventListener(Runner.events.ANIM_END,
  379. this.startGame.bind(this));
  380. this.containerEl.style.webkitAnimation = 'intro .4s ease-out 1 both';
  381. this.containerEl.style.width = this.dimensions.WIDTH + 'px';
  382. if (this.touchController) {
  383. this.outerContainerEl.appendChild(this.touchController);
  384. }
  385. this.activated = true;
  386. this.started = true;
  387. } else if (this.crashed) {
  388. this.restart();
  389. }
  390. },
  391. /**
  392.   * Update the game status to started.
  393.   */
  394. startGame: function() {
  395. this.runningTime = 0;
  396. this.playingIntro = false;
  397. this.tRex.playingIntro = false;
  398. this.containerEl.style.webkitAnimation = '';
  399. this.playCount++;
  400. // Handle tabbing off the page. Pause the current game.
  401. window.addEventListener(Runner.events.VISIBILITY,
  402. this.onVisibilityChange.bind(this));
  403. window.addEventListener(Runner.events.BLUR,
  404. this.onVisibilityChange.bind(this));
  405. window.addEventListener(Runner.events.FOCUS,
  406. this.onVisibilityChange.bind(this));
  407. },
  408. clearCanvas: function() {
  409. this.canvasCtx.clearRect(0, 0, this.dimensions.WIDTH,
  410. this.dimensions.HEIGHT);
  411. },
  412. /**
  413.   * Update the game frame.
  414.   */
  415. update: function() {
  416. this.drawPending = false;
  417. var now = getTimeStamp();
  418. var deltaTime = now - (this.time || now);
  419. this.time = now;
  420. if (this.activated) {
  421. this.clearCanvas();
  422. if (this.tRex.jumping) {
  423. this.tRex.updateJump(deltaTime, this.config);
  424. }
  425. this.runningTime += deltaTime;
  426. var hasObstacles = this.runningTime > this.config.CLEAR_TIME;
  427. // First jump triggers the intro.
  428. if (this.tRex.jumpCount == 1 && !this.playingIntro) {
  429. this.playIntro();
  430. }
  431. // The horizon doesn't move until the intro is over.
  432. if (this.playingIntro) {
  433. this.horizon.update(0, this.currentSpeed, hasObstacles);
  434. } else {
  435. deltaTime = !this.started ? 0 : deltaTime;
  436. this.horizon.update(deltaTime, this.currentSpeed, hasObstacles);
  437. }
  438. // Check for collisions.
  439. var collision = hasObstacles &&
  440. checkForCollision(this.horizon.obstacles[0], this.tRex);
  441. if (!collision) {
  442. this.distanceRan += this.currentSpeed * deltaTime / this.msPerFrame;
  443. if (this.currentSpeed < this.config.MAX_SPEED) {
  444. this.currentSpeed += this.config.ACCELERATION;
  445. }
  446. } else {
  447. this.gameOver();
  448. }
  449. if (this.distanceMeter.getActualDistance(this.distanceRan) >
  450. this.distanceMeter.maxScore) {
  451. this.distanceRan = 0;
  452. }
  453. var playAcheivementSound = this.distanceMeter.update(deltaTime,
  454. Math.ceil(this.distanceRan));
  455. if (playAcheivementSound) {
  456. this.playSound(this.soundFx.SCORE);
  457. }
  458. }
  459. if (!this.crashed) {
  460. this.tRex.update(deltaTime);
  461. this.raq();
  462. }
  463. },
  464. /**
  465.   * Event handler.
  466.   */
  467. handleEvent: function(e) {
  468. return (function(evtType, events) {
  469. switch (evtType) {
  470. case events.KEYDOWN:
  471. case events.TOUCHSTART:
  472. case events.MOUSEDOWN:
  473. this.onKeyDown(e);
  474. break;
  475. case events.KEYUP:
  476. case events.TOUCHEND:
  477. case events.MOUSEUP:
  478. this.onKeyUp(e);
  479. break;
  480. }
  481. }.bind(this))(e.type, Runner.events);
  482. },
  483. /**
  484.   * Bind relevant key / mouse / touch listeners.
  485.   */
  486. startListening: function() {
  487. // Keys.
  488. document.addEventListener(Runner.events.KEYDOWN, this);
  489. document.addEventListener(Runner.events.KEYUP, this);
  490. if (IS_MOBILE) {
  491. // Mobile only touch devices.
  492. this.touchController.addEventListener(Runner.events.TOUCHSTART, this);
  493. this.touchController.addEventListener(Runner.events.TOUCHEND, this);
  494. this.containerEl.addEventListener(Runner.events.TOUCHSTART, this);
  495. } else {
  496. // Mouse.
  497. document.addEventListener(Runner.events.MOUSEDOWN, this);
  498. document.addEventListener(Runner.events.MOUSEUP, this);
  499. }
  500. },
  501. /**
  502.   * Remove all listeners.
  503.   */
  504. stopListening: function() {
  505. document.removeEventListener(Runner.events.KEYDOWN, this);
  506. document.removeEventListener(Runner.events.KEYUP, this);
  507. if (IS_MOBILE) {
  508. this.touchController.removeEventListener(Runner.events.TOUCHSTART, this);
  509. this.touchController.removeEventListener(Runner.events.TOUCHEND, this);
  510. this.containerEl.removeEventListener(Runner.events.TOUCHSTART, this);
  511. } else {
  512. document.removeEventListener(Runner.events.MOUSEDOWN, this);
  513. document.removeEventListener(Runner.events.MOUSEUP, this);
  514. }
  515. },
  516. /**
  517.   * Process keydown.
  518.   * @param {Event} e
  519.   */
  520. onKeyDown: function(e) {
  521. if (e.target != this.detailsButton) {
  522. if (!this.crashed && (Runner.keycodes.JUMP[String(e.keyCode)] ||
  523. e.type == Runner.events.TOUCHSTART)) {
  524. if (!this.activated) {
  525. this.loadSounds();
  526. this.activated = true;
  527. }
  528. if (!this.tRex.jumping) {
  529. this.playSound(this.soundFx.BUTTON_PRESS);
  530. this.tRex.startJump();
  531. }
  532. }
  533. if (this.crashed && e.type == Runner.events.TOUCHSTART &&
  534. e.currentTarget == this.containerEl) {
  535. this.restart();
  536. }
  537. }
  538. // Speed drop, activated only when jump key is not pressed.
  539. if (Runner.keycodes.DUCK[e.keyCode] && this.tRex.jumping) {
  540. e.preventDefault();
  541. this.tRex.setSpeedDrop();
  542. }
  543. },
  544. /**
  545.   * Process key up.
  546.   * @param {Event} e
  547.   */
  548. onKeyUp: function(e) {
  549. var keyCode = String(e.keyCode);
  550. var isjumpKey = Runner.keycodes.JUMP[keyCode] ||
  551. e.type == Runner.events.TOUCHEND ||
  552. e.type == Runner.events.MOUSEDOWN;
  553. if (this.isRunning() && isjumpKey) {
  554. this.tRex.endJump();
  555. } else if (Runner.keycodes.DUCK[keyCode]) {
  556. this.tRex.speedDrop = false;
  557. } else if (this.crashed) {
  558. // Check that enough time has elapsed before allowing jump key to restart.
  559. var deltaTime = getTimeStamp() - this.time;
  560. if (Runner.keycodes.RESTART[keyCode] ||
  561. (e.type == Runner.events.MOUSEUP && e.target == this.canvas) ||
  562. (deltaTime >= this.config.GAMEOVER_CLEAR_TIME &&
  563. Runner.keycodes.JUMP[keyCode])) {
  564. this.restart();
  565. }
  566. } else if (this.paused && isjumpKey) {
  567. this.play();
  568. }
  569. },
  570. /**
  571.   * RequestAnimationFrame wrapper.
  572.   */
  573. raq: function() {
  574. if (!this.drawPending) {
  575. this.drawPending = true;
  576. this.raqId = requestAnimationFrame(this.update.bind(this));
  577. }
  578. },
  579. /**
  580.   * Whether the game is running.
  581.   * @return {boolean}
  582.   */
  583. isRunning: function() {
  584. return !!this.raqId;
  585. },
  586. /**
  587.   * Game over state.
  588.   */
  589. gameOver: function() {
  590. this.playSound(this.soundFx.HIT);
  591. vibrate(200);
  592. this.stop();
  593. this.crashed = true;
  594. this.distanceMeter.acheivement = false;
  595. this.tRex.update(100, Trex.status.CRASHED);
  596. // Game over panel.
  597. if (!this.gameOverPanel) {
  598. this.gameOverPanel = new GameOverPanel(this.canvas,
  599. this.images.TEXT_SPRITE, this.images.RESTART,
  600. this.dimensions);
  601. } else {
  602. this.gameOverPanel.draw();
  603. }
  604. // Update the high score.
  605. if (this.distanceRan > this.highestScore) {
  606. this.highestScore = Math.ceil(this.distanceRan);
  607. this.distanceMeter.setHighScore(this.highestScore);
  608. }
  609. // Reset the time clock.
  610. this.time = getTimeStamp();
  611. },
  612. stop: function() {
  613. this.activated = false;
  614. this.paused = true;
  615. cancelAnimationFrame(this.raqId);
  616. this.raqId = 0;
  617. },
  618. play: function() {
  619. if (!this.crashed) {
  620. this.activated = true;
  621. this.paused = false;
  622. this.tRex.update(0, Trex.status.RUNNING);
  623. this.time = getTimeStamp();
  624. this.update();
  625. }
  626. },
  627. restart: function() {
  628. if (!this.raqId) {
  629. this.playCount++;
  630. this.runningTime = 0;
  631. this.activated = true;
  632. this.crashed = false;
  633. this.distanceRan = 0;
  634. this.setSpeed(this.config.SPEED);
  635. this.time = getTimeStamp();
  636. this.containerEl.classList.remove(Runner.classes.CRASHED);
  637. this.clearCanvas();
  638. this.distanceMeter.reset(this.highestScore);
  639. this.horizon.reset();
  640. this.tRex.reset();
  641. this.playSound(this.soundFx.BUTTON_PRESS);
  642. this.update();
  643. }
  644. },
  645. /**
  646.   * Pause the game if the tab is not in focus.
  647.   */
  648. onVisibilityChange: function(e) {
  649. if (document.hidden || document.webkitHidden || e.type == 'blur') {
  650. this.stop();
  651. } else {
  652. this.play();
  653. }
  654. },
  655. /**
  656.   * Play a sound.
  657.   * @param {SoundBuffer} soundBuffer
  658.   */
  659. playSound: function(soundBuffer) {
  660. if (soundBuffer) {
  661. var sourceNode = this.audioContext.createBufferSource();
  662. sourceNode.buffer = soundBuffer;
  663. sourceNode.connect(this.audioContext.destination);
  664. sourceNode.start(0);
  665. }
  666. }
  667. };
  668. /**
  669.   * Updates the canvas size taking into
  670.   * account the backing store pixel ratio and
  671.   * the device pixel ratio.
  672.   *
  673.   * See article by Paul Lewis:
  674.   * http://w...content-available-to-author-only...s.com/en/tutorials/canvas/hidpi/
  675.   *
  676.   * @param {HTMLCanvasElement} canvas
  677.   * @param {number} opt_width
  678.   * @param {number} opt_height
  679.   * @return {boolean} Whether the canvas was scaled.
  680.   */
  681. Runner.updateCanvasScaling = function(canvas, opt_width, opt_height) {
  682. var context = canvas.getContext('2d');
  683. // Query the various pixel ratios
  684. var devicePixelRatio = Math.floor(window.devicePixelRatio) || 1;
  685. var backingStoreRatio = Math.floor(context.webkitBackingStorePixelRatio) || 1;
  686. var ratio = devicePixelRatio / backingStoreRatio;
  687. // Upscale the canvas if the two ratios don't match
  688. if (devicePixelRatio !== backingStoreRatio) {
  689. var oldWidth = opt_width || canvas.width;
  690. var oldHeight = opt_height || canvas.height;
  691. canvas.width = oldWidth * ratio;
  692. canvas.height = oldHeight * ratio;
  693. canvas.style.width = oldWidth + 'px';
  694. canvas.style.height = oldHeight + 'px';
  695. // Scale the context to counter the fact that we've manually scaled
  696. // our canvas element.
  697. context.scale(ratio, ratio);
  698. return true;
  699. }
  700. return false;
  701. };
  702. /**
  703.   * Get random number.
  704.   * @param {number} min
  705.   * @param {number} max
  706.   * @param {number}
  707.   */
  708. function getRandomNum(min, max) {
  709. return Math.floor(Math.random() * (max - min + 1)) + min;
  710. }
  711. /**
  712.   * Vibrate on mobile devices.
  713.   * @param {number} duration Duration of the vibration in milliseconds.
  714.   */
  715. function vibrate(duration) {
  716. if (IS_MOBILE && window.navigator.vibrate) {
  717. window.navigator.vibrate(duration);
  718. }
  719. }
  720. /**
  721.   * Create canvas element.
  722.   * @param {HTMLElement} container Element to append canvas to.
  723.   * @param {number} width
  724.   * @param {number} height
  725.   * @param {string} opt_classname
  726.   * @return {HTMLCanvasElement}
  727.   */
  728. function createCanvas(container, width, height, opt_classname) {
  729. var canvas = document.createElement('canvas');
  730. canvas.className = opt_classname ? Runner.classes.CANVAS + ' ' +
  731. opt_classname : Runner.classes.CANVAS;
  732. canvas.width = width;
  733. canvas.height = height;
  734. container.appendChild(canvas);
  735. return canvas;
  736. }
  737. /**
  738.   * Decodes the base 64 audio to ArrayBuffer used by Web Audio.
  739.   * @param {string} base64String
  740.   */
  741. function decodeBase64ToArrayBuffer(base64String) {
  742. var len = (base64String.length / 4) * 3;
  743. var str = atob(base64String);
  744. var arrayBuffer = new ArrayBuffer(len);
  745. var bytes = new Uint8Array(arrayBuffer);
  746. for (var i = 0; i < len; i++) {
  747. bytes[i] = str.charCodeAt(i);
  748. }
  749. return bytes.buffer;
  750. }
  751. /**
  752.   * Return the current timestamp.
  753.   * @return {number}
  754.   */
  755. function getTimeStamp() {
  756. return IS_IOS ? new Date().getTime() : performance.now();
  757. }
  758. //******************************************************************************
  759. /**
  760.   * Game over panel.
  761.   * @param {!HTMLCanvasElement} canvas
  762.   * @param {!HTMLImage} textSprite
  763.   * @param {!HTMLImage} restartImg
  764.   * @param {!Object} dimensions Canvas dimensions.
  765.   * @constructor
  766.   */
  767. function GameOverPanel(canvas, textSprite, restartImg, dimensions) {
  768. this.canvas = canvas;
  769. this.canvasCtx = canvas.getContext('2d');
  770. this.canvasDimensions = dimensions;
  771. this.textSprite = textSprite;
  772. this.restartImg = restartImg;
  773. this.draw();
  774. };
  775. /**
  776.   * Dimensions used in the panel.
  777.   * @enum {number}
  778.   */
  779. GameOverPanel.dimensions = {
  780. TEXT_X: 0,
  781. TEXT_Y: 13,
  782. TEXT_WIDTH: 191,
  783. TEXT_HEIGHT: 11,
  784. RESTART_WIDTH: 36,
  785. RESTART_HEIGHT: 32
  786. };
  787. GameOverPanel.prototype = {
  788. /**
  789.   * Update the panel dimensions.
  790.   * @param {number} width New canvas width.
  791.   * @param {number} opt_height Optional new canvas height.
  792.   */
  793. updateDimensions: function(width, opt_height) {
  794. this.canvasDimensions.WIDTH = width;
  795. if (opt_height) {
  796. this.canvasDimensions.HEIGHT = opt_height;
  797. }
  798. },
  799. /**
  800.   * Draw the panel.
  801.   */
  802. draw: function() {
  803. var dimensions = GameOverPanel.dimensions;
  804. var centerX = this.canvasDimensions.WIDTH / 2;
  805. // Game over text.
  806. var textSourceX = dimensions.TEXT_X;
  807. var textSourceY = dimensions.TEXT_Y;
  808. var textSourceWidth = dimensions.TEXT_WIDTH;
  809. var textSourceHeight = dimensions.TEXT_HEIGHT;
  810. var textTargetX = Math.round(centerX - (dimensions.TEXT_WIDTH / 2));
  811. var textTargetY = Math.round((this.canvasDimensions.HEIGHT - 25) / 3);
  812. var textTargetWidth = dimensions.TEXT_WIDTH;
  813. var textTargetHeight = dimensions.TEXT_HEIGHT;
  814. var restartSourceWidth = dimensions.RESTART_WIDTH;
  815. var restartSourceHeight = dimensions.RESTART_HEIGHT;
  816. var restartTargetX = centerX - (dimensions.RESTART_WIDTH / 2);
  817. var restartTargetY = this.canvasDimensions.HEIGHT / 2;
  818. if (IS_HIDPI) {
  819. textSourceY *= 2;
  820. textSourceX *= 2;
  821. textSourceWidth *= 2;
  822. textSourceHeight *= 2;
  823. restartSourceWidth *= 2;
  824. restartSourceHeight *= 2;
  825. }
  826. // Game over text from sprite.
  827. this.canvasCtx.drawImage(this.textSprite,
  828. textSourceX, textSourceY, textSourceWidth, textSourceHeight,
  829. textTargetX, textTargetY, textTargetWidth, textTargetHeight);
  830. // Restart button.
  831. this.canvasCtx.drawImage(this.restartImg, 0, 0,
  832. restartSourceWidth, restartSourceHeight,
  833. restartTargetX, restartTargetY, dimensions.RESTART_WIDTH,
  834. dimensions.RESTART_HEIGHT);
  835. }
  836. };
  837. //******************************************************************************
  838. /**
  839.   * Check for a collision.
  840.   * @param {!Obstacle} obstacle
  841.   * @param {!Trex} tRex T-rex object.
  842.   * @param {HTMLCanvasContext} opt_canvasCtx Optional canvas context for drawing
  843.   * collision boxes.
  844.   * @return {Array.<CollisionBox>}
  845.   */
  846. function checkForCollision(obstacle, tRex, opt_canvasCtx) {
  847. var obstacleBoxXPos = Runner.defaultDimensions.WIDTH + obstacle.xPos;
  848. // Adjustments are made to the bounding box as there is a 1 pixel white
  849. // border around the t-rex and obstacles.
  850. var tRexBox = new CollisionBox(
  851. tRex.xPos + 1,
  852. tRex.yPos + 1,
  853. tRex.config.WIDTH - 2,
  854. tRex.config.HEIGHT - 2);
  855. var obstacleBox = new CollisionBox(
  856. obstacle.xPos + 1,
  857. obstacle.yPos + 1,
  858. obstacle.typeConfig.width * obstacle.size - 2,
  859. obstacle.typeConfig.height - 2);
  860. // Debug outer box
  861. if (opt_canvasCtx) {
  862. drawCollisionBoxes(opt_canvasCtx, tRexBox, obstacleBox);
  863. }
  864. // Simple outer bounds check.
  865. if (boxCompare(tRexBox, obstacleBox)) {
  866. var collisionBoxes = obstacle.collisionBoxes;
  867. var tRexCollisionBoxes = Trex.collisionBoxes;
  868. // Detailed axis aligned box check.
  869. for (var t = 0; t < tRexCollisionBoxes.length; t++) {
  870. for (var i = 0; i < collisionBoxes.length; i++) {
  871. // Adjust the box to actual positions.
  872. var adjTrexBox =
  873. createAdjustedCollisionBox(tRexCollisionBoxes[t], tRexBox);
  874. var adjObstacleBox =
  875. createAdjustedCollisionBox(collisionBoxes[i], obstacleBox);
  876. var crashed = boxCompare(adjTrexBox, adjObstacleBox);
  877. // Draw boxes for debug.
  878. if (opt_canvasCtx) {
  879. drawCollisionBoxes(opt_canvasCtx, adjTrexBox, adjObstacleBox);
  880. }
  881. if (crashed) {
  882. return [adjTrexBox, adjObstacleBox];
  883. }
  884. }
  885. }
  886. }
  887. return false;
  888. };
  889. /**
  890.   * Adjust the collision box.
  891.   * @param {!CollisionBox} box The original box.
  892.   * @param {!CollisionBox} adjustment Adjustment box.
  893.   * @return {CollisionBox} The adjusted collision box object.
  894.   */
  895. function createAdjustedCollisionBox(box, adjustment) {
  896. return new CollisionBox(
  897. box.x + adjustment.x,
  898. box.y + adjustment.y,
  899. box.width,
  900. box.height);
  901. };
  902. /**
  903.   * Draw the collision boxes for debug.
  904.   */
  905. function drawCollisionBoxes(canvasCtx, tRexBox, obstacleBox) {
  906. canvasCtx.save();
  907. canvasCtx.strokeStyle = '#f00';
  908. canvasCtx.strokeRect(tRexBox.x, tRexBox.y,
  909. tRexBox.width, tRexBox.height);
  910. canvasCtx.strokeStyle = '#0f0';
  911. canvasCtx.strokeRect(obstacleBox.x, obstacleBox.y,
  912. obstacleBox.width, obstacleBox.height);
  913. canvasCtx.restore();
  914. };
  915. /**
  916.   * Compare two collision boxes for a collision.
  917.   * @param {CollisionBox} tRexBox
  918.   * @param {CollisionBox} obstacleBox
  919.   * @return {boolean} Whether the boxes intersected.
  920.   */
  921. function boxCompare(tRexBox, obstacleBox) {
  922. var crashed = false;
  923. var tRexBoxX = tRexBox.x;
  924. var tRexBoxY = tRexBox.y;
  925. var obstacleBoxX = obstacleBox.x;
  926. var obstacleBoxY = obstacleBox.y;
  927. // Axis-Aligned Bounding Box method.
  928. if (tRexBox.x < obstacleBoxX + obstacleBox.width &&
  929. tRexBox.x + tRexBox.width > obstacleBoxX &&
  930. tRexBox.y < obstacleBox.y + obstacleBox.height &&
  931. tRexBox.height + tRexBox.y > obstacleBox.y) {
  932. crashed = true;
  933. }
  934. return crashed;
  935. };
  936. //******************************************************************************
  937. /**
  938.   * Collision box object.
  939.   * @param {number} x X position.
  940.   * @param {number} y Y Position.
  941.   * @param {number} w Width.
  942.   * @param {number} h Height.
  943.   */
  944. function CollisionBox(x, y, w, h) {
  945. this.x = x;
  946. this.y = y;
  947. this.width = w;
  948. this.height = h;
  949. };
  950. //******************************************************************************
  951. /**
  952.   * Obstacle.
  953.   * @param {HTMLCanvasCtx} canvasCtx
  954.   * @param {Obstacle.type} type
  955.   * @param {image} obstacleImg Image sprite.
  956.   * @param {Object} dimensions
  957.   * @param {number} gapCoefficient Mutipler in determining the gap.
  958.   * @param {number} speed
  959.   */
  960. function Obstacle(canvasCtx, type, obstacleImg, dimensions,
  961. gapCoefficient, speed) {
  962. this.canvasCtx = canvasCtx;
  963. this.image = obstacleImg;
  964. this.typeConfig = type;
  965. this.gapCoefficient = gapCoefficient;
  966. this.size = getRandomNum(1, Obstacle.MAX_OBSTACLE_LENGTH);
  967. this.dimensions = dimensions;
  968. this.remove = false;
  969. this.xPos = 0;
  970. this.yPos = this.typeConfig.yPos;
  971. this.width = 0;
  972. this.collisionBoxes = [];
  973. this.gap = 0;
  974. this.init(speed);
  975. };
  976. /**
  977.   * Coefficient for calculating the maximum gap.
  978.   * @const
  979.   */
  980. Obstacle.MAX_GAP_COEFFICIENT = 1.5;
  981. /**
  982.   * Maximum obstacle grouping count.
  983.   * @const
  984.   */
  985. Obstacle.MAX_OBSTACLE_LENGTH = 3,
  986. Obstacle.prototype = {
  987. /**
  988.   * Initialise the DOM for the obstacle.
  989.   * @param {number} speed
  990.   */
  991. init: function(speed) {
  992. this.cloneCollisionBoxes();
  993. // Only allow sizing if we're at the right speed.
  994. if (this.size > 1 && this.typeConfig.multipleSpeed > speed) {
  995. this.size = 1;
  996. }
  997. this.width = this.typeConfig.width * this.size;
  998. this.xPos = this.dimensions.WIDTH - this.width;
  999. this.draw();
  1000. // Make collision box adjustments,
  1001. // Central box is adjusted to the size as one box.
  1002. // ____ ______ ________
  1003. // _| |-| _| |-| _| |-|
  1004. // | |<->| | | |<--->| | | |<----->| |
  1005. // | | 1 | | | | 2 | | | | 3 | |
  1006. // |_|___|_| |_|_____|_| |_|_______|_|
  1007. //
  1008. if (this.size > 1) {
  1009. this.collisionBoxes[1].width = this.width - this.collisionBoxes[0].width -
  1010. this.collisionBoxes[2].width;
  1011. this.collisionBoxes[2].x = this.width - this.collisionBoxes[2].width;
  1012. }
  1013. this.gap = this.getGap(this.gapCoefficient, speed);
  1014. },
  1015. /**
  1016.   * Draw and crop based on size.
  1017.   */
  1018. draw: function() {
  1019. var sourceWidth = this.typeConfig.width;
  1020. var sourceHeight = this.typeConfig.height;
  1021. if (IS_HIDPI) {
  1022. sourceWidth = sourceWidth * 2;
  1023. sourceHeight = sourceHeight * 2;
  1024. }
  1025. // Sprite
  1026. var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1));
  1027. this.canvasCtx.drawImage(this.image,
  1028. sourceX, 0,
  1029. sourceWidth * this.size, sourceHeight,
  1030. this.xPos, this.yPos,
  1031. this.typeConfig.width * this.size, this.typeConfig.height);
  1032. },
  1033. /**
  1034.   * Obstacle frame update.
  1035.   * @param {number} deltaTime
  1036.   * @param {number} speed
  1037.   */
  1038. update: function(deltaTime, speed) {
  1039. if (!this.remove) {
  1040. this.xPos -= Math.floor((speed * FPS / 1000) * deltaTime);
  1041. this.draw();
  1042. if (!this.isVisible()) {
  1043. this.remove = true;
  1044. }
  1045. }
  1046. },
  1047. /**
  1048.   * Calculate a random gap size.
  1049.   * - Minimum gap gets wider as speed increses
  1050.   * @param {number} gapCoefficient
  1051.   * @param {number} speed
  1052.   * @return {number} The gap size.
  1053.   */
  1054. getGap: function(gapCoefficient, speed) {
  1055. var minGap = Math.round(this.width * speed +
  1056. this.typeConfig.minGap * gapCoefficient);
  1057. var maxGap = Math.round(minGap * Obstacle.MAX_GAP_COEFFICIENT);
  1058. return getRandomNum(minGap, maxGap);
  1059. },
  1060. /**
  1061.   * Check if obstacle is visible.
  1062.   * @return {boolean} Whether the obstacle is in the game area.
  1063.   */
  1064. isVisible: function() {
  1065. return this.xPos + this.width > 0;
  1066. },
  1067. /**
  1068.   * Make a copy of the collision boxes, since these will change based on
  1069.   * obstacle type and size.
  1070.   */
  1071. cloneCollisionBoxes: function() {
  1072. var collisionBoxes = this.typeConfig.collisionBoxes;
  1073. for (var i = collisionBoxes.length - 1; i >= 0; i--) {
  1074. this.collisionBoxes[i] = new CollisionBox(collisionBoxes[i].x,
  1075. collisionBoxes[i].y, collisionBoxes[i].width,
  1076. collisionBoxes[i].height);
  1077. }
  1078. }
  1079. };
  1080. /**
  1081.   * Obstacle definitions.
  1082.   * minGap: minimum pixel space betweeen obstacles.
  1083.   * multipleSpeed: Speed at which multiples are allowed.
  1084.   */
  1085. Obstacle.types = [
  1086. {
  1087. type: 'CACTUS_SMALL',
  1088. className: ' cactus cactus-small ',
  1089. width: 17,
  1090. height: 35,
  1091. yPos: 105,
  1092. multipleSpeed: 3,
  1093. minGap: 120,
  1094. collisionBoxes: [
  1095. new CollisionBox(0, 7, 5, 27),
  1096. new CollisionBox(4, 0, 6, 34),
  1097. new CollisionBox(10, 4, 7, 14)
  1098. ]
  1099. },
  1100. {
  1101. type: 'CACTUS_LARGE',
  1102. className: ' cactus cactus-large ',
  1103. width: 25,
  1104. height: 50,
  1105. yPos: 90,
  1106. multipleSpeed: 6,
  1107. minGap: 120,
  1108. collisionBoxes: [
  1109. new CollisionBox(0, 12, 7, 38),
  1110. new CollisionBox(8, 0, 7, 49),
  1111. new CollisionBox(13, 10, 10, 38)
  1112. ]
  1113. }
  1114. ];
  1115. //******************************************************************************
  1116. /**
  1117.   * T-rex game character.
  1118.   * @param {HTMLCanvas} canvas
  1119.   * @param {HTMLImage} image Character image.
  1120.   * @constructor
  1121.   */
  1122. function Trex(canvas, image) {
  1123. this.canvas = canvas;
  1124. this.canvasCtx = canvas.getContext('2d');
  1125. this.image = image;
  1126. this.xPos = 0;
  1127. this.yPos = 0;
  1128. // Position when on the ground.
  1129. this.groundYPos = 0;
  1130. this.currentFrame = 0;
  1131. this.currentAnimFrames = [];
  1132. this.blinkDelay = 0;
  1133. this.animStartTime = 0;
  1134. this.timer = 0;
  1135. this.msPerFrame = 1000 / FPS;
  1136. this.config = Trex.config;
  1137. // Current status.
  1138. this.status = Trex.status.WAITING;
  1139. this.jumping = false;
  1140. this.jumpVelocity = 0;
  1141. this.reachedMinHeight = false;
  1142. this.speedDrop = false;
  1143. this.jumpCount = 0;
  1144. this.jumpspotX = 0;
  1145. this.init();
  1146. };
  1147. /**
  1148.   * T-rex player config.
  1149.   * @enum {number}
  1150.   */
  1151. Trex.config = {
  1152. DROP_VELOCITY: -5,
  1153. GRAVITY: 0.6,
  1154. HEIGHT: 47,
  1155. INIITAL_JUMP_VELOCITY: -10,
  1156. INTRO_DURATION: 1500,
  1157. MAX_JUMP_HEIGHT: 30,
  1158. MIN_JUMP_HEIGHT: 30,
  1159. SPEED_DROP_COEFFICIENT: 3,
  1160. SPRITE_WIDTH: 262,
  1161. START_X_POS: 50,
  1162. WIDTH: 44
  1163. };
  1164. /**
  1165.   * Used in collision detection.
  1166.   * @type {Array.<CollisionBox>}
  1167.   */
  1168. Trex.collisionBoxes = [
  1169. new CollisionBox(1, -1, 30, 26),
  1170. new CollisionBox(32, 0, 8, 16),
  1171. new CollisionBox(10, 35, 14, 8),
  1172. new CollisionBox(1, 24, 29, 5),
  1173. new CollisionBox(5, 30, 21, 4),
  1174. new CollisionBox(9, 34, 15, 4)
  1175. ];
  1176. /**
  1177.   * Animation states.
  1178.   * @enum {string}
  1179.   */
  1180. Trex.status = {
  1181. CRASHED: 'CRASHED',
  1182. JUMPING: 'JUMPING',
  1183. RUNNING: 'RUNNING',
  1184. WAITING: 'WAITING'
  1185. };
  1186. /**
  1187.   * Blinking coefficient.
  1188.   * @const
  1189.   */
  1190. Trex.BLINK_TIMING = 7000;
  1191. /**
  1192.   * Animation config for different states.
  1193.   * @enum {object}
  1194.   */
  1195. Trex.animFrames = {
  1196. WAITING: {
  1197. frames: [44, 0],
  1198. msPerFrame: 1000 / 3
  1199. },
  1200. RUNNING: {
  1201. frames: [88, 132],
  1202. msPerFrame: 1000 / 12
  1203. },
  1204. CRASHED: {
  1205. frames: [220],
  1206. msPerFrame: 1000 / 60
  1207. },
  1208. JUMPING: {
  1209. frames: [0],
  1210. msPerFrame: 1000 / 60
  1211. }
  1212. };
  1213. Trex.prototype = {
  1214. /**
  1215.   * T-rex player initaliser.
  1216.   * Sets the t-rex to blink at random intervals.
  1217.   */
  1218. init: function() {
  1219. this.blinkDelay = this.setBlinkDelay();
  1220. this.groundYPos = Runner.defaultDimensions.HEIGHT - this.config.HEIGHT -
  1221. Runner.config.BOTTOM_PAD;
  1222. this.yPos = this.groundYPos;
  1223. this.minJumpHeight = this.groundYPos - this.config.MIN_JUMP_HEIGHT;
  1224. this.draw(0, 0);
  1225. this.update(0, Trex.status.WAITING);
  1226. },
  1227. /**
  1228.   * Setter for the jump velocity.
  1229.   * The approriate drop velocity is also set.
  1230.   */
  1231. setJumpVelocity: function(setting) {
  1232. this.config.INIITAL_JUMP_VELOCITY = -setting;
  1233. this.config.DROP_VELOCITY = -setting / 2;
  1234. },
  1235. /**
  1236.   * Set the animation status.
  1237.   * @param {!number} deltaTime
  1238.   * @param {Trex.status} status Optional status to switch to.
  1239.   */
  1240. update: function(deltaTime, opt_status) {
  1241. this.timer += deltaTime;
  1242. // Update the status.
  1243. if (opt_status) {
  1244. this.status = opt_status;
  1245. this.currentFrame = 0;
  1246. this.msPerFrame = Trex.animFrames[opt_status].msPerFrame;
  1247. this.currentAnimFrames = Trex.animFrames[opt_status].frames;
  1248. if (opt_status == Trex.status.WAITING) {
  1249. this.animStartTime = getTimeStamp();
  1250. this.setBlinkDelay();
  1251. }
  1252. }
  1253. // Game intro animation, T-rex moves in from the left.
  1254. if (this.playingIntro && this.xPos < this.config.START_X_POS) {
  1255. this.xPos += Math.round((this.config.START_X_POS /
  1256. this.config.INTRO_DURATION) * deltaTime);
  1257. }
  1258. if (this.status == Trex.status.WAITING) {
  1259. this.blink(getTimeStamp());
  1260. } else {
  1261. this.draw(this.currentAnimFrames[this.currentFrame], 0);
  1262. }
  1263. // Update the frame position.
  1264. if (this.timer >= this.msPerFrame) {
  1265. this.currentFrame = this.currentFrame ==
  1266. this.currentAnimFrames.length - 1 ? 0 : this.currentFrame + 1;
  1267. this.timer = 0;
  1268. }
  1269. },
  1270. /**
  1271.   * Draw the t-rex to a particular position.
  1272.   * @param {number} x
  1273.   * @param {number} y
  1274.   */
  1275. draw: function(x, y) {
  1276. var sourceX = x;
  1277. var sourceY = y;
  1278. var sourceWidth = this.config.WIDTH;
  1279. var sourceHeight = this.config.HEIGHT;
  1280. if (IS_HIDPI) {
  1281. sourceX *= 2;
  1282. sourceY *= 2;
  1283. sourceWidth *= 2;
  1284. sourceHeight *= 2;
  1285. }
  1286. this.canvasCtx.drawImage(this.image, sourceX, sourceY,
  1287. sourceWidth, sourceHeight,
  1288. this.xPos, this.yPos,
  1289. this.config.WIDTH, this.config.HEIGHT);
  1290. },
  1291. /**
  1292.   * Sets a random time for the blink to happen.
  1293.   */
  1294. setBlinkDelay: function() {
  1295. this.blinkDelay = Math.ceil(Math.random() * Trex.BLINK_TIMING);
  1296. },
  1297. /**
  1298.   * Make t-rex blink at random intervals.
  1299.   * @param {number} time Current time in milliseconds.
  1300.   */
  1301. blink: function(time) {
  1302. var deltaTime = time - this.animStartTime;
  1303. if (deltaTime >= this.blinkDelay) {
  1304. this.draw(this.currentAnimFrames[this.currentFrame], 0);
  1305. if (this.currentFrame == 1) {
  1306. // Set new random delay to blink.
  1307. this.setBlinkDelay();
  1308. this.animStartTime = time;
  1309. }
  1310. }
  1311. },
  1312. /**
  1313.   * Initialise a jump.
  1314.   */
  1315. startJump: function() {
  1316. if (!this.jumping) {
  1317. this.update(0, Trex.status.JUMPING);
  1318. this.jumpVelocity = this.config.INIITAL_JUMP_VELOCITY;
  1319. this.jumping = true;
  1320. this.reachedMinHeight = false;
  1321. this.speedDrop = false;
  1322. }
  1323. },
  1324. /**
  1325.   * Jump is complete, falling down.
  1326.   */
  1327. endJump: function() {
  1328. if (this.reachedMinHeight &&
  1329. this.jumpVelocity < this.config.DROP_VELOCITY) {
  1330. this.jumpVelocity = this.config.DROP_VELOCITY;
  1331. }
  1332. },
  1333. /**
  1334.   * Update frame for a jump.
  1335.   * @param {number} deltaTime
  1336.   */
  1337. updateJump: function(deltaTime) {
  1338. var msPerFrame = Trex.animFrames[this.status].msPerFrame;
  1339. var framesElapsed = deltaTime / msPerFrame;
  1340. // Speed drop makes Trex fall faster.
  1341. if (this.speedDrop) {
  1342. this.yPos += Math.round(this.jumpVelocity *
  1343. this.config.SPEED_DROP_COEFFICIENT * framesElapsed);
  1344. } else {
  1345. this.yPos += Math.round(this.jumpVelocity * framesElapsed);
  1346. }
  1347. this.jumpVelocity += this.config.GRAVITY * framesElapsed;
  1348. // Minimum height has been reached.
  1349. if (this.yPos < this.minJumpHeight || this.speedDrop) {
  1350. this.reachedMinHeight = true;
  1351. }
  1352. // Reached max height
  1353. if (this.yPos < this.config.MAX_JUMP_HEIGHT || this.speedDrop) {
  1354. this.endJump();
  1355. }
  1356. // Back down at ground level. Jump completed.
  1357. if (this.yPos > this.groundYPos) {
  1358. this.reset();
  1359. this.jumpCount++;
  1360. }
  1361. this.update(deltaTime);
  1362. },
  1363. /**
  1364.   * Set the speed drop. Immediately cancels the current jump.
  1365.   */
  1366. setSpeedDrop: function() {
  1367. this.speedDrop = true;
  1368. this.jumpVelocity = 1;
  1369. },
  1370. /**
  1371.   * Reset the t-rex to running at start of game.
  1372.   */
  1373. reset: function() {
  1374. this.yPos = this.groundYPos;
  1375. this.jumpVelocity = 0;
  1376. this.jumping = false;
  1377. this.update(0, Trex.status.RUNNING);
  1378. this.midair = false;
  1379. this.speedDrop = false;
  1380. this.jumpCount = 0;
  1381. }
  1382. };
  1383. //******************************************************************************
  1384. /**
  1385.   * Handles displaying the distance meter.
  1386.   * @param {!HTMLCanvasElement} canvas
  1387.   * @param {!HTMLImage} spriteSheet Image sprite.
  1388.   * @param {number} canvasWidth
  1389.   * @constructor
  1390.   */
  1391. function DistanceMeter(canvas, spriteSheet, canvasWidth) {
  1392. this.canvas = canvas;
  1393. this.canvasCtx = canvas.getContext('2d');
  1394. this.image = spriteSheet;
  1395. this.x = 0;
  1396. this.y = 5;
  1397. this.currentDistance = 0;
  1398. this.maxScore = 0;
  1399. this.highScore = 0;
  1400. this.container = null;
  1401. this.digits = [];
  1402. this.acheivement = false;
  1403. this.defaultString = '';
  1404. this.flashTimer = 0;
  1405. this.flashIterations = 0;
  1406. this.config = DistanceMeter.config;
  1407. this.init(canvasWidth);
  1408. };
  1409. /**
  1410.   * @enum {number}
  1411.   */
  1412. DistanceMeter.dimensions = {
  1413. WIDTH: 10,
  1414. HEIGHT: 13,
  1415. DEST_WIDTH: 11
  1416. };
  1417. /**
  1418.   * Y positioning of the digits in the sprite sheet.
  1419.   * X position is always 0.
  1420.   * @type {array.<number>}
  1421.   */
  1422. DistanceMeter.yPos = [0, 13, 27, 40, 53, 67, 80, 93, 107, 120];
  1423. /**
  1424.   * Distance meter config.
  1425.   * @enum {number}
  1426.   */
  1427. DistanceMeter.config = {
  1428. // Number of digits.
  1429. MAX_DISTANCE_UNITS: 5,
  1430. // Distance that causes achievement animation.
  1431. ACHIEVEMENT_DISTANCE: 100,
  1432. // Used for conversion from pixel distance to a scaled unit.
  1433. COEFFICIENT: 0.025,
  1434. // Flash duration in milliseconds.
  1435. FLASH_DURATION: 1000 / 4,
  1436. // Flash iterations for achievement animation.
  1437. FLASH_ITERATIONS: 3
  1438. };
  1439. DistanceMeter.prototype = {
  1440. /**
  1441.   * Initialise the distance meter to '00000'.
  1442.   * @param {number} width Canvas width in px.
  1443.   */
  1444. init: function(width) {
  1445. var maxDistanceStr = '';
  1446. this.calcXPos(width);
  1447. this.maxScore = this.config.MAX_DISTANCE_UNITS;
  1448. for (var i = 0; i < this.config.MAX_DISTANCE_UNITS; i++) {
  1449. this.draw(i, 0);
  1450. this.defaultString += '0';
  1451. maxDistanceStr += '9';
  1452. }
  1453. this.maxScore = parseInt(maxDistanceStr);
  1454. },
  1455. /**
  1456.   * Calculate the xPos in the canvas.
  1457.   * @param {number} canvasWidth
  1458.   */
  1459. calcXPos: function(canvasWidth) {
  1460. this.x = canvasWidth - (DistanceMeter.dimensions.DEST_WIDTH *
  1461. (this.config.MAX_DISTANCE_UNITS + 1));
  1462. },
  1463. /**
  1464.   * Draw a digit to canvas.
  1465.   * @param {number} digitPos Position of the digit.
  1466.   * @param {number} value Digit value 0-9.
  1467.   * @param {boolean} opt_highScore Whether drawing the high score.
  1468.   */
  1469. draw: function(digitPos, value, opt_highScore) {
  1470. var sourceWidth = DistanceMeter.dimensions.WIDTH;
  1471. var sourceHeight = DistanceMeter.dimensions.HEIGHT;
  1472. var sourceX = DistanceMeter.dimensions.WIDTH * value;
  1473. var targetX = digitPos * DistanceMeter.dimensions.DEST_WIDTH;
  1474. var targetY = this.y;
  1475. var targetWidth = DistanceMeter.dimensions.WIDTH;
  1476. var targetHeight = DistanceMeter.dimensions.HEIGHT;
  1477. // For high DPI we 2x source values.
  1478. if (IS_HIDPI) {
  1479. sourceWidth *= 2;
  1480. sourceHeight *= 2;
  1481. sourceX *= 2;
  1482. }
  1483. this.canvasCtx.save();
  1484. if (opt_highScore) {
  1485. // Left of the current score.
  1486. var highScoreX = this.x - (this.config.MAX_DISTANCE_UNITS * 2) *
  1487. DistanceMeter.dimensions.WIDTH;
  1488. this.canvasCtx.translate(highScoreX, this.y);
  1489. } else {
  1490. this.canvasCtx.translate(this.x, this.y);
  1491. }
  1492. this.canvasCtx.drawImage(this.image, sourceX, 0,
  1493. sourceWidth, sourceHeight,
  1494. targetX, targetY,
  1495. targetWidth, targetHeight
  1496. );
  1497. this.canvasCtx.restore();
  1498. },
  1499. /**
  1500.   * Covert pixel distance to a 'real' distance.
  1501.   * @param {number} distance Pixel distance ran.
  1502.   * @return {number} The 'real' distance ran.
  1503.   */
  1504. getActualDistance: function(distance) {
  1505. return distance ?
  1506. Math.round(distance * this.config.COEFFICIENT) : 0;
  1507. },
  1508. /**
  1509.   * Update the distance meter.
  1510.   * @param {number} deltaTime
  1511.   * @param {number} distance
  1512.   * @return {boolean} Whether the acheivement sound fx should be played.
  1513.   */
  1514. update: function(deltaTime, distance) {
  1515. var paint = true;
  1516. var playSound = false;
  1517. if (!this.acheivement) {
  1518. distance = this.getActualDistance(distance);
  1519. if (distance > 0) {
  1520. // Acheivement unlocked
  1521. if (distance % this.config.ACHIEVEMENT_DISTANCE == 0) {
  1522. // Flash score and play sound.
  1523. this.acheivement = true;
  1524. this.flashTimer = 0;
  1525. playSound = true;
  1526. }
  1527. // Create a string representation of the distance with leading 0.
  1528. var distanceStr = (this.defaultString +
  1529. distance).substr(-this.config.MAX_DISTANCE_UNITS);
  1530. this.digits = distanceStr.split('');
  1531. } else {
  1532. this.digits = this.defaultString.split('');
  1533. }
  1534. } else {
  1535. // Control flashing of the score on reaching acheivement.
  1536. if (this.flashIterations <= this.config.FLASH_ITERATIONS) {
  1537. this.flashTimer += deltaTime;
  1538. if (this.flashTimer < this.config.FLASH_DURATION) {
  1539. paint = false;
  1540. } else if (this.flashTimer >
  1541. this.config.FLASH_DURATION * 2) {
  1542. this.flashTimer = 0;
  1543. this.flashIterations++;
  1544. }
  1545. } else {
  1546. this.acheivement = false;
  1547. this.flashIterations = 0;
  1548. this.flashTimer = 0;
  1549. }
  1550. }
  1551. // Draw the digits if not flashing.
  1552. if (paint) {
  1553. for (var i = this.digits.length - 1; i >= 0; i--) {
  1554. this.draw(i, parseInt(this.digits[i]));
  1555. }
  1556. }
  1557. this.drawHighScore();
  1558. return playSound;
  1559. },
  1560. /**
  1561.   * Draw the high score.
  1562.   */
  1563. drawHighScore: function() {
  1564. this.canvasCtx.save();
  1565. this.canvasCtx.globalAlpha = .8;
  1566. for (var i = this.highScore.length - 1; i >= 0; i--) {
  1567. this.draw(i, parseInt(this.highScore[i], 10), true);
  1568. }
  1569. this.canvasCtx.restore();
  1570. },
  1571. /**
  1572.   * Set the highscore as a array string.
  1573.   * Position of char in the sprite: H - 10, I - 11.
  1574.   * @param {number} distance Distance ran in pixels.
  1575.   */
  1576. setHighScore: function(distance) {
  1577. distance = this.getActualDistance(distance);
  1578. var highScoreStr = (this.defaultString +
  1579. distance).substr(-this.config.MAX_DISTANCE_UNITS);
  1580. this.highScore = ['10', '11', ''].concat(highScoreStr.split(''));
  1581. },
  1582. /**
  1583.   * Reset the distance meter back to '00000'.
  1584.   */
  1585. reset: function() {
  1586. this.update(0);
  1587. this.acheivement = false;
  1588. }
  1589. };
  1590. //******************************************************************************
  1591. /**
  1592.   * Cloud background item.
  1593.   * Similar to an obstacle object but without collision boxes.
  1594.   * @param {HTMLCanvasElement} canvas Canvas element.
  1595.   * @param {Image} cloudImg
  1596.   * @param {number} containerWidth
  1597.   */
  1598. function Cloud(canvas, cloudImg, containerWidth) {
  1599. this.canvas = canvas;
  1600. this.canvasCtx = this.canvas.getContext('2d');
  1601. this.image = cloudImg;
  1602. this.containerWidth = containerWidth;
  1603. this.xPos = containerWidth;
  1604. this.yPos = 0;
  1605. this.remove = false;
  1606. this.cloudGap = getRandomNum(Cloud.config.MIN_CLOUD_GAP,
  1607. Cloud.config.MAX_CLOUD_GAP);
  1608. this.init();
  1609. };
  1610. /**
  1611.   * Cloud object config.
  1612.   * @enum {number}
  1613.   */
  1614. Cloud.config = {
  1615. HEIGHT: 14,
  1616. MAX_CLOUD_GAP: 400,
  1617. MAX_SKY_LEVEL: 30,
  1618. MIN_CLOUD_GAP: 100,
  1619. MIN_SKY_LEVEL: 71,
  1620. WIDTH: 46
  1621. };
  1622. Cloud.prototype = {
  1623. /**
  1624.   * Initialise the cloud. Sets the Cloud height.
  1625.   */
  1626. init: function() {
  1627. this.yPos = getRandomNum(Cloud.config.MAX_SKY_LEVEL,
  1628. Cloud.config.MIN_SKY_LEVEL);
  1629. this.draw();
  1630. },
  1631. /**
  1632.   * Draw the cloud.
  1633.   */
  1634. draw: function() {
  1635. this.canvasCtx.save();
  1636. var sourceWidth = Cloud.config.WIDTH;
  1637. var sourceHeight = Cloud.config.HEIGHT;
  1638. if (IS_HIDPI) {
  1639. sourceWidth = sourceWidth * 2;
  1640. sourceHeight = sourceHeight * 2;
  1641. }
  1642. this.canvasCtx.drawImage(this.image, 0, 0,
  1643. sourceWidth, sourceHeight,
  1644. this.xPos, this.yPos,
  1645. Cloud.config.WIDTH, Cloud.config.HEIGHT);
  1646. this.canvasCtx.restore();
  1647. },
  1648. /**
  1649.   * Update the cloud position.
  1650.   * @param {number} speed
  1651.   */
  1652. update: function(speed) {
  1653. if (!this.remove) {
  1654. this.xPos -= Math.ceil(speed);
  1655. this.draw();
  1656. // Mark as removeable if no longer in the canvas.
  1657. if (!this.isVisible()) {
  1658. this.remove = true;
  1659. }
  1660. }
  1661. },
  1662. /**
  1663.   * Check if the cloud is visible on the stage.
  1664.   * @return {boolean}
  1665.   */
  1666. isVisible: function() {
  1667. return this.xPos + Cloud.config.WIDTH > 0;
  1668. }
  1669. };
  1670. //******************************************************************************
  1671. /**
  1672.   * Horizon Line.
  1673.   * Consists of two connecting lines. Randomly assigns a flat / bumpy horizon.
  1674.   * @param {HTMLCanvasElement} canvas
  1675.   * @param {HTMLImage} bgImg Horizon line sprite.
  1676.   * @constructor
  1677.   */
  1678. function HorizonLine(canvas, bgImg) {
  1679. this.image = bgImg;
  1680. this.canvas = canvas;
  1681. this.canvasCtx = canvas.getContext('2d');
  1682. this.sourceDimensions = {};
  1683. this.dimensions = HorizonLine.dimensions;
  1684. this.sourceXPos = [0, this.dimensions.WIDTH];
  1685. this.xPos = [];
  1686. this.yPos = 0;
  1687. this.bumpThreshold = 0.5;
  1688. this.setSourceDimensions();
  1689. this.draw();
  1690. };
  1691. /**
  1692.   * Horizon line dimensions.
  1693.   * @enum {number}
  1694.   */
  1695. HorizonLine.dimensions = {
  1696. WIDTH: 600,
  1697. HEIGHT: 12,
  1698. YPOS: 127
  1699. };
  1700. HorizonLine.prototype = {
  1701. /**
  1702.   * Set the source dimensions of the horizon line.
  1703.   */
  1704. setSourceDimensions: function() {
  1705. for (var dimension in HorizonLine.dimensions) {
  1706. if (IS_HIDPI) {
  1707. if (dimension != 'YPOS') {
  1708. this.sourceDimensions[dimension] =
  1709. HorizonLine.dimensions[dimension] * 2;
  1710. }
  1711. } else {
  1712. this.sourceDimensions[dimension] =
  1713. HorizonLine.dimensions[dimension];
  1714. }
  1715. this.dimensions[dimension] = HorizonLine.dimensions[dimension];
  1716. }
  1717. this.xPos = [0, HorizonLine.dimensions.WIDTH];
  1718. this.yPos = HorizonLine.dimensions.YPOS;
  1719. },
  1720. /**
  1721.   * Return the crop x position of a type.
  1722.   */
  1723. getRandomType: function() {
  1724. return Math.random() > this.bumpThreshold ? this.dimensions.WIDTH : 0;
  1725. },
  1726. /**
  1727.   * Draw the horizon line.
  1728.   */
  1729. draw: function() {
  1730. this.canvasCtx.drawImage(this.image, this.sourceXPos[0], 0,
  1731. this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,
  1732. this.xPos[0], this.yPos,
  1733. this.dimensions.WIDTH, this.dimensions.HEIGHT);
  1734. this.canvasCtx.drawImage(this.image, this.sourceXPos[1], 0,
  1735. this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,
  1736. this.xPos[1], this.yPos,
  1737. this.dimensions.WIDTH, this.dimensions.HEIGHT);
  1738. },
  1739. /**
  1740.   * Update the x position of an indivdual piece of the line.
  1741.   * @param {number} pos Line position.
  1742.   * @param {number} increment
  1743.   */
  1744. updateXPos: function(pos, increment) {
  1745. var line1 = pos;
  1746. var line2 = pos == 0 ? 1 : 0;
  1747. this.xPos[line1] -= increment;
  1748. this.xPos[line2] = this.xPos[line1] + this.dimensions.WIDTH;
  1749. if (this.xPos[line1] <= -this.dimensions.WIDTH) {
  1750. this.xPos[line1] += this.dimensions.WIDTH * 2;
  1751. this.xPos[line2] = this.xPos[line1] - this.dimensions.WIDTH;
  1752. this.sourceXPos[line1] = this.getRandomType();
  1753. }
  1754. },
  1755. /**
  1756.   * Update the horizon line.
  1757.   * @param {number} deltaTime
  1758.   * @param {number} speed
  1759.   */
  1760. update: function(deltaTime, speed) {
  1761. var increment = Math.floor(speed * (FPS / 1000) * deltaTime);
  1762. if (this.xPos[0] <= 0) {
  1763. this.updateXPos(0, increment);
  1764. } else {
  1765. this.updateXPos(1, increment);
  1766. }
  1767. this.draw();
  1768. },
  1769. /**
  1770.   * Reset horizon to the starting position.
  1771.   */
  1772. reset: function() {
  1773. this.xPos[0] = 0;
  1774. this.xPos[1] = HorizonLine.dimensions.WIDTH;
  1775. }
  1776. };
  1777. //******************************************************************************
  1778. /**
  1779.   * Horizon background class.
  1780.   * @param {HTMLCanvasElement} canvas
  1781.   * @param {Array.<HTMLImageElement>} images
  1782.   * @param {object} dimensions Canvas dimensions.
  1783.   * @param {number} gapCoefficient
  1784.   * @constructor
  1785.   */
  1786. function Horizon(canvas, images, dimensions, gapCoefficient) {
  1787. this.canvas = canvas;
  1788. this.canvasCtx = this.canvas.getContext('2d');
  1789. this.config = Horizon.config;
  1790. this.dimensions = dimensions;
  1791. this.gapCoefficient = gapCoefficient;
  1792. this.obstacles = [];
  1793. this.horizonOffsets = [0, 0];
  1794. this.cloudFrequency = this.config.CLOUD_FREQUENCY;
  1795. // Cloud
  1796. this.clouds = [];
  1797. this.cloudImg = images.CLOUD;
  1798. this.cloudSpeed = this.config.BG_CLOUD_SPEED;
  1799. // Horizon
  1800. this.horizonImg = images.HORIZON;
  1801. this.horizonLine = null;
  1802. // Obstacles
  1803. this.obstacleImgs = {
  1804. CACTUS_SMALL: images.CACTUS_SMALL,
  1805. CACTUS_LARGE: images.CACTUS_LARGE
  1806. };
  1807. this.init();
  1808. };
  1809. /**
  1810.   * Horizon config.
  1811.   * @enum {number}
  1812.   */
  1813. Horizon.config = {
  1814. BG_CLOUD_SPEED: 0.2,
  1815. BUMPY_THRESHOLD: .3,
  1816. CLOUD_FREQUENCY: .5,
  1817. HORIZON_HEIGHT: 16,
  1818. MAX_CLOUDS: 6
  1819. };
  1820. Horizon.prototype = {
  1821. /**
  1822.   * Initialise the horizon. Just add the line and a cloud. No obstacles.
  1823.   */
  1824. init: function() {
  1825. this.addCloud();
  1826. this.horizonLine = new HorizonLine(this.canvas, this.horizonImg);
  1827. },
  1828. /**
  1829.   * @param {number} deltaTime
  1830.   * @param {number} currentSpeed
  1831.   * @param {boolean} updateObstacles Used as an override to prevent
  1832.   * the obstacles from being updated / added. This happens in the
  1833.   * ease in section.
  1834.   */
  1835. update: function(deltaTime, currentSpeed, updateObstacles) {
  1836. this.runningTime += deltaTime;
  1837. this.horizonLine.update(deltaTime, currentSpeed);
  1838. this.updateClouds(deltaTime, currentSpeed);
  1839. if (updateObstacles) {
  1840. this.updateObstacles(deltaTime, currentSpeed);
  1841. }
  1842. },
  1843. /**
  1844.   * Update the cloud positions.
  1845.   * @param {number} deltaTime
  1846.   * @param {number} currentSpeed
  1847.   */
  1848. updateClouds: function(deltaTime, speed) {
  1849. var cloudSpeed = this.cloudSpeed / 1000 * deltaTime * speed;
  1850. var numClouds = this.clouds.length;
  1851. if (numClouds) {
  1852. for (var i = numClouds - 1; i >= 0; i--) {
  1853. this.clouds[i].update(cloudSpeed);
  1854. }
  1855. var lastCloud = this.clouds[numClouds - 1];
  1856. // Check for adding a new cloud.
  1857. if (numClouds < this.config.MAX_CLOUDS &&
  1858. (this.dimensions.WIDTH - lastCloud.xPos) > lastCloud.cloudGap &&
  1859. this.cloudFrequency > Math.random()) {
  1860. this.addCloud();
  1861. }
  1862. // Remove expired clouds.
  1863. this.clouds = this.clouds.filter(function(obj) {
  1864. return !obj.remove;
  1865. });
  1866. }
  1867. },
  1868. /**
  1869.   * Update the obstacle positions.
  1870.   * @param {number} deltaTime
  1871.   * @param {number} currentSpeed
  1872.   */
  1873. updateObstacles: function(deltaTime, currentSpeed) {
  1874. // Obstacles, move to Horizon layer.
  1875. var updatedObstacles = this.obstacles.slice(0);
  1876. for (var i = 0; i < this.obstacles.length; i++) {
  1877. var obstacle = this.obstacles[i];
  1878. obstacle.update(deltaTime, currentSpeed);
  1879. // Clean up existing obstacles.
  1880. if (obstacle.remove) {
  1881. updatedObstacles.shift();
  1882. }
  1883. }
  1884. this.obstacles = updatedObstacles;
  1885. if (this.obstacles.length > 0) {
  1886. var lastObstacle = this.obstacles[this.obstacles.length - 1];
  1887. if (lastObstacle && !lastObstacle.followingObstacleCreated &&
  1888. lastObstacle.isVisible() &&
  1889. (lastObstacle.xPos + lastObstacle.width + lastObstacle.gap) <
  1890. this.dimensions.WIDTH) {
  1891. this.addNewObstacle(currentSpeed);
  1892. lastObstacle.followingObstacleCreated = true;
  1893. }
  1894. } else {
  1895. // Create new obstacles.
  1896. this.addNewObstacle(currentSpeed);
  1897. }
  1898. },
  1899. /**
  1900.   * Add a new obstacle.
  1901.   * @param {number} currentSpeed
  1902.   */
  1903. addNewObstacle: function(currentSpeed) {
  1904. var obstacleTypeIndex =
  1905. getRandomNum(0, Obstacle.types.length - 1);
  1906. var obstacleType = Obstacle.types[obstacleTypeIndex];
  1907. var obstacleImg = this.obstacleImgs[obstacleType.type];
  1908. this.obstacles.push(new Obstacle(this.canvasCtx, obstacleType,
  1909. obstacleImg, this.dimensions, this.gapCoefficient, currentSpeed));
  1910. },
  1911. /**
  1912.   * Reset the horizon layer.
  1913.   * Remove existing obstacles and reposition the horizon line.
  1914.   */
  1915. reset: function() {
  1916. this.obstacles = [];
  1917. this.horizonLine.reset();
  1918. },
  1919. /**
  1920.   * Update the canvas width and scaling.
  1921.   * @param {number} width Canvas width.
  1922.   * @param {number} height Canvas height.
  1923.   */
  1924. resize: function(width, height) {
  1925. this.canvas.width = width;
  1926. this.canvas.height = height;
  1927. },
  1928. /**
  1929.   * Add a new cloud to the horizon.
  1930.   */
  1931. addCloud: function() {
  1932. this.clouds.push(new Cloud(this.canvas, this.cloudImg,
  1933. this.dimensions.WIDTH));
  1934. }
  1935. };
  1936. })();
  1937.  
  1938.  
  1939. </script>
  1940.  
  1941.  
  1942. <style>/* Copyright 2014 The Chromium Authors. All rights reserved.
  1943.   Use of this source code is governed by a BSD-style license that can be
  1944.   found in the LICENSE file. */
  1945.  
  1946. a {
  1947. color: #585858;
  1948. }
  1949.  
  1950. body {
  1951. background-color: #f7f7f7;
  1952. color: #585858;
  1953. font-size: 125%;
  1954. }
  1955.  
  1956. body.safe-browsing {
  1957. background-color: rgb(206, 52, 38);
  1958. color: white;
  1959. }
  1960.  
  1961. button {
  1962. background: rgb(76, 142, 250);
  1963. border: 0;
  1964. border-radius: 2px;
  1965. box-sizing: border-box;
  1966. color: #fff;
  1967. cursor: pointer;
  1968. float: right;
  1969. font-size: .875em;
  1970. height: 36px;
  1971. margin: -6px 0 0;
  1972. padding: 8px 24px;
  1973. transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  1974. }
  1975.  
  1976. [dir='rtl'] button {
  1977. float: left;
  1978. }
  1979.  
  1980. button:active {
  1981. background: rgb(50, 102, 213);
  1982. outline: 0;
  1983. }
  1984.  
  1985. button:hover {
  1986. box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
  1987. }
  1988.  
  1989. .debugging-content {
  1990. line-height: 1em;
  1991. margin-bottom: 0;
  1992. margin-top: 0;
  1993. }
  1994.  
  1995. .debugging-title {
  1996. font-weight: bold;
  1997. }
  1998.  
  1999. #details {
  2000. color: #696969;
  2001. margin: 45px 0 50px;
  2002. }
  2003.  
  2004. #details p:not(:first-of-type) {
  2005. margin-top: 20px;
  2006. }
  2007.  
  2008. #error-code {
  2009. color: black;
  2010. opacity: .35;
  2011. text-transform: uppercase;
  2012. }
  2013.  
  2014. #error-debugging-info {
  2015. font-size: 0.8em;
  2016. }
  2017.  
  2018. h1 {
  2019. -webkit-margin-after: 16px;
  2020. color: #585858;
  2021. font-size: 1.6em;
  2022. font-weight: normal;
  2023. line-height: 1.25em;
  2024. }
  2025.  
  2026. h2 {
  2027. font-size: 1.2em;
  2028. font-weight: normal;
  2029. }
  2030.  
  2031. .hidden {
  2032. display: none;
  2033. }
  2034.  
  2035. .icon {
  2036. background-repeat: no-repeat;
  2037. background-size: 100%;
  2038. height: 72px;
  2039. margin: 0 0 40px;
  2040. width: 72px;
  2041. }
  2042.  
  2043. input[type=checkbox] {
  2044. visibility: hidden;
  2045. }
  2046.  
  2047. .interstitial-wrapper {
  2048. box-sizing: border-box;
  2049. font-size: 1em;
  2050. line-height: 1.6em;
  2051. margin: 50px auto 0;
  2052. max-width: 600px;
  2053. width: 100%;
  2054. }
  2055.  
  2056. #malware-opt-in {
  2057. font-size: .875em;
  2058. margin-top: 39px;
  2059. }
  2060.  
  2061. .nav-wrapper {
  2062. margin-top: 51px;
  2063. }
  2064.  
  2065. .nav-wrapper::after {
  2066. clear: both;
  2067. content: '';
  2068. display: table;
  2069. width: 100%;
  2070. }
  2071.  
  2072. #opt-in-label {
  2073. -webkit-margin-start: 32px;
  2074. }
  2075.  
  2076. .safe-browsing :-webkit-any(
  2077. a, #details, #details-button, h1, h2, p, .small-link) {
  2078. color: white;
  2079. }
  2080.  
  2081. .safe-browsing button {
  2082. background-color: rgb(206, 52, 38);
  2083. border: 1px solid white;
  2084. }
  2085.  
  2086. .safe-browsing button:active {
  2087. background-color: rgb(206, 52, 38);
  2088. border-color: rgba(255, 255, 255, .6);
  2089. }
  2090.  
  2091. .safe-browsing button:hover {
  2092. box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  2093. }
  2094.  
  2095. .safe-browsing .icon {
  2096. background-image: -webkit-image-set(
  2097. 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,
  2098. url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAACLlBMVEX///+Li4v////09PTX09P+/Pzw8PDy8vLx8fHbRDfz8/P++/r19fX29vba2trb29vY2Njp6enc3NzX19fm5ubk5OT39/fd3d3g4ODt7e3o6Ojr6+vn5+fq6uri4uLh4eHu7u7l5eXe3t7f39/09PT4+PjbnZjanJfaV0zcnpnQQTTv7+/bRTjZ2dn65eTZV0zcn5nj4+Ps7OzX1NPcSz/qwr/VQzbbV0zZRDfYxsTcn5rXZ17bycfgzczTQjXmgnrmf3bxwb3fWU3VQjXngHfac2rWQjbTQTXxtK/SQTXbV0vfWU7aRDfmf3fltrLbSj366Ob2z8vRQTX76Of////WcWjYcWnZQzf++/vngnnws67ZQzbl3dzWQzfYQzbiz83cysjRQTTlgnnZcmnacmnaRTjngnrkgnnXcWney8nXRDfUQjXZaF7XQzbWRjrZm5bWcWngW1DngXjYRDfaeHDZRDj429nZRTjZnJbaWEzbSj7XxcTZmJLbRzr2z8zYVkvk0dDhzsz5+fnZmpXj0c/kgXnlhX7iamDZx8XezMrbnpjbWEzfzMvVcWjYcmnUQzbYaF7qwb7mfHPUcWjbnpnYwsDXaF7mgnnURTnanJbUcGjTQjbURjnwwb3SRDjyu7bUb2fSQjbayMbRRDji0M7Tb2fZV0vRQjbWZ17RRDfdysnTb2bTQzbRQjXWZ13QRDfce3PSb2bQQjXVZ13PQzfRb2bUZ17ox8Tm4+PVRjlHvjbxAAAABHRSTlMAAIiOSsna/gAABM1JREFUeF7t2FOTJVkYRuHqmjxm2bbVtDG2bdu2bdu2/t3kvNHdUxW1u8+3JvNE7It6b/O7eGLd7ayJbyurPe1/r9YvDxdxDxf55eEi7uEivzxcxD1c5JeHi7iHi/zycBH3cJFfHi7iHi7yy8NF3MNFfnm4iHu4yDMPF3EPF3GPVyLu4SKvPBJ55ZEIeDwSyeORSB6PRPJ4JJLHI5E8Honk8Ugkj0cieTwSyeORSB6PRPJ4JJLHI5E8Honk8UXEPdMnEUDuDijinp03A1Fu++oHmIh7MhmJjJ5MZvXJVEQ9Epk9TCQQ9Uhk9kjEQNgjkdkjEQJxj0RGj3bPmmqApo8VxSjKHb/4+sQ1CMQ9Elk9Er2MQNwjkcEDGiGQPGaRPEjEQR9OZuyi3O6MY7cl4wJp+52iU+2ePQsNSQ7iIuBpKCc5iIvMnhAkEQRxEfCUp9IMFF2Uu+WInqlimoO4CHiKpTQHcZHZE4LqUxzERXZPSSIAiiA6y+KpD5fiIC4yegRqSXEQF9n6yNPSn8UgLnrF1kee/oEsBXER6NMvEQJxkb2PPAOtWQBCIt5HntaeQQBCIt5Hnh6JAAiJeJ9w3YMAhES8jzzdc3kAYiLeR6CmfFwg7ZzJKH1Cz5xEAEREvE/IaWrqywMQFPE+oaevMR8nKPGky3P/6+Y+IaixEB8ocXbGudF7zX3CdRYIiHsk2mDtE3o62wsAxD3aMRvMfUJQXYGAuEeip0x95Glvr2smIO6R6BNbH3nqupoJiHsk2mzrI09XRzMAcY+2brOtjzwdEgEQ9Uh0kblPuPkhBOIeiYx9BApFAMQ9En1j6yNPW9sQB8lzhQtw2X2TLtHVtj7ytPU+IlA8noWGR90iWx95ensFgp5txzl26b/vixsvd3xZ97StjzwTAsXlKZedomefM/eZgCB51jv2wsH3xV13Or7evcXaB4LkOdOxM/57X4zc7jgY3WLsM5GEoMSb5zq2yFMsvr3ecTH6sK1PEoISl1zg2BJPqTRyq+Nm5kJTHwMIe0r1hxEZ+kBQ4srrHbtq+fti5BrH3cxnhj7ptAGEPAK1DLtEXzxWoQ8EJR7f69hNgfN9MXy+4/bBhyr2SafsoCfcHvf7yy36qWKfFADtuGHXsp0eHPb9Nbx22fV151XsA0ASuT3u99cza5FHfQBIor+vXbLngyO+T8deXHL9kqVPNitQrVX03tZFezWo8H5/7btF12+Y+mSPqmGit/Yd2jtBxff72LuHrjeZ+siDRO9/cPSBfRQY/m+MfXzgehPow0QnfHqK9nlg+r+x8UtdfwX6YNHXF4f7NjD+/5n9Prz+gfThoh/Hx38OzP9/Zn8Z/5X14aLffg/A/7GNf8A+XPRngP6P/UX7cFGyAf0f4324yNxHHt6Hi6aq3IeLitXtw0Xpavfhomr34aL66vfhouh9VtXEJ0q1RO+zygACov7IfQwgJIraxwBiouxApD4GEBa1RugDQEDUE6GPAcRFgxH6ABARdUfoA0BAFKEPABER74NAXJRvgn0oiIv6UB8O4qJG1IeDuIj14SAu6iR9OIiLCu2oDwdxEevDQVxUh/pwEBd1kT4cxEXNHagPB3ER68NBXDRP+nAQFw2BPgJVXwT6CFR9EejDQSv7B32/UteG7LtWAAAAAElFTkSuQmCC) 2x);
  2099. }
  2100.  
  2101. .small-link {
  2102. color: #696969;
  2103. font-size: .875em;
  2104. }
  2105.  
  2106. .ssl .icon {
  2107. background-image: -webkit-image-set(
  2108. url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAGEElEQVR4Xu3aa4iUVRzHcU2DCkKLfSEk0btq7+s6O87edO3ei5BemEm+9kVEIJQgZiIFCaGW9cKiqJSQgm5GauOOu+p63Wa3i7lrm9uNNlZxZ9lEurin75k/HHYmzj777JxnePZhBr64+Orshzm/ZwZ2llJqkko5ACgBlYB+uDfusjmUoHW0h7roNxolJfGz/F8X7aF1lKA50zjDjAGqp100TGqaDdMuqo8SUIySpByXpNhMBrqRdtA1UgF1jXbQTTMN6DbqJlWkumnhTAFaSIOkitygIIUbaB71TwHgD3qH1lIT3U43G2T5+Q5aSk/SXro8BaR+mhdmoA89YM7QCpo7jU27gdZQnwfSB2EFWjEJzF/0FM0WgIK6nrZ4jP+KsAHNpQsWnCvUJgBOe4z+t
Compilation error #stdin compilation error #stdout 0s 0KB
stdin
Standard input is empty
compilation info
Main.java:3: error: class, interface, or enum expected
<html>
^
Main.java:30: error: class, interface, or enum expected
      for (i; i < l; i++) {
      ^
Main.java:30: error: class, interface, or enum expected
      for (i; i < l; i++) {
              ^
Main.java:30: error: class, interface, or enum expected
      for (i; i < l; i++) {
                     ^
Main.java:31: error: unclosed character literal
        myClasses[i].style.display = 'none';
                                     ^
Main.java:31: error: unclosed character literal
        myClasses[i].style.display = 'none';
                                          ^
Main.java:38: error: unclosed character literal
    'use strict';
    ^
Main.java:38: error: unclosed character literal
    'use strict';
               ^
Main.java:50: error: class, interface, or enum expected
    }
    ^
Main.java:52: error: class, interface, or enum expected
    this.outerContainerEl = document.querySelector(outerContainerId);
    ^
Main.java:53: error: class, interface, or enum expected
    this.containerEl = null;
    ^
Main.java:54: error: class, interface, or enum expected
    this.detailsButton = this.outerContainerEl.querySelector('#details-button');
    ^
Main.java:54: error: unclosed character literal
    this.detailsButton = this.outerContainerEl.querySelector('#details-button');
                                                             ^
Main.java:54: error: unclosed character literal
    this.detailsButton = this.outerContainerEl.querySelector('#details-button');
                                                                             ^
Main.java:55: error: class, interface, or enum expected
    this.config = opt_config || Runner.config;
    ^
Main.java:56: error: class, interface, or enum expected
    this.dimensions = Runner.defaultDimensions;
    ^
Main.java:57: error: class, interface, or enum expected
    this.canvas = null;
    ^
Main.java:58: error: class, interface, or enum expected
    this.canvasCtx = null;
    ^
Main.java:59: error: class, interface, or enum expected
    this.tRex = null;
    ^
Main.java:60: error: class, interface, or enum expected
    this.distanceMeter = null;
    ^
Main.java:61: error: class, interface, or enum expected
    this.distanceRan = 0;
    ^
Main.java:62: error: class, interface, or enum expected
    this.highestScore = 0;
    ^
Main.java:63: error: class, interface, or enum expected
    this.time = 0;
    ^
Main.java:64: error: class, interface, or enum expected
    this.runningTime = 0;
    ^
Main.java:65: error: class, interface, or enum expected
    this.msPerFrame = 1000 / FPS;
    ^
Main.java:66: error: class, interface, or enum expected
    this.currentSpeed = this.config.SPEED;
    ^
Main.java:67: error: class, interface, or enum expected
    this.obstacles = [];
    ^
Main.java:68: error: class, interface, or enum expected
    this.started = false;
    ^
Main.java:69: error: class, interface, or enum expected
    this.activated = false;
    ^
Main.java:70: error: class, interface, or enum expected
    this.crashed = false;
    ^
Main.java:71: error: class, interface, or enum expected
    this.paused = false;
    ^
Main.java:72: error: class, interface, or enum expected
    this.resizeTimerId_ = null;
    ^
Main.java:73: error: class, interface, or enum expected
    this.playCount = 0;
    ^
Main.java:75: error: class, interface, or enum expected
    this.audioBuffer = null;
    ^
Main.java:76: error: class, interface, or enum expected
    this.soundFx = {};
    ^
Main.java:78: error: class, interface, or enum expected
    this.audioContext = null;
    ^
Main.java:80: error: class, interface, or enum expected
    this.images = {};
    ^
Main.java:81: error: class, interface, or enum expected
    this.imagesLoaded = 0;
    ^
Main.java:82: error: class, interface, or enum expected
    this.loadImages();
    ^
Main.java:83: error: class, interface, or enum expected
    }
    ^
Main.java:84: error: unclosed character literal
    window['Runner'] = Runner;
           ^
Main.java:84: error: unclosed character literal
    window['Runner'] = Runner;
                  ^
Main.java:89: error: class, interface, or enum expected
    var DEFAULT_WIDTH = 600;
    ^
Main.java:94: error: class, interface, or enum expected
    var FPS = 60;
    ^
Main.java:96: error: class, interface, or enum expected
    var IS_HIDPI = window.devicePixelRatio > 1;
    ^
Main.java:98: error: class, interface, or enum expected
    var IS_IOS =
    ^
Main.java:99: error: unclosed character literal
    window.navigator.userAgent.indexOf('UIWebViewForStaticFileContent') > -1;
                                       ^
Main.java:99: error: unclosed character literal
    window.navigator.userAgent.indexOf('UIWebViewForStaticFileContent') > -1;
                                                                     ^
Main.java:101: error: class, interface, or enum expected
    var IS_MOBILE = window.navigator.userAgent.indexOf('Mobi') > -1 || IS_IOS;
    ^
Main.java:101: error: unclosed character literal
    var IS_MOBILE = window.navigator.userAgent.indexOf('Mobi') > -1 || IS_IOS;
                                                       ^
Main.java:101: error: unclosed character literal
    var IS_MOBILE = window.navigator.userAgent.indexOf('Mobi') > -1 || IS_IOS;
                                                            ^
Main.java:103: error: class, interface, or enum expected
    var IS_TOUCH_ENABLED = 'ontouchstart' in window;
    ^
Main.java:103: error: unclosed character literal
    var IS_TOUCH_ENABLED = 'ontouchstart' in window;
                           ^
Main.java:103: error: unclosed character literal
    var IS_TOUCH_ENABLED = 'ontouchstart' in window;
                                        ^
Main.java:108: error: class, interface, or enum expected
    Runner.config = {
    ^
Main.java:123: error: unclosed character literal
    RESOURCE_TEMPLATE_ID: 'audio-resources',
                          ^
Main.java:123: error: unclosed character literal
    RESOURCE_TEMPLATE_ID: 'audio-resources',
                                          ^
Main.java:131: error: class, interface, or enum expected
    Runner.defaultDimensions = {
    ^
Main.java:139: error: class, interface, or enum expected
    Runner.classes = {
    ^
Main.java:140: error: unclosed character literal
    CANVAS: 'runner-canvas',
            ^
Main.java:140: error: unclosed character literal
    CANVAS: 'runner-canvas',
                          ^
Main.java:141: error: unclosed character literal
    CONTAINER: 'runner-container',
               ^
Main.java:141: error: unclosed character literal
    CONTAINER: 'runner-container',
                                ^
Main.java:142: error: unclosed character literal
    CRASHED: 'crashed',
             ^
Main.java:142: error: unclosed character literal
    CRASHED: 'crashed',
                     ^
Main.java:143: error: unclosed character literal
    ICON: 'icon-offline',
          ^
Main.java:143: error: unclosed character literal
    ICON: 'icon-offline',
                       ^
Main.java:144: error: unclosed character literal
    TOUCH_CONTROLLER: 'controller'
                      ^
Main.java:144: error: illegal line end in character literal
    TOUCH_CONTROLLER: 'controller'
                                 ^
Main.java:150: error: class, interface, or enum expected
    Runner.imageSources = {
    ^
Main.java:152: error: unclosed character literal
    {name: 'CACTUS_LARGE', id: '1x-obstacle-large'},
           ^
Main.java:152: error: unclosed character literal
    {name: 'CACTUS_LARGE', id: '1x-obstacle-large'},
                        ^
Main.java:152: error: unclosed character literal
    {name: 'CACTUS_LARGE', id: '1x-obstacle-large'},
                               ^
Main.java:152: error: unclosed character literal
    {name: 'CACTUS_LARGE', id: '1x-obstacle-large'},
                                                 ^
Main.java:153: error: unclosed character literal
    {name: 'CACTUS_SMALL', id: '1x-obstacle-small'},
           ^
Main.java:153: error: unclosed character literal
    {name: 'CACTUS_SMALL', id: '1x-obstacle-small'},
                        ^
Main.java:153: error: unclosed character literal
    {name: 'CACTUS_SMALL', id: '1x-obstacle-small'},
                               ^
Main.java:153: error: unclosed character literal
    {name: 'CACTUS_SMALL', id: '1x-obstacle-small'},
                                                 ^
Main.java:154: error: unclosed character literal
    {name: 'CLOUD', id: '1x-cloud'},
           ^
Main.java:154: error: unclosed character literal
    {name: 'CLOUD', id: '1x-cloud'},
                 ^
Main.java:154: error: unclosed character literal
    {name: 'CLOUD', id: '1x-cloud'},
                        ^
Main.java:154: error: unclosed character literal
    {name: 'CLOUD', id: '1x-cloud'},
                                 ^
Main.java:155: error: unclosed character literal
    {name: 'HORIZON', id: '1x-horizon'},
           ^
Main.java:155: error: unclosed character literal
    {name: 'HORIZON', id: '1x-horizon'},
                   ^
Main.java:155: error: unclosed character literal
    {name: 'HORIZON', id: '1x-horizon'},
                          ^
Main.java:155: error: unclosed character literal
    {name: 'HORIZON', id: '1x-horizon'},
                                     ^
Main.java:156: error: unclosed character literal
    {name: 'RESTART', id: '1x-restart'},
           ^
Main.java:156: error: unclosed character literal
    {name: 'RESTART', id: '1x-restart'},
                   ^
Main.java:156: error: unclosed character literal
    {name: 'RESTART', id: '1x-restart'},
                          ^
Main.java:156: error: unclosed character literal
    {name: 'RESTART', id: '1x-restart'},
                                     ^
Main.java:157: error: unclosed character literal
    {name: 'TEXT_SPRITE', id: '1x-text'},
           ^
Main.java:157: error: unclosed character literal
    {name: 'TEXT_SPRITE', id: '1x-text'},
                       ^
Main.java:157: error: unclosed character literal
    {name: 'TEXT_SPRITE', id: '1x-text'},
                              ^
Main.java:157: error: unclosed character literal
    {name: 'TEXT_SPRITE', id: '1x-text'},
                                      ^
Main.java:158: error: unclosed character literal
    {name: 'TREX', id: '1x-trex'}
           ^
Main.java:158: error: unclosed character literal
    {name: 'TREX', id: '1x-trex'}
                ^
Main.java:158: error: unclosed character literal
    {name: 'TREX', id: '1x-trex'}
                       ^
Main.java:158: error: unclosed character literal
    {name: 'TREX', id: '1x-trex'}
                               ^
Main.java:161: error: unclosed character literal
    {name: 'CACTUS_LARGE', id: '2x-obstacle-large'},
           ^
Main.java:161: error: unclosed character literal
    {name: 'CACTUS_LARGE', id: '2x-obstacle-large'},
                        ^
100 errors
stdout
Standard output is empty