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