OLD | NEW |
1 // Copyright (c) 2014 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 (function() { | 4 (function() { |
5 'use strict'; | 5 'use strict'; |
6 /** | 6 /** |
7 * T-Rex runner. | 7 * T-Rex runner. |
8 * @param {string} outerContainerId Outer containing element id. | 8 * @param {string} outerContainerId Outer containing element id. |
9 * @param {object} opt_config | 9 * @param {object} opt_config |
10 * @constructor | 10 * @constructor |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
48 | 48 |
49 this.resizeTimerId_ = null; | 49 this.resizeTimerId_ = null; |
50 | 50 |
51 this.playCount = 0; | 51 this.playCount = 0; |
52 | 52 |
53 // Sound FX. | 53 // Sound FX. |
54 this.audioBuffer = null; | 54 this.audioBuffer = null; |
55 this.soundFx = {}; | 55 this.soundFx = {}; |
56 | 56 |
57 // Global web audio context for playing sounds. | 57 // Global web audio context for playing sounds. |
58 this.audioContext = new AudioContext(); | 58 this.audioContext = null; |
59 | 59 |
60 // Images. | 60 // Images. |
61 this.images = {}; | 61 this.images = {}; |
62 this.imagesLoaded = 0; | 62 this.imagesLoaded = 0; |
63 this.loadImages(); | 63 this.loadImages(); |
64 } | 64 } |
65 window['Runner'] = Runner; | 65 window['Runner'] = Runner; |
66 | 66 |
67 | 67 |
68 /** | 68 /** |
(...skipping 174 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
243 var imgSource = imageSources[i]; | 243 var imgSource = imageSources[i]; |
244 this.images[imgSource.name] = document.getElementById(imgSource.id); | 244 this.images[imgSource.name] = document.getElementById(imgSource.id); |
245 } | 245 } |
246 this.init(); | 246 this.init(); |
247 }, | 247 }, |
248 | 248 |
249 /** | 249 /** |
250 * Load and decode base 64 encoded sounds. | 250 * Load and decode base 64 encoded sounds. |
251 */ | 251 */ |
252 loadSounds: function() { | 252 loadSounds: function() { |
| 253 this.audioContext = new AudioContext(); |
253 var resourceTemplate = | 254 var resourceTemplate = |
254 document.getElementById(this.config.RESOURCE_TEMPLATE_ID).content; | 255 document.getElementById(this.config.RESOURCE_TEMPLATE_ID).content; |
255 | 256 |
256 for (var sound in Runner.sounds) { | 257 for (var sound in Runner.sounds) { |
257 var soundSrc = resourceTemplate.getElementById(Runner.sounds[sound]).src; | 258 var soundSrc = resourceTemplate.getElementById(Runner.sounds[sound]).src; |
258 soundSrc = soundSrc.substr(soundSrc.indexOf(',') + 1); | 259 soundSrc = soundSrc.substr(soundSrc.indexOf(',') + 1); |
259 var buffer = decodeBase64ToArrayBuffer(soundSrc); | 260 var buffer = decodeBase64ToArrayBuffer(soundSrc); |
260 | 261 |
261 // Async, so no guarantee of order in array. | 262 // Async, so no guarantee of order in array. |
262 this.audioContext.decodeAudioData(buffer, function(index, audioData) { | 263 this.audioContext.decodeAudioData(buffer, function(index, audioData) { |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
317 this.tRex = new Trex(this.canvas, this.images.TREX); | 318 this.tRex = new Trex(this.canvas, this.images.TREX); |
318 | 319 |
319 this.outerContainerEl.appendChild(this.containerEl); | 320 this.outerContainerEl.appendChild(this.containerEl); |
320 | 321 |
321 if (IS_MOBILE) { | 322 if (IS_MOBILE) { |
322 this.createTouchController(); | 323 this.createTouchController(); |
323 } | 324 } |
324 | 325 |
325 this.startListening(); | 326 this.startListening(); |
326 this.update(); | 327 this.update(); |
327 this.loadSounds(); | |
328 | 328 |
329 window.addEventListener(Runner.events.RESIZE, | 329 window.addEventListener(Runner.events.RESIZE, |
330 this.debounceResize.bind(this), false); | 330 this.debounceResize.bind(this)); |
331 }, | 331 }, |
332 | 332 |
333 /** | 333 /** |
334 * Create the touch controller. A div that covers whole screen. | 334 * Create the touch controller. A div that covers whole screen. |
335 */ | 335 */ |
336 createTouchController: function() { | 336 createTouchController: function() { |
337 this.touchController = document.createElement('div'); | 337 this.touchController = document.createElement('div'); |
338 this.touchController.className = Runner.classes.TOUCH_CONTROLLER; | 338 this.touchController.className = Runner.classes.TOUCH_CONTROLLER; |
339 }, | 339 }, |
340 | 340 |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
429 */ | 429 */ |
430 startGame: function() { | 430 startGame: function() { |
431 this.runningTime = 0; | 431 this.runningTime = 0; |
432 this.playingIntro = false; | 432 this.playingIntro = false; |
433 this.tRex.playingIntro = false; | 433 this.tRex.playingIntro = false; |
434 this.containerEl.style.webkitAnimation = ''; | 434 this.containerEl.style.webkitAnimation = ''; |
435 this.playCount++; | 435 this.playCount++; |
436 | 436 |
437 // Handle tabbing off the page. Pause the current game. | 437 // Handle tabbing off the page. Pause the current game. |
438 window.addEventListener(Runner.events.VISIBILITY, | 438 window.addEventListener(Runner.events.VISIBILITY, |
439 this.onVisibilityChange.bind(this), false); | 439 this.onVisibilityChange.bind(this)); |
440 | 440 |
441 window.addEventListener(Runner.events.BLUR, | 441 window.addEventListener(Runner.events.BLUR, |
442 this.onVisibilityChange.bind(this), false); | 442 this.onVisibilityChange.bind(this)); |
443 | 443 |
444 window.addEventListener(Runner.events.FOCUS, | 444 window.addEventListener(Runner.events.FOCUS, |
445 this.onVisibilityChange.bind(this), false); | 445 this.onVisibilityChange.bind(this)); |
446 }, | 446 }, |
447 | 447 |
448 clearCanvas: function() { | 448 clearCanvas: function() { |
449 this.canvasCtx.clearRect(0, 0, this.dimensions.WIDTH, | 449 this.canvasCtx.clearRect(0, 0, this.dimensions.WIDTH, |
450 this.dimensions.HEIGHT); | 450 this.dimensions.HEIGHT); |
451 }, | 451 }, |
452 | 452 |
453 /** | 453 /** |
454 * Update the game frame. | 454 * Update the game frame. |
455 */ | 455 */ |
(...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
574 }, | 574 }, |
575 | 575 |
576 /** | 576 /** |
577 * Process keydown. | 577 * Process keydown. |
578 * @param {Event} e | 578 * @param {Event} e |
579 */ | 579 */ |
580 onKeyDown: function(e) { | 580 onKeyDown: function(e) { |
581 if (!this.crashed && (Runner.keycodes.JUMP[String(e.keyCode)] || | 581 if (!this.crashed && (Runner.keycodes.JUMP[String(e.keyCode)] || |
582 e.type == Runner.events.TOUCHSTART)) { | 582 e.type == Runner.events.TOUCHSTART)) { |
583 if (!this.activated) { | 583 if (!this.activated) { |
| 584 this.loadSounds(); |
584 this.activated = true; | 585 this.activated = true; |
585 } | 586 } |
586 | 587 |
587 if (!this.tRex.jumping) { | 588 if (!this.tRex.jumping) { |
588 this.playSound(this.soundFx.BUTTON_PRESS); | 589 this.playSound(this.soundFx.BUTTON_PRESS); |
589 this.tRex.startJump(); | 590 this.tRex.startJump(); |
590 } | 591 } |
591 } | 592 } |
592 | 593 |
593 if (this.crashed && e.type == Runner.events.TOUCHSTART && | 594 if (this.crashed && e.type == Runner.events.TOUCHSTART && |
(...skipping 1631 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2225 | 2226 |
2226 /** | 2227 /** |
2227 * Add a new cloud to the horizon. | 2228 * Add a new cloud to the horizon. |
2228 */ | 2229 */ |
2229 addCloud: function() { | 2230 addCloud: function() { |
2230 this.clouds.push(new Cloud(this.canvas, this.cloudImg, | 2231 this.clouds.push(new Cloud(this.canvas, this.cloudImg, |
2231 this.dimensions.WIDTH)); | 2232 this.dimensions.WIDTH)); |
2232 } | 2233 } |
2233 }; | 2234 }; |
2234 })(); | 2235 })(); |
OLD | NEW |