diff --git a/audio/pause.mp3 b/audio/pause.mp3 new file mode 100644 index 0000000..45137b0 Binary files /dev/null and b/audio/pause.mp3 differ diff --git a/audio/play.mp3 b/audio/play.mp3 new file mode 100644 index 0000000..849b54b Binary files /dev/null and b/audio/play.mp3 differ diff --git a/audio/undo-redo.mp3 b/audio/undo-redo.mp3 new file mode 100644 index 0000000..bc2b825 Binary files /dev/null and b/audio/undo-redo.mp3 differ diff --git a/hacker-mode.css b/hacker-mode.css index 103c793..ddd30e7 100644 --- 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 index c9698a9..6427106 100644 --- 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,7 +104,6 @@ function startTimer() { } startTimer(); - function pauseGame() { if (!isBulletMoving) { gamePaused = true; @@ -108,6 +111,7 @@ function pauseGame() { 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 index 8c22182..8a00e41 100644 --- 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 index 220d48c..47e6310 100644 --- 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 index 48c6485..909491b 100644 --- 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; }