Added sound

Philipp-S · Sep 21, 2020 · 25401b6 · 25401b6
1 parent eecd8c1
commit 25401b6
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,16 @@
 # RecklessRocketRangerReloaded
-
 Made for [Open Jam 2020](https://itch.io/jam/open-jam-2020)
 
 3rd party assets used:
 
 * [Explosion](https://opengameart.org/content/explosion-7) by BenHickling (CC-0)
 * [Bird](https://opengameart.org/content/bird-cute-bird) by Lexatchison (CC-0)
 * Font [Orbitron](https://fonts.google.com/specimen/Orbitron?category=Sans+Serif&vfonly=true#about) (Open Font License)
+* Music: Heavy Trailer 2 by Sascha Ende
+
+  Link: https://filmmusic.io/song/441-heavy-trailer-2
+
+  License: http://creativecommons.org/licenses/by/4.0/
 
 Open source tools and technologies used for development:
 
@@ -15,5 +19,6 @@ Open source tools and technologies used for development:
 * GIMP (GNU GPLv3)
 * Inkscape (GNU GPLv3)
 * Firefox Developer Edition (MPL 2.0)
+* Audacity (GNU GPLv2)
 
 Proprietary tools used: **none!**
diff --git a/build/audio/explosion.ogg b/build/audio/explosion.ogg
diff --git a/build/audio/heavy-trailer-2-by-sascha-ende-from-filmmusic-io.mp3 b/build/audio/heavy-trailer-2-by-sascha-ende-from-filmmusic-io.mp3
diff --git a/build/audio/shoot.ogg b/build/audio/shoot.ogg
diff --git a/build/index.html b/build/index.html
@@ -22,7 +22,7 @@
 <body style="margin:0px">
 
     <div id="preloader">
-        L O A D I N G
+        <span id="preloader_headline">L O A D I N G</span>
         <div id="preloader_frame">
             <div id="preloader_bar"></div>
         </div>

diff --git a/build/style.css b/build/style.css
@@ -43,7 +43,7 @@
 
 #preloader_frame {
     margin:auto; 
-    border:5px solid black; 
+    border:5px solid darkslategray; 
     border-radius: 5px;
     width:1000px; 
     padding:1px
@@ -52,7 +52,7 @@
 #preloader_bar {
     height:50px; 
     width:0%; 
-    background-color: aqua;
+    background-color: darkslateblue;
 }
 
 .indicator {

diff --git a/constants.ts b/constants.ts
@@ -8,8 +8,8 @@ const CONST = {
     // physics sttings
     PLAYER_START_ALTITUDE: 500, //height in pixels where the player spawns
     GRAVITY: 1000,  // Gravity in pixels per second²
-    EXPLOSION_FORCE: 7000000, // impulse caused by rocket explosions
-    EXPLOSION_MIN_RADIUS: 64, //radius in pixels from within the maximum explosion force is applied
+    EXPLOSION_FORCE: 30000000, // impulse caused by rocket explosions
+    EXPLOSION_MIN_RADIUS: 128, //radius in pixels from within the maximum explosion force is applied
     EXPLOSION_MAX_RADIUS: 640, //radius in pixels from without explosions are completely ignored
     PLAYER_GROUND_COLLISION: -46, //distance in pixels between player center of mass and feet
     PLAYER_ACCEL_GROUND: 0, // player acceleration on ground
@@ -36,7 +36,7 @@ const CONST = {
     MOB_BIRD_MOVE_RANGE: 400,   // movement range of bird mobs
     MOB_BIRD_MOVE_TIME: 10, // time it takes for the bird to move through its range
     MOB_UFO_RADIUS: 55, // radius of the collision hitcircle
-    MOB_UFO_ANIMATION_LENGHT: 0.2, // time for one animation cycle of the birds
+    MOB_UFO_ANIMATION_LENGHT: 0.2, // time for one animation cycle of the ufo
 
     // render order layers
     LAYER_BG: -1,

diff --git a/entity.ts b/entity.ts
@@ -156,6 +156,7 @@ class ExplodeOnImpactBehavior extends Behavior {
                                          false,
                                          0));
         state.player.explosion(entity.pos)
+        new Audio(AudioResource.EXPLOSION).play()
     }
 }
 

diff --git a/init.ts b/init.ts
@@ -3,6 +3,7 @@ class Game {
     public state: State
     public renderer: Renderer
     private ui: UI
+    private music: HTMLAudioElement
 
     private lastUpdate: number
 
@@ -11,6 +12,10 @@ class Game {
         this.state = new State()
         this.renderer = new Renderer(document.getElementById("canvas_main") as HTMLCanvasElement)
         this.ui = new UI()
+        this.music = new Audio(AudioResource.BGM)
+        this.music.loop = true
+        this.music.volume = 0.25
+        this.music.play()
         this.lastUpdate = NaN
     }
 

diff --git a/resources.ts b/resources.ts
@@ -12,6 +12,12 @@ enum ImageResource {
     PUFF = "img/puff.png"
 }
 
+enum AudioResource {
+    BGM = "audio/heavy-trailer-2-by-sascha-ende-from-filmmusic-io.mp3",
+    SHOOT = "audio/shoot.ogg",
+    EXPLOSION = "audio/explosion.ogg",
+}
+
 class Preloader {
 
     private finishedFunc: () => void = () => {}
@@ -41,27 +47,39 @@ class Preloader {
             image.onerror = this.resourceFinished.bind(this)
             this.resources.push(image)
         }
+
+        for(let resource in AudioResource) {
+            let resourceUrl = AudioResource[resource];
+            console.log("Loading " + resourceUrl)
+            this.numLoading++
+            let audio = new Audio(resourceUrl)
+            audio.oncanplaythrough = this.resourceFinished.bind(this)
+            audio.onerror =  this.resourceFinished.bind(this)
+        }
     }
 
     private resourceFinished() {
         this.numFinished++
         this.preloadBarDiv.style.width = (this.numFinished / this.numLoading * 100).toString() + "%"
         if (this.numFinished === this.numLoading) {
-            this.preloadDiv.style.display = "none"
-            this.gameDiv.style.display = "block"
-            this.finished = true;
-            if (this.finishedFunc) {
-                this.finishedFunc()
-                this.finishedFunc = null
+
+            let headline = document.getElementById("preloader_headline") as HTMLSpanElement
+            headline.textContent = "Click to start"
+            document.onclick = () => {
+                document.onclick = () => {}
+                this.preloadDiv.style.display = "none"
+                this.gameDiv.style.display = "block"
+                this.finished = true;
+                if (this.finishedFunc) {
+                    this.finishedFunc()
+                    this.finishedFunc = null
+                }
             }
+
         }
     }
 
-    onFinish(func: () => void) {
-        if (this.finished) {
-            func()
-        } else {
-            this.finishedFunc = func;
-        }
+    onFinish(func: () => void) {      
+        this.finishedFunc = func;
     }
 }
diff --git a/rocket.ts b/rocket.ts
@@ -12,5 +12,7 @@ class Rocket extends Entity {
         this.behaviors.push(new ExplodeOnImpactBehavior)
         this.behaviors.push(new ParticleEmitterBehavior(0.25, ImageResource.SPARK, 0.01, 3))
         this.behaviors.push(SelfDestructIfOffscreen)
+
+        new Audio(AudioResource.SHOOT).play()
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -156,6 +156,7 @@ class ExplodeOnImpactBehavior extends Behavior { @@
                                              false,
 ));
             state.player.explosion(entity.pos)
+            new Audio(AudioResource.EXPLOSION).play()
         }
     }
@@ Expand Down @@