Merge pull request #4843 from sivaprasath2004/sivaprasath-closes-issu…

…e-4826 [Enhancement]: Avoider Game Responsive Issue
kunjgit · Jul 18, 2024 · 50924b7 · 50924b7
2 parents 4d49d60 + 5a9c0d7
commit 50924b7
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 2 deletions.
diff --git a/Games/Avoider_Game/app.js b/Games/Avoider_Game/app.js
@@ -69,11 +69,12 @@ function startGame() {
 
 function loop() {
     let stopGame = false;
-
+    // adjust the screen size Logic
+    let cellsCalculate=window.innerWidth<600?6:8
     for (let i = enemyCells.length - 1; i >= 0; i--) {
         // From 29 till it reaches 0
         const cell = enemyCells[i];
-        const nextCell = cells[i + 8];
+        const nextCell = cells[i + cellsCalculate];
         const enemy = cell.children[0];
 
         // Continue and move on

diff --git a/Games/Avoider_Game/assets/Desktop.png b/Games/Avoider_Game/assets/Desktop.png
diff --git a/Games/Avoider_Game/assets/iPad.png b/Games/Avoider_Game/assets/iPad.png
diff --git a/Games/Avoider_Game/assets/mobile.png b/Games/Avoider_Game/assets/mobile.png
diff --git a/Games/Avoider_Game/style.css b/Games/Avoider_Game/style.css
@@ -21,6 +21,7 @@ body {
   width: 90vh;
   background-color: rgba(20, 198, 243, 0.25);
   padding: 2%;
+  max-width: 700px;
   border-radius: 10%;
   box-shadow: 0 0 50px 0 rgba(20, 198, 243, 0.3);
 }
@@ -116,4 +117,9 @@ hr {
 
 .author a:hover {
   text-decoration: underline;
+}
+@media (max-width:600px) {
+  .container{width:95% !important;}
+  .grid{grid-template-columns: repeat(6, 40px) !important;}
+  .cell{height:40px !important;}
 }