From bb9068028991e01b0ab9bebe07273ed2e35e603d Mon Sep 17 00:00:00 2001 From: Surajit Maity Date: Thu, 1 Feb 2024 14:27:03 +0530 Subject: [PATCH 1/2] Difficulity Mode Added --- assets/main.css | 4 +-- assets/main.html | 11 ++++++-- assets/main.js | 38 +++++++++++++++++++-------- assets/style.scss | 65 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 assets/style.scss diff --git a/assets/main.css b/assets/main.css index 26c5c70..e7d78d3 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1196,7 +1196,7 @@ h1 { padding: 0px; } #gameplayTime { - height: 54vh; + height: 80vh; } #gameplayTime div button { width: 7rem; @@ -1471,7 +1471,7 @@ h1 { justify-content: center; width: 50vw; margin-bottom: 10rem; - height: 40vh; + margin-top: 15vh; flex-direction: column; justify-content: space-evenly; transition: all 0.5s ease-in-out; diff --git a/assets/main.html b/assets/main.html index 915c970..c03218b 100644 --- a/assets/main.html +++ b/assets/main.html @@ -14,8 +14,9 @@ - - + + +
@@ -499,6 +500,12 @@

Score: 0

Howdy, partner! How many hours of rootin' tootin' gameplay have you clocked up on this game?
2 mins 45 sec
+

+

Select Your Preferred Difficulty

+
+
+
+

diff --git a/assets/main.js b/assets/main.js index 5195c09..87b8cf3 100644 --- a/assets/main.js +++ b/assets/main.js @@ -128,11 +128,14 @@ setInterval(() => { // -------------- bomb management section ---------------- var totalBombs = 0; // total number of bombs on screen at a time -var MAX_BOMBS = 7; // maximum number of bombs that can be on screen -var MAX_BOMB_LIFE = 5; // maximum life of a bomb -var MAX_LIVES = 3; // maximum number of lives -var lives = MAX_LIVES; // current number of lives - +var MAX_BOMBS; // maximum number of bombs that can be on screen +var MAX_BOMB_LIFE; // maximum life of a bomb +var MAX_LIVES; // maximum number of lives +var lives; // current number of lives +var prob; //probublity of creating a bomb +var timegap_edible; +var timegap_rotten; +var prob_rotten; // create a new bomb function createBomb() { const bomb = document.createElement('div'); @@ -370,6 +373,21 @@ function chooseGameplayTime() { } function closeGameplayDialog() { + var ele = document.getElementsByName('mode'); + var val; + for (i = 0; i < ele.length; i++) { + if (ele[i].checked) + val=ele[i].value; + } +MAX_BOMBS=7*val; // maximum number of bombs that can be on screen +MAX_BOMB_LIFE=5*val; // maximum life of a bomb +MAX_LIVES=(3-val)+1; // maximum number of lives +prob=0.3*val; //probublity of creating a bomb +lives=MAX_LIVES; +timegap_edible=(1000/val); +timegap_rotten=(1500/val); +prob_rotten=0.3*val; + isRunning = 1; seconds = parseInt(document.getElementById("time-range").value) - 1; setTimeout(createEdible, 1000); @@ -485,7 +503,7 @@ function decreaseTime() { // -------------- bomb management section ---------------- if (totalBombs < MAX_BOMBS) { // check if there are already more than enough bombs present on screen - if (Math.random() < 0.5) { // randomly decide whether to create a bomb or not + if (Math.random() < prob) { // randomly decide whether to create a bomb or not createBomb(); totalBombs++; } @@ -591,12 +609,12 @@ function catchEdible() { } function addEdibles() { - setTimeout(createEdible, 1000); + setTimeout(createEdible, timegap_edible); // add rotten edibles also - if (Math.random() < 0.3) - setTimeout(createRottenEdible, 1500); + if (Math.random() < prob_rotten) + setTimeout(createRottenEdible, timegap_rotten); else - setTimeout(createEdible, 1500); + setTimeout(createEdible, timegap_rotten); } // -------------- edible management section ---------------- diff --git a/assets/style.scss b/assets/style.scss new file mode 100644 index 0000000..907aebe --- /dev/null +++ b/assets/style.scss @@ -0,0 +1,65 @@ +*, +*:after, +*:before { + box-sizing: border-box; +} + +$primary-color: #00005c; // Change color here. C'mon, try it! +$text-color: mix(#000, $primary-color, 64%); + +.form-mode { + display: flex; + flex-wrap: wrap; + flex-direction: column; +} + +.label-mode { + display: flex; + cursor: pointer; + font-weight: 500; + position: relative; + overflow: hidden; + margin-bottom: 0.375em; + /* Accessible outline */ + /* Remove comment to use */ + /* + &:focus-within { + outline: .125em solid $primary-color; + } + */ +} + +.input-mode { + &:checked+span { + background-color: mix(#fff, $primary-color, 84%); + + &:before { + box-shadow: inset 0 0 0 0.4375em $primary-color; + } + } +} + +.span-mode { + display: flex; + align-items: center; + padding: 0.375em 0.75em 0.375em 0.375em; + border-radius: 99em; // or something higher... + transition: 0.25s ease; + + &:hover { + background-color: mix(#fff, $primary-color, 84%); + } + + &:before { + display: flex; + flex-shrink: 0; + content: ""; + background-color: #fff; + width: 1.5em; + height: 1.5em; + border-radius: 50%; + margin-right: 0.375em; + transition: 0.25s ease; + box-shadow: inset 0 0 0 0.125em $primary-color; + } +} \ No newline at end of file From 72d918e8663c6f223c6d7ab18fe6107e9381ef7b Mon Sep 17 00:00:00 2001 From: Surajit Maity Date: Thu, 1 Feb 2024 14:39:08 +0530 Subject: [PATCH 2/2] commented --- assets/main.html | 1 + assets/main.js | 179 ++++++++++++++++++++++++----------------------- 2 files changed, 92 insertions(+), 88 deletions(-) diff --git a/assets/main.html b/assets/main.html index c03218b..2c7133d 100644 --- a/assets/main.html +++ b/assets/main.html @@ -501,6 +501,7 @@

Score: 0

2 mins 45 sec


+

Select Your Preferred Difficulty

diff --git a/assets/main.js b/assets/main.js index 87b8cf3..5e48b48 100644 --- a/assets/main.js +++ b/assets/main.js @@ -44,7 +44,7 @@ window.addEventListener('mousemove', function (e) { isCursorOnElement(e, instructionsDiv1) || isCursorOnElement(e, instructionsDiv2) || isCursorOnElement(e, gameplayTimeDiv) || - isCursorOnElement(e, pauseBoxDiv) || + isCursorOnElement(e, pauseBoxDiv) || isCursorOnElement(e, gameOverDiv) ) { cursordivdiv.forEach(function (element) { @@ -70,7 +70,7 @@ const bgm1 = new Audio("sounds/bgm1.mp3"); bgm1.volume = 0.6; const bgm2 = new Audio("sounds/bgm2.mp3"); bgm2.volume = 0.6; -const game_over_audio = new Audio("sounds/gameOver.mp3"); +const game_over_audio = new Audio("sounds/gameOver.mp3"); const choose_edible = new Audio("sounds/start.mp3"); const click_edible_audio = new Audio("sounds/edible.mp3"); const click_bomb_audio = new Audio("sounds/explosion.wav"); @@ -89,7 +89,7 @@ var isRunning = -1; //this defines the state of game running or not // game variables // Add an event listener to the window to handle autoplay restrictions -window.addEventListener('click', function() { +window.addEventListener('click', function () { if (bgm1.paused && bgm2.paused) { // Start playing the background music only if it's not already playing bgm1.play(); @@ -138,69 +138,69 @@ var timegap_rotten; var prob_rotten; // create a new bomb function createBomb() { - const bomb = document.createElement('div'); - bomb.classList.add('bomb'); - bomb.classList.add('bomb-live'); - const { x, y } = getRandomLocation(); - bomb.style.top = `${y}px`; - bomb.style.left = `${x}px`; - bomb.innerHTML = `💣

${1 + Math.floor(Math.random() * MAX_BOMB_LIFE)}

`; - bomb.addEventListener('click', explodeBomb); - game_container.appendChild(bomb); + const bomb = document.createElement('div'); + bomb.classList.add('bomb'); + bomb.classList.add('bomb-live'); + const { x, y } = getRandomLocation(); + bomb.style.top = `${y}px`; + bomb.style.left = `${x}px`; + bomb.innerHTML = `💣

${1 + Math.floor(Math.random() * MAX_BOMB_LIFE)}

`; + bomb.addEventListener('click', explodeBomb); + game_container.appendChild(bomb); } // create multiple bombs function createBombs() { - for (let i = 0; i < MAX_BOMBS; i++) { - createBomb(); - totalBombs++; - } + for (let i = 0; i < MAX_BOMBS; i++) { + createBomb(); + totalBombs++; + } } // explode an existing bomb function explodeBomb() { - if (isRunning !== 1) return; - if (lives <= 0) return; - if (this.classList.contains('dead')) return; - this.innerHTML = `💥`; - this.classList.remove('bomb-live'); - this.classList.add('dead'); - setTimeout(() => { - this.remove(); - totalBombs--; - }, 2000); - lives--; - if (click_bomb_audio.currentTime > 0) { - click_bomb_audio.pause(); - click_bomb_audio.currentTime = 0; - } - click_bomb_audio.play(); + if (isRunning !== 1) return; + if (lives <= 0) return; + if (this.classList.contains('dead')) return; + this.innerHTML = `💥`; + this.classList.remove('bomb-live'); + this.classList.add('dead'); + setTimeout(() => { + this.remove(); + totalBombs--; + }, 2000); + lives--; + if (click_bomb_audio.currentTime > 0) { + click_bomb_audio.pause(); + click_bomb_audio.currentTime = 0; + } + click_bomb_audio.play(); } // check if a bomb's life is over function checkBombLife() { - const bombs = document.getElementsByClassName('bomb-live'); - for (let i = 0; i < bombs.length; i++) { - const bomb = bombs[i]; - const life = bomb.querySelector('p'); - if (life.innerText <= 0) { - bomb.classList.add('dead'); - bomb.classList.remove('bomb-live'); - setTimeout(() => { - bomb.remove(); - totalBombs--; - }, 2000); - } else { - life.innerText--; - } + const bombs = document.getElementsByClassName('bomb-live'); + for (let i = 0; i < bombs.length; i++) { + const bomb = bombs[i]; + const life = bomb.querySelector('p'); + if (life.innerText <= 0) { + bomb.classList.add('dead'); + bomb.classList.remove('bomb-live'); + setTimeout(() => { + bomb.remove(); + totalBombs--; + }, 2000); + } else { + life.innerText--; } + } } function removeBombs() { - const createdBombs = document.getElementsByClassName('bomb'); - while (createdBombs.length > 0) { - createdBombs[0].parentNode.removeChild(createdBombs[0]); - } + const createdBombs = document.getElementsByClassName('bomb'); + while (createdBombs.length > 0) { + createdBombs[0].parentNode.removeChild(createdBombs[0]); + } } // -------------- bomb management section ---------------- @@ -303,7 +303,7 @@ dropArea.addEventListener("drop", (event) => { }); function uploadFile(file) { - const fileName = typeof file === "string"?file:file.name; + const fileName = typeof file === "string" ? file : file.name; let uploadArea = document.querySelector(".uploaded-area"); uploadArea.style.display = "block"; uploadArea.innerHTML = ` @@ -311,7 +311,7 @@ function uploadFile(file) {
preview
-

${fileName.slice(0,fileName.length>=21?21:fileName.length)+(fileName.length>=21?'...':'')} • Uploaded

+

${fileName.slice(0, fileName.length >= 21 ? 21 : fileName.length) + (fileName.length >= 21 ? '...' : '')} • Uploaded

@@ -349,15 +349,15 @@ document.querySelector("#upload-btn").addEventListener("click", () => { document.querySelectorAll(".choose-btn").forEach(button => { button.addEventListener("click", () => { - const img = button.querySelector("img"); - const src = img.getAttribute("src"); - const alt = img.getAttribute("alt"); - selected_edible = { src, alt }; - screens[1].classList.add("up1"); - game_container.style.height = "100vh"; - startGame(); - displayChange(); - choose_edible.play(); + const img = button.querySelector("img"); + const src = img.getAttribute("src"); + const alt = img.getAttribute("alt"); + selected_edible = { src, alt }; + screens[1].classList.add("up1"); + game_container.style.height = "100vh"; + startGame(); + displayChange(); + choose_edible.play(); }); }); @@ -366,27 +366,31 @@ document.querySelectorAll(".choose-btn").forEach(button => { function chooseGameplayTime() { document.getElementById("time").style.display = "none"; document.getElementById("gameplayTime").style.display = "flex"; - document.getElementById("time-range").addEventListener("change", function (e) { + document.getElementById("time-range").addEventListener("change", function (e) { seconds = parseInt(document.getElementById("time-range").value) - 1; return seconds; }); } function closeGameplayDialog() { + + //Taking the value from difficulity options var ele = document.getElementsByName('mode'); - var val; + var val; for (i = 0; i < ele.length; i++) { - if (ele[i].checked) - val=ele[i].value; + if (ele[i].checked) + val = ele[i].value; } -MAX_BOMBS=7*val; // maximum number of bombs that can be on screen -MAX_BOMB_LIFE=5*val; // maximum life of a bomb -MAX_LIVES=(3-val)+1; // maximum number of lives -prob=0.3*val; //probublity of creating a bomb -lives=MAX_LIVES; -timegap_edible=(1000/val); -timegap_rotten=(1500/val); -prob_rotten=0.3*val; + + //changed the values accordingly + MAX_BOMBS = 7 * val; // maximum number of bombs that can be on screen + MAX_BOMB_LIFE = 5 * val; // maximum life of a bomb + MAX_LIVES = (3 - val) + 1; // maximum number of lives + prob = 0.3 * val; //probublity of creating a bomb + lives = MAX_LIVES; //max number of lives + timegap_edible = (1000 / val); //time between two edible + timegap_rotten = (1500 / val); //time gap betwen two rotten + prob_rotten = 0.3 * val; //probablity of rotten creating isRunning = 1; seconds = parseInt(document.getElementById("time-range").value) - 1; @@ -441,7 +445,7 @@ function closeInstructions() { document.getElementById("instructions").style.display = "none"; document.getElementById("instructions2").style.display = "none"; document.getElementById("instructions3").style.display = "none"; - if(isRunning == 0) + if (isRunning == 0) isRunning = 1; } @@ -467,7 +471,7 @@ function gameOver() { bgm1.currentTime = 0; bgm2.pause(); bgm2.currentTime = 0; - if(game_over_audio.currentTime > 0) { + if (game_over_audio.currentTime > 0) { game_over_audio.pause(); game_over_audio.currentTime = 0; } @@ -492,8 +496,8 @@ function decreaseTime() { // ---------- displaying total lives ------------- let _lives = ""; - for(let i = 1; i <= MAX_LIVES; i++) { - if(i <= lives) + for (let i = 1; i <= MAX_LIVES; i++) { + if (i <= lives) _lives += '❤️' else _lives += '🖤' @@ -504,8 +508,8 @@ function decreaseTime() { // -------------- bomb management section ---------------- if (totalBombs < MAX_BOMBS) { // check if there are already more than enough bombs present on screen if (Math.random() < prob) { // randomly decide whether to create a bomb or not - createBomb(); - totalBombs++; + createBomb(); + totalBombs++; } } // -------------- bomb management section ---------------- @@ -513,7 +517,7 @@ function decreaseTime() { // -------------- game over section ---------------- if ((s == 0 && m == 0) || lives == 0) { gameOver(); - // -------------- game over section ---------------- + // -------------- game over section ---------------- } else { seconds--; // -------------- bomb management section ---------------- @@ -546,7 +550,7 @@ function catchRottenEdible() { this.innerHTML = `🦠`; this.classList.add("caught"); setTimeout(() => this.remove(), 2000); - if(click_rotten_audio.currentTime > 0) { + if (click_rotten_audio.currentTime > 0) { click_rotten_audio.pause(); click_rotten_audio.currentTime = 0; } @@ -577,9 +581,8 @@ function createEdible() { const { x, y } = getRandomLocation(); edible.style.top = `${y}px`; edible.style.left = `${x}px`; - edible.innerHTML = `${ - selected_edible.alt - }`; + edible.innerHTML = `${selected_edible.alt + }`; edible.addEventListener("click", catchEdible); game_container.appendChild(edible); @@ -600,7 +603,7 @@ function catchEdible() { this.classList.add("caught"); setTimeout(() => this.remove(), 2000); addEdibles(); - if(click_edible_audio.currentTime > 0) { + if (click_edible_audio.currentTime > 0) { click_edible_audio.pause(); click_edible_audio.currentTime = 0; } @@ -707,7 +710,7 @@ themeicon.onclick = function () { } }; var volumeicon = document.getElementById("volume-off-icon"); -volumeicon.onclick = function() { +volumeicon.onclick = function () { if (document.getElementById("volume-off-icon").classList.contains("fa-volume-up")) { bgm1.volume = 0; bgm2.volume = 0; @@ -739,13 +742,13 @@ function set_time_range_val() { var time = document.getElementById("time-range").value; time = parseInt(time); if (time % 60 == 0) { - if(time == 60) + if (time == 60) document.getElementById("time-range-val").innerHTML = "1 min"; else document.getElementById("time-range-val").innerHTML = time / 60 + " mins"; } else { - if(time < 60) { + if (time < 60) { document.getElementById("time-range-val").innerHTML = time + " secs"; return; }