added music

minor bug fixes added click sfx gonna add more later yeah
python-nerd-3 · Feb 12, 2023 · 4b61605 · 4b61605
1 parent 0b79882
commit 4b61605
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 3 deletions.
diff --git a/Brokemon.wav b/Brokemon.wav
diff --git a/click.mp3 b/click.mp3
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <head>
+    <script src="https://kit.fontawesome.com/19a43ba50e.js" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
@@ -9,6 +10,7 @@
     <title>Brokemon Beta 01.4.0</title>
 </head>
 <body>
+    <button id="mute-btn" onclick="toggleMusic()" style="color: white;"><i class="fa-solid fa-volume-high fa-3x"></i></button>
     <h1>Brokemon</h1>
     <h2>Your HP: <span id="player-hp">100</span> <span id="playerBoost" class="boost">x1</span></h2>
     <h3>Defense: <span class="defense" id="player-defense">0</span></h3>
@@ -17,7 +19,7 @@ <h3>Defense: <span class="defense" id="enemy-defense">0</span></h3>
     <div id="info">
         <span id="top-bar">| Select your moves.</span>
         <br>
-        <span id="bottom-bar">|</span>
+        <span id="bottom-bar">| WARNING: Music will start playing once you select all 4</span>
     </div>
     <div id="actions">
         <button class="move" id="button-1" disabled="true"></button>

diff --git a/index.js b/index.js
@@ -11,6 +11,9 @@ let moveNames = [];
 let selectableMoves = [];
 let movePool = [];
 let movesChosen = 1;
+let click = new Audio("click.mp3")
+let music = new Audio("Brokemon.wav")
+let musicPlaying = false;
 let isFirefox = navigator.userAgent.match(/firefox|fxios/i)
 let isSafari = navigator.userAgent.match(/safari/i);
 
@@ -43,12 +46,21 @@ $('#button-2').prop("disabled", true);
 $('#button-3').prop("disabled", true);
 $('#button-4').prop("disabled", true);
 
+function toggleMusic() {
+    if (musicPlaying) {
+        if (music.paused) {
+            music.play()
+        } else {
+            music.pause()
+        }
+    }
+}
+
 function setDifficulty() {
     let diffBoost = $("#enemy-boost-input").val();
     let diffHp = $("#enemy-hp-input").val();
     diffBoost = Math.max(0, Math.min(100000, Math.round(diffBoost)))
     diffHp = Math.max(1, Math.min(10000000, Math.round(diffHp)))
-    console.log(diffBoost + diffHp)
     window.location.replace(`index.html?hp=${diffHp}&boost=${diffBoost}`)
 }
 
@@ -179,24 +191,30 @@ class Move {
     }
 
     addToMoves() {
+        click.play();
         $(`#button-${movesChosen}`).html(this.name);
         $(`#button-${movesChosen}`).attr("onclick", `${this.useFunction}`)
         movesChosen += 1;
         $(`#add-${this.codeName}`).remove();
         if (movesChosen === 5) {
             $("#moveSelector").remove();
+            music.play()
+            music.loop = true;
+            musicPlaying = true;
             loop1();
         }
     }
 
     useMove(user) {
         switch (user) {
             case "player":
+                click.play();
                 let pDamageDealt = this.dmg * playerExtraDmg;
                 let randomDamageBoost = Math.random() / 5
                 randomDamageBoost += 0.9
                 pDamageDealt *= randomDamageBoost
                 if (this.dmg > 0) {
+                    console.log("indeedee")
                     pDamageDealt -= enemyDef
                     pDamageDealt = Math.max(pDamageDealt, (pDamageDealt + enemyDef) / 2)
                 }
@@ -265,8 +283,10 @@ class Move {
                 let eRandomDamageBoost = Math.random() / 5
                 eRandomDamageBoost  += 0.9
                 eDamageDealt *= eRandomDamageBoost
+                if (this.dmg > 0) {
                     eDamageDealt -= playerDef;
-                    eDamageDealt = Math.max(eDamageDealt, (eDamageDealt + playerDef) / 2)
+                    eDamageDealt = Math.max(eDamageDealt, (eDamageDealt + playerDef) / 2);
+                };
                 playerHp -= eDamageDealt;
                 enemyHp += this.heal * enemyExtraDmg;
                 enemyHp = Math.min(enemyHp, enemyMaxHp);

diff --git a/styles.css b/styles.css
@@ -78,8 +78,22 @@ button:disabled {
     margin: 0.5vw;
 }
 
+#mute-btn {
+    width: 60px;
+    height: 60px;
+    float: right;
+    border: 0;
+    background-color:rgb(10, 10, 25);
+}
+
+.fa-solid {
+    text-align: center;
+    opacity: 1;
+}
+
 textarea {
     border-radius: 10px;
+    resize: none;
 }
 
 #difficulty-builder {