add more audio

wreeshab · May 31, 2024 · 8592cea · 8592cea
1 parent 770725d
commit 8592cea
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 90 deletions.
diff --git a/audio/pause.mp3 b/audio/pause.mp3
diff --git a/audio/play.mp3 b/audio/play.mp3
diff --git a/audio/undo-redo.mp3 b/audio/undo-redo.mp3
diff --git a/hacker-mode.css b/hacker-mode.css
@@ -72,6 +72,9 @@ h1 {
     justify-content: center;
     margin-top: 5px;
 }
+button:hover:disabled{
+    cursor: not-allowed;
+}
 #control-center-child {
     display: flex;
     justify-content: space-between;

diff --git a/hackerplus.js b/hackerplus.js
@@ -38,11 +38,15 @@ rightBtn.disabled = true;
 leftBtn.disabled = true;
 
 // Sounds
+
 var cannonAudio = new Audio("audio/cannon.mp3");
 var ricochetAudio = new Audio("audio/ricohit.mp3");
 var gameOverAudio = new Audio("audio/gameover.mp3");
 var otherPieces = new Audio("audio/punch.mp3");
 var overallAudio = new Audio("audio/overall.mp3");
+var pauseAudio = new Audio("audio/pause.mp3");
+var playAudio = new Audio("audio/play.mp3");
+
 
 startPieces = randomOpening();
 initialPieces = randomOpening();
@@ -51,7 +55,7 @@ window.addEventListener("click", () => {
   if (!gamePaused && !gameOver) {
     overallAudio.play();
     overallAudio.loop = true;
-    overallAudio.volume = 0.37;
+    overallAudio.volume = 0.2;
   }
 });
 
@@ -100,14 +104,14 @@ function startTimer() {
 }
 
 startTimer();
-
 function pauseGame() {
   if (!isBulletMoving) {
     gamePaused = true;
     clearInterval(timerId); // Stop the timer
     pausePopup.style.visibility = "visible";
     pauseButton.disabled = true;
     overallAudio.pause();
+    pauseAudio.play();
   }
 }
 
@@ -116,11 +120,15 @@ function resumeGame() {
   pausePopup.style.visibility = "hidden";
   pauseButton.disabled = false;
   startTimer(); // Start the timer
-  overallAudio.play();
+  setTimeout(()=>{
+    overallAudio.play();
   overallAudio.loop = true;
-  overallAudio.volume = 0.4;
+  overallAudio.volume = 0.2;
+  },1300)
+  playAudio.play();
 }
 
+
 function resetGame() {
   if (!isBulletMoving) {
     gameOver = false;

diff --git a/script-for-hacker-mode.js b/script-for-hacker-mode.js
@@ -38,17 +38,22 @@ let ricoSwap = false;
 rightBtn.disabled = true;
 leftBtn.disabled = true;
 
+
 var cannonAudio = new Audio("audio/cannon.mp3");
 var ricochetAudio = new Audio("audio/ricohit.mp3");
 var gameOverAudio = new Audio("audio/gameover.mp3");
 var otherPieces = new Audio("audio/punch.mp3");
 var overallAudio = new Audio("audio/overall.mp3");
+var pauseAudio = new Audio("audio/pause.mp3");
+var playAudio = new Audio("audio/play.mp3");
+
+
 
 window.addEventListener("click", () => {
   if (!gamePaused && !gameOver) {
     overallAudio.play();
     overallAudio.loop = true;
-    overallAudio.volume = 0.4;
+    overallAudio.volume = 0.2;
   }
 });
 
@@ -104,6 +109,7 @@ function pauseGame() {
     pausePopup.style.visibility = "visible";
     pauseButton.disabled = true;
     overallAudio.pause();
+    pauseAudio.play();
   }
 }
 
@@ -112,9 +118,12 @@ function resumeGame() {
   pausePopup.style.visibility = "hidden";
   pauseButton.disabled = false;
   startTimer(); // Start the timer
-  overallAudio.play();
+  setTimeout(()=>{
+    overallAudio.play();
   overallAudio.loop = true;
-  overallAudio.volume = 0.4;
+  overallAudio.volume = 0.2;
+  },1300)
+  playAudio.play();
 }
 
 function resetGame() {
@@ -281,7 +290,7 @@ playAgainBtn.addEventListener("click", playAgain);
 undoButton.addEventListener("click", undoLastMove);
 redoButton.addEventListener("click", redoLastMove);
 swapButton.addEventListener("click", swapRicochet);
-
+swapButton.disabled = true;
 function swapRicochet() {
   ricoSwap = true;
   if (selectedPiece.pieceName === "Ricochet") {
@@ -377,6 +386,7 @@ function moveForSwap(row, column, newRow, newColumn) {
   },7) // really dont know how setTimeout solves the bug, but it does so yeh! :)
   // changePlayer();
   ricoSwap = false;
+  swapButton.disabled = true;
 }
 
 // ---------------------------------------- PRIMARY EVENT LISTENER-----------------------------------------------
@@ -405,6 +415,9 @@ gameBoard.addEventListener("click", (e) => {
                   piece === topSemiRicochet ||
                   piece === bottomSemiRicochet
                 ) {
+                  if(piece === topRicochet || piece === bottomRicochet){
+                    swapButton.disabled = false;
+                  }
                   highlightRicochetPieces(row, column);
                 } else {
                   highlightOtherPieces(row, column);

diff --git a/script.js b/script.js
@@ -4,15 +4,15 @@ function createRaindrop() {
   const raindrop = document.createElement("div");
   raindrop.classList.add("raindrop");
   raindrop.style.left = `${Math.random() * 100}vw`;
-  raindrop.style.animationDuration = `${Math.random() * 0.5 + 3}s`;
+  raindrop.style.animationDuration = `${Math.random() * 0.5 + 10}s`;
   raindrop.style.opacity = `${Math.random()}`;
-  raindrop.style.height = `${Math.random() * 7 + 3}vh`;
+  raindrop.style.height = `${Math.random() * 7 + 20}vh`;
   rainContainer.appendChild(raindrop);
 
   // Remove raindrop after animation is complete to prevent too many elements in the DOM
   setTimeout(() => {
     raindrop.remove();
-  }, 10000);
+  }, 40000);
 }
 
-setInterval(createRaindrop, 30);
+setInterval(createRaindrop, 100);
diff --git a/style.css b/style.css
@@ -1,129 +1,129 @@
-@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Poppins&family=Press+Start+2P&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Poppins&family=Press+Start+2P&display=swap");
 
 * {
-    margin: 0;
-    padding: 0;
-    font-family: "Press Start 2P", system-ui;
-    color: #29a314;
+  margin: 0;
+  padding: 0;
+  font-family: "Press Start 2P", system-ui;
+  color: #29a314;
 }
 
 body {
-    height: 100vh;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: #151514;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #151514;
 }
 
 .mode-container {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    width: 80%;
-    margin: 10px 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 80%;
+  margin: 10px 0;
 }
 
 h1 {
-    font-size: 50px;
-    text-shadow: 0 0 20px #29a314;
+  font-size: 50px;
+  text-shadow: 0 0 20px #29a314;
 }
 
 h3 {
-    font-size: 20px;
-    text-shadow: 0 0 20px #29a314;
+  font-size: 20px;
+  text-shadow: 0 0 20px #29a314;
 }
 
 h2 {
-    font-size: 25px;
-    text-shadow: 0 0 20px #29a314;
-
+  font-size: 25px;
+  text-shadow: 0 0 20px #29a314;
 }
 
 .modes {
-    width: 26%;
-    height: 500px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-radius: 20px;
-    border: 3px #29a314 solid;
-    box-shadow: 0 0 20px #29a314;
-    min-width: 250px;
-    margin: 10px;
-    background-color: #151514;
-
+  width: 26%;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  border: 3px #29a314 solid;
+  box-shadow: 0 0 20px #29a314;
+  min-width: 250px;
+  margin: 10px;
+  background-color: #151514;
 }
 
 .modes:hover {
-    box-shadow: 0 0 20px #151514;
-    scale: 1.1;
-    transition: 0.5s;
+  box-shadow: 0 0 20px #151514;
+  scale: 1.1;
+  transition: 0.5s;
 }
 
 img {
-    width: 90%;
-    margin: 30px 0;
+  width: 90%;
+  margin: 30px 0;
 }
 
 h3 {
-    margin: 100px 20px 40px;
+  margin: 100px 20px 40px;
 }
 
 button {
-    background-color: #29a314;
-    color: #151514;
-    height: 50px;
-    width: 150px;
-    border-radius: 40px;
-    border: 3px #151514 solid;
-    box-shadow: 0 0 20px #29a314;
-    margin: 10px;
+  background-color: #29a314;
+  color: #151514;
+  height: 50px;
+  width: 150px;
+  border-radius: 40px;
+  border: 3px #151514 solid;
+  box-shadow: 0 0 20px #29a314;
+  margin: 10px;
 }
 
 button:hover {
-    background-color: #151514;
-    color: #29a314;
-    border: 3px #29a314 solid;
-    scale: 0.8;
-    transition: 0.5s;
+  background-color: #151514;
+  color: #29a314;
+  border: 3px #29a314 solid;
+  scale: 0.8;
+  transition: 0.5s;
 }
 
 button:active {
-    background-color: #29a314;
-    color: #151514;
-    border: 3px #151514 solid;
+  background-color: #29a314;
+  color: #151514;
+  border: 3px #151514 solid;
 }
 
 .rain-container {
-    position: relative;
-    overflow: hidden;
-    z-index: -5;
+  position: relative;
+  overflow: hidden;
+  z-index: -5;
 }
 
 .raindrop {
-    position: absolute;
-    bottom: 100%;
-    width: 4px;
-    background: #29a314;
-    animation: fall linear infinite;
-    border-radius: 0 0 20px 20px;
-    z-index: -4;
-    ;
+  position: absolute;
+  bottom: 100%;
+  width: 4px;
+  background: #29a314;
+  backdrop-filter: blur(10px);
+  border-radius: 0 0 20px 20px;
+  animation: fall linear infinite;
+  border-radius: 0 0 20px 20px;
+  z-index: -4;
+  box-shadow: 0 0 40px #29a314;
 }
 
 @keyframes fall {
-    to {
-        transform: translateY(100vh);
-    }
+  to {
+    transform: translateY(100vh);
+  }
 }
 
-footer{
-    position: absolute;
-    bottom: 2%;
+footer {
+  position: absolute;
+  bottom: 2%;
 }
-h4{
-    font-size: 1rem;
+h4 {
+  font-size: 1rem;
 }