sounds

rebeccaui · Jun 7, 2018 · 4b2f552 · 4b2f552
1 parent 47504f3
commit 4b2f552
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -3,7 +3,8 @@ html {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    text-shadow: .5px .5px black;
+    text-shadow: .75px .75px black;
+    background-color: black;
 }
 body {
     background-color: transparent !important;
@@ -26,6 +27,10 @@ body {
     justify-content: center;
 }
 
+#numberToGuess, #total {
+    font-size: 80px;
+}
+
 .col-md-4 {
     text-align: center;
 }
@@ -48,15 +53,10 @@ body {
     margin: auto;
 }
 
-#dataRow {
-
-}
-
 @media(min-width: 576px) {
     .coinsFlexbox {
         flex-flow: row nowrap;
         width: 100%;
-        max-height: 202px;
     }
     .coinImg {
         width: 25%; 

diff --git a/assets/javascript/game.js b/assets/javascript/game.js
@@ -15,13 +15,23 @@ var sickle = Math.floor(Math.random() * 11 +1);
 var galleon = Math.floor(Math.random() * 11 +1);
 var da = Math.floor(Math.random() * 11 +1);
 
-var coinAudio = src="../audio/coin-drop-4.mp3";
-var gameAudio = new Audio("../audio/harrysWondrousWorld.mp3");
-gameAudio.play();
+var coinAudio = document.createElement("audio");
+    coinAudio.src="assets/audio/coin-drop-4.mp3";
+    coinAudio.volume = 1;
+    coinAudio.preLoad = true;
+var gameAudio = new Audio("assets/audio/harrysWondrousWorld.mp3");
+    gameAudio.controls = true;
 
 
-    //
-
+    // Game audio
+    function music() {
+        gameAudio.play();
+        gameAudio.loop = true;
+        $(".coinImg").on("click", function() {
+            coinAudio.play();
+        });
+    }
+    music();
 
     // Resetting the variables at the beginning of each round
     function reset() {
@@ -77,12 +87,16 @@ gameAudio.play();
         var chosenCoin = $(this).attr("value");
         // Cases of each coin being pressed and their corresponding values added to the user's running total
         if (chosenCoin == "knutValue") {
+            music();
             total += knut;
         } else if (chosenCoin == "sickleValue") {
+            music();
             total += sickle;
         } else if (chosenCoin == "galleonValue") {
+            music();
             total += galleon;
         } else if (chosenCoin == "daValue") {
+            music();
             total += da;
         } else {
             console.log("No coin selected.");

diff --git a/index.html b/index.html
@@ -37,16 +37,23 @@ <h1 id="numberToGuess">#</h1>
         </div>
 
         <div class="row" id="dataRow">
-                <div class="col-md-4">
-                    <h3 id="wins">Wins: </h3>
-                </div>
-                <div class="col-md-4">
+                <div class="col-md-12">
                     <h2 id="total">Your Total: </h2>
                 </div>
-                <div class="col-md-4">
+        </div>
+
+        <div class="row" id="dataRow">
+                <div class="col-md-3">
+                </div>
+                <div class="col-md-3">
+                    <h3 id="wins">Wins: </h3>
+                </div>
+                <div class="col-md-3">
                     <h3 id="losses">Losses: </h3>
                 </div>
-            </div>
+                <div class="col-md-3">
+                </div>
+        </div>
 
     </div>