st

drollinger · Mar 24, 2021 · 075dbb1 · 075dbb1
1 parent e0ebb21
commit 075dbb1
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 1 deletion.
diff --git a/assn3.zip b/assn3.zip
diff --git a/audio/sound-1.mp3 b/audio/sound-1.mp3
diff --git a/audio/sound-2.mp3 b/audio/sound-2.mp3
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css"/>
     <link rel="stylesheet" type="text/css" href="styles/style.css"/>
     <script src='styles/bootstrap.bundle.min.js'></script>
+    <script src='scripts/player.js'></script>
     <script src='scripts/menuInput.js'></script>
     <script src='scripts/gamePlay.js'></script>
     <script src='scripts/particles.js'></script>

diff --git a/sample-code/HTML5Audio.zip b/sample-code/HTML5Audio.zip
diff --git a/sample-code/HTML5Audio/audio/sound-1.mp3 b/sample-code/HTML5Audio/audio/sound-1.mp3
diff --git a/sample-code/HTML5Audio/audio/sound-2.mp3 b/sample-code/HTML5Audio/audio/sound-2.mp3
diff --git a/sample-code/HTML5Audio/index.html b/sample-code/HTML5Audio/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html lang = "en-US">
+<head>
+    <meta charset = "UTF-8">
+    <title>HTML5 - Audio Demo</title>
+    <link rel = "stylesheet" type = "text/css" href = "styles/game.css">
+</head>
+<body onload = "initialize()">
+
+    <button
+        id = "id-play1"
+        type="button"
+        onclick = "playSound('audio/sound-1', 'Sound 1', 'id-play1', 'id-sound1-played');">
+            Sound 1 - Play!
+        </button>
+    <br/>
+    <button
+        id = "id-play2"
+        type="button"
+        onclick = "playSound('audio/sound-2', 'Sound 2', 'id-play2', 'id-sound2-played');">
+            Sound 2 - Play!
+        </button>
+    <br/>
+    <button
+        id = "id-play3"
+        type = "button"
+        onclick = "playSound('audio/bensound-extremeaction', 'Music', 'id-play3', 'id-music');">
+            Music - Play!
+        </button>
+    <br/>
+    <span>Music Volume: </span><input
+        type = "range"
+        min = "0" max = "100" value = "100"
+        oninput = "changeVolume(this.value)">
+    <hr/>
+
+    <span>Sound 1:&nbsp;</span><span id = "id-sound1-played">unplayed</span>
+    <br/>
+    <span>Sound 2:&nbsp;</span><span id = "id-sound2-played">unplayed</span>
+    <br/>
+    <span>Music:&nbsp;</span><span id = "id-music">unplayed</span>
+
+    <script>MyGame = {}</script>
+    <script src = "scripts/player.js"></script>
+</body>
+</html>
diff --git a/sample-code/HTML5Audio/scripts/player.js b/sample-code/HTML5Audio/scripts/player.js
@@ -0,0 +1,94 @@
+//------------------------------------------------------------------
+//
+// This function performs the one-time game initialization.
+//
+//------------------------------------------------------------------
+function initialize() {
+    'use strict';
+
+    function loadSound(source, label, idButton) {
+        let sound = new Audio();
+        sound.addEventListener('canplay', function() {
+            console.log(`${source} is ready to play`);
+        });
+        sound.addEventListener('play', function() {
+            let elementButton = document.getElementById(idButton);
+            elementButton.innerHTML = label + ' - Pause!'
+            console.log(`${source} started playing`);
+        });
+        sound.addEventListener('pause', function() {
+            console.log(`${source} paused`);
+        });
+        sound.addEventListener('canplaythrough', function() {
+            console.log(`${source} can play through`);
+        });
+        sound.addEventListener('progress', function() {
+            console.log(`${source} progress in loading`);
+        });
+        sound.addEventListener('timeupdate', function() {
+            console.log(`${source} time update: ${this.currentTime}`);
+        });
+        sound.src = source;
+        return sound;
+    }
+
+    function loadAudio() {
+        MyGame.sounds = {}
+        // Reference: https://freesound.org/data/previews/156/156031_2703579-lq.mp3
+        MyGame.sounds['audio/sound-1'] = loadSound('audio/sound-1.mp3', 'Sound 1', 'id-play1');
+        // Reference: https://freesound.org//data/previews/109/109662_945474-lq.mp3
+        MyGame.sounds['audio/sound-2'] = loadSound('audio/sound-2.mp3', 'Sound 2', 'id-play2');
+        // Reference: https://www.bensound.com/royalty-free-music/track/extreme-action
+        MyGame.sounds['audio/bensound-extremeaction'] = loadSound('audio/bensound-extremeaction.mp3', 'Music', 'id-play3');
+    }
+
+    console.log('initializing...');
+
+    loadAudio();
+}
+
+//------------------------------------------------------------------
+//
+// Pauses the specified audio
+//
+//------------------------------------------------------------------
+function pauseSound(whichSound, label, idButton, idStatus) {
+    MyGame.sounds[whichSound].pause();
+
+    let elementStatus = document.getElementById(idStatus);
+    elementStatus.innerHTML = 'paused';
+
+    let elementButton = document.getElementById(idButton);
+    elementButton.innerHTML = `${label} - Continue!`;
+    elementButton.onclick = function() { playSound(whichSound, label, idButton, idStatus); };
+}
+
+//------------------------------------------------------------------
+//
+// Plays the specified audio
+//
+//------------------------------------------------------------------
+function playSound(whichSound, label, idButton, idStatus) {
+    let elementStatus = document.getElementById(idStatus);
+    let elementButton = document.getElementById(idButton);
+
+    elementStatus.innerHTML = 'playing';
+    MyGame.sounds[whichSound].addEventListener('ended', function() {
+        elementStatus.innerHTML = 'ended';
+        elementButton.innerHTML = `${label} - Play!`;
+        elementButton.onclick = function() { playSound(whichSound, label, idButton, idStatus); };
+    });
+
+    elementButton.onclick = function() { pauseSound(whichSound, label, idButton, idStatus); };
+
+    MyGame.sounds[whichSound].play();
+}
+
+//------------------------------------------------------------------
+//
+// Allow the music volume to be changed
+//
+//------------------------------------------------------------------
+function changeVolume(value) {
+    MyGame.sounds['audio/bensound-extremeaction'].volume = value / 100;
+}
diff --git a/sample-code/HTML5Audio/styles/game.css b/sample-code/HTML5Audio/styles/game.css
@@ -0,0 +1,12 @@
+body
+{
+    margin: 0;
+}
+
+#canvas-main
+{
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: rgb(0, 0, 0);
+}
diff --git a/scripts/gamePlay.js b/scripts/gamePlay.js
@@ -43,14 +43,18 @@ let GamePlay = function(s, t, m, ps) {
                 //TODO Adding in Scoring
 
                 if (!Info.shipOnPad) {
+                    ShipSounds['audio/sound-1'].play();
                     for (let p of particleSystems) {
                         p.BlowUpShip();
                     }
                 }
-
+                else {
+                    ShipSounds['audio/sound-2'].play();
+                }
                 Info.onTransition = true;
                 Info.countDown = 6000;
                 if (Info.level == terrain.Level.HARD) Info.done = true;
+                ship.Info.isBoosting = false;
             };
             if (Info.onTransition) {
                 Info.countDown -= elapsedTime;

diff --git a/scripts/player.js b/scripts/player.js
@@ -0,0 +1,9 @@
+function loadSound(source) {
+    let sound = new Audio();
+    sound.src = source;
+    return sound;
+}
+
+var ShipSounds = {};
+ShipSounds['audio/sound-1'] = loadSound('audio/sound-1.mp3');
+ShipSounds['audio/sound-2'] = loadSound('audio/sound-2.mp3');