Menu Songs added and configured

Veneiro · Nov 15, 2023 · 0e2e4ae · 0e2e4ae
1 parent 70639dd
commit 0e2e4ae
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 32 deletions.
diff --git a/help.css b/help.css
@@ -1,43 +1,44 @@
 body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background-image: url("background2.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    color:white;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url("background2.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .menu {
-    text-align: center;
+  text-align: center;
 }
 
 h1 {
-    font-size: 36px;
-    margin-bottom: 20px;
+  font-size: 36px;
+  margin-bottom: 20px;
 }
 
 button {
-    padding: 10px 20px;
-    font-size: 18px;
-    background-color: #3498db;
-    color: #fff;
-    border: solid;
-    cursor: pointer;
-    border-radius: 1em;
-  }
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #3498db;
+  color: #fff;
+  border: solid;
+  cursor: pointer;
+  border-radius: 1em;
+}
 
 button:hover {
-    background-color: #2980b9;
+  background-color: #2980b9;
 }
 
 main {
-    padding: 2em;
-    background-color: rgba(0,0,0,0.4);
-}
+  padding: 2em;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+img {
+  height: 5em;
+  width: 5em;
+}
diff --git a/help.html b/help.html
@@ -10,6 +10,13 @@
 <body>
     <main>
         <h1>Ayuda</h1>
+        <audio id="backgroundMusic" loop autoplay>
+            <source src="./helpmusic.wav" type="audio/wav">
+        </audio>
+        <button id="mute" onclick=music()>
+            <img src="./mute.jpg" alt="Mute/Unmute">
+        </button>
+        <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
         <h2>Controles básicos</h2>
         <section>
             <p>Para poder jugar al juego tendrás que usar las flechas del teclado. Si pulsas la flecha izquierda la pala

diff --git a/help.js b/help.js
@@ -0,0 +1,53 @@
+var musicState = localStorage.getItem("musicState");
+var mute = document.getElementById("mute");
+var muteText = '<img src="./mute.jpg" alt="Mute/Unmute">';
+var playingText = '<img src="./volume.jpg" alt="Mute/Unmute">'
+
+var backgroundMusic = document.getElementById("backgroundMusic");
+volumeControl.addEventListener('input', function() {
+  backgroundMusic.volume = volumeControl.value;
+});
+
+// Pausar la música
+function pauseMusic() {
+  backgroundMusic.pause();
+  localStorage.setItem("musicState", "paused");
+  mute.innerHTML = muteText;
+}
+
+// Detener la música
+function stopMusic() {
+  backgroundMusic.pause();
+  backgroundMusic.currentTime = 0;
+  localStorage.setItem("musicState", "paused");
+  mute.innerHTML = "Stopped";
+}
+
+// Reproducir la música
+function playMusic() {
+  backgroundMusic.play();
+  localStorage.setItem("musicState", "playing");
+  mute.innerHTML = playingText;
+}
+
+// Restaura el estado de la música
+if (musicState === "playing") {
+  playMusic();
+} else if (musicState === "paused") {
+  pauseMusic();
+}
+
+window.addEventListener('load', function () {
+  if(musicState === "playing"){
+    playMusic();
+    mute.innerHTML = playingText;
+  }
+});
+
+function music(){
+  if (backgroundMusic.paused) {
+    playMusic();
+  } else {
+    pauseMusic();
+  }
+}
diff --git a/helpmusic.wav b/helpmusic.wav
diff --git a/index.html b/index.html
@@ -16,7 +16,10 @@
       <h1>GRAVITY PONG</h1>
       <button onclick="startGame()">Iniciar Juego</button>
       <button onclick="help()">Ayuda</button>
-      <button id="mute" onclick=music()></button>
+      <button id="mute" onclick=music()>
+        <img src="./mute.jpg" alt="Mute/Unmute">
+      </button>
+      <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
     </main>
     <script src="menu.js"></script>
   </body>

diff --git a/menu.css b/menu.css
@@ -42,4 +42,9 @@ body {
     display:grid;
     grid-row-gap:1em;
     text-align: center;
+  }
+
+  img{
+    height: 5em;
+    width: 5em;
   }
diff --git a/menu.js b/menu.js
@@ -12,8 +12,13 @@ function back() {
 
 var musicState = localStorage.getItem("musicState");
 var mute = document.getElementById("mute");
-var muteText = "Music Muted";
-var playingText = "Playing now..."
+var muteText = '<img src="./mute.jpg" alt="Mute/Unmute">';
+var playingText = '<img src="./volume.jpg" alt="Mute/Unmute">'
+
+var backgroundMusic = document.getElementById("backgroundMusic");
+volumeControl.addEventListener('input', function() {
+  backgroundMusic.volume = volumeControl.value;
+});
 
 // Pausar la música
 function pauseMusic() {
@@ -30,7 +35,6 @@ function stopMusic() {
   mute.innerHTML = "Stopped";
 }
 
-var backgroundMusic = document.getElementById("backgroundMusic");
 // Reproducir la música
 function playMusic() {
   backgroundMusic.play();

diff --git a/mute.jpg b/mute.jpg
diff --git a/sketch.js b/sketch.js
@@ -276,6 +276,7 @@ class Pelota {
   }
 
   colisionDerecha() {
+    rebote.play();
     let pos = this.body.position;
     let posx = pos.x;
     let posy = pos.y;
@@ -292,6 +293,7 @@ class Pelota {
   }
 
   colisionIzquierda() {
+    rebote.play();
     let pos = this.body.position;
     let posx = pos.x;
     let posy = pos.y;
@@ -308,6 +310,7 @@ class Pelota {
   }
 
   colisionArriba() {
+    rebote.play();
     let pos = this.body.position;
     let posx = pos.x;
     let posy = pos.y;

diff --git a/volume.jpg b/volume.jpg