Difficulty Level Options Added (#252)

Rakesh9100 · Feb 6, 2024 · d6bf95a · d6bf95a
1 parent 7e6804a
commit d6bf95a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 15 deletions.
diff --git a/assets/main.css b/assets/main.css
@@ -1344,7 +1344,7 @@ h1 {
     }
 
     #gameplayTime {
-        height: 54vh;
+        height: 80vh;
     }
 
     #gameplayTime div button {
@@ -1669,7 +1669,7 @@ h1 {
 }
 
 #gameplayTime {
-    background: rgb(249, 249, 202);
+    background: rgb(249,249,202);
     background: radial-gradient(circle, rgb(230, 252, 255) 26%, rgb(112, 245, 240) 100%);
     border-width: 10px;
     border-style: solid;
@@ -1685,12 +1685,12 @@ 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;
     /* animation-name: scaleMenu;*/
-    transform: scale(1);
+    transform: scale(1); 
     border-radius: 20px;
 }
 

diff --git a/assets/main.html b/assets/main.html
@@ -514,9 +514,19 @@ <h3 id="score" class="score">Score: 0</h3>
         <div id="gameplayTime" class="pqr">
             <b>Howdy, partner! How many hours of rootin' tootin' gameplay have you clocked up on this game?</b>
             <div id="time-range-val" class="changable-text">2 mins 45 sec</div>
+            <br>
             <input type="range" max="300" min="30" id="time-range" style="width: 30vw;" onchange="set_time_range_val()"
                 onmousemove="set_time_range_val()" ontouchmove="set_time_range_val()">
-            <div style="position: relative;">
+
+                <br><br>
+                <!--Difficulty mode options added -->
+                <h2>Select Your Preferred Difficulty</h2>
+                <div style="display: flex; margin-bottom: 10px;"><input type="radio" name="mode" id="easy" value="1" checked><label for="easy"> Easy</label></div>
+                <div style="display: flex; margin-bottom: 10px;"><input type="radio" name="mode" id="medium" value="2"><label for="medium"> Medium</label></div>
+                <div style="display: flex; margin-bottom: 10px;"><input type="radio" name="mode" id="hard" value="3"><label for="hard"> Hard</label></div>
+                <br><br>
+
+                <div style="position: relative;">
                 <button id="start-btn-time" class="btn2" onclick="closeGameplayDialog()">Start 🎮</button>
             </div>
         </div>
@@ -554,4 +564,4 @@ <h3 id="score" class="score">Score: 0</h3>
 
 </body>
 
-</html>
+</html>
diff --git a/assets/main.js b/assets/main.js
@@ -128,10 +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() {
@@ -370,6 +374,26 @@ function chooseGameplayTime() {
 }
 
 function closeGameplayDialog() {
+
+    //Taking the value from difficulity options
+    var ele = document.getElementsByName('mode');
+    var val;
+    for (i = 0; i < ele.length; i++) {
+        if (ele[i].checked)
+            val = ele[i].value;
+    }
+
+    //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;
     setTimeout(createEdible, 1000);
@@ -504,7 +528,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++;
         }
@@ -609,12 +633,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 ----------------