Merge pull request #1666 from shubhisingh184/main

[ADD]: AVOIDER GAME

Games/Avoider_Game/README.md

@@ -0,0 +1,38 @@
+# **Avoider Game** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- Avoider is a game, where you must avoid other attacking balls of different colors (red) in order to protect your own player ball(blue). You just have to manage to save your player ball (blue) by avoiding other balls...Try it out now!!!
+
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+
+- The speed of the game eventually increases after certain points, and you have to speed up your game to match that level.
+- After successfully avoiding each attacking ball, you get one point.
+- Points will get reflected on the scoreboard.
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- Press [<] or [>] to start the game.
+-  Press Left [←] or Right [→] to move the player.
+- You got a popup message with your score, at the end of each game.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![image](../../assets/images/Avoider_Game.png)
+
+<br>
+
+## **Working video 📹**
+<!-- add your working video over here -->
+https://drive.google.com/file/d/1wPrUVZndwtAdnHo-egYXF-WGdoiDvrwE/view?usp=sharing

Games/Avoider_Game/app.js

@@ -0,0 +1,101 @@
+const cells = Array.from(document.querySelectorAll('.cell'));
+
+// Gives first 30 cells of tha gamw
+const enemyCells = cells.slice(0, 30);
+// Three bottom cells of the game
+const playerCells = cells.slice(30);
+
+const scoreDisplay = document.querySelector('.score');
+
+let dropCount, speed, score;
+
+// Minimum speed
+let speedLimit = 150
+reset();
+
+document.addEventListener('keydown', e => {
+    if (!dropCount) {
+        startGame();
+    }
+    // Player object
+    const player = document.querySelector('.player');
+
+    // If next cell is part of playerCells - we are good to go
+    if (e.key === 'ArrowRight' && playerCells.includes(player.parentElement.nextElementSibling)) {
+        // Starting at player div, get containing cell, from cell give next element sibling
+        // and from that cell append the child of the player itself
+        player.parentElement.nextElementSibling.appendChild(player);
+    }
+
+    if (e.key === 'ArrowLeft' && playerCells.includes(player.parentElement.previousElementSibling)) {
+        // Starting at player div, get containing cell, from cell give next element sibling
+        // and from that cell append the child of the player itself
+        player.parentElement.previousElementSibling.appendChild(player);
+    }
+
+})
+
+function reset() {
+    // Reset game to default values
+    dropCount = 0;
+    speed = 800;
+    score = 0;
+    scoreDisplay.innerHTML = '0';
+
+    // Clear cells
+    cells.forEach(cell => cell.innerHTML = '')
+
+    playerCells[1].innerHTML = '<div class="player"></div>'
+}
+
+function startGame() {
+    reset();
+    loop();
+}
+
+function loop() {
+    let stopGame = false;
+
+    for (let i = enemyCells.length - 1; i >= 0; i--) {
+        // From 29 till it reaches 0
+        const cell = enemyCells[i];
+        const nextCell = cells[i + 3];
+        const enemy = cell.children[0];
+
+        // Continue and move on
+        if (!enemy) {
+            continue;
+        }
+
+        nextCell.appendChild(enemy);
+
+        // Adding collision code
+        if (playerCells.includes(nextCell)) {
+            if (nextCell.querySelector('.player')) {
+                stopGame = true;
+            } else {
+                score++;
+                speed = Math.max(speedLimit, speed - 25);
+                scoreDisplay.innerHTML = score;
+                enemy.remove();
+            }
+        }
+    }
+
+    // Even drop count, add new enemy
+    if (dropCount % 2 === 0) {
+        // Get random position (array indexes for enemy cells)
+        const position = Math.floor(Math.random() * 3);
+
+        enemyCells[position].innerHTML = '<div class="enemy"></div>'
+    }
+
+    if (stopGame) {
+        alert(`Good job, your score is: ${score}`);
+        reset();
+    } else {
+        dropCount++;
+        setTimeout(loop, speed);
+    }
+
+}

Games/Avoider_Game/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Avoider Game</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+
+    <div class="header">
+        <b>Score:</b> <strong class="score">0</strong>
+    </div>
+
+    <div class='grid'>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+        <div class='cell'></div>
+    </div>
+
+    <div class='helpers'>
+        <p> Press [<] or [>] to start the game.</p>
+        <p> Press Left [←] or Right [→] to move the player. </p>
+        <p> The game will eventually go faster.</p>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>

Games/Avoider_Game/style.css

@@ -0,0 +1,74 @@
+body {
+  top-margin:10px;
+  background: white;
+  font-family: sans-serif;
+  padding: 5px;
+  display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+}
+
+.header {
+  font-size: 20px;
+  padding-bottom: 5px;
+  color: #333;
+  font-family: Georgia, serif;
+ margin-bottom: 10px;
+}
+
+.score{
+  color: red;
+}
+
+.grid {
+  display: inline-grid;
+  grid-template-columns: repeat(3, 30px);
+  padding: 25px;
+  gap: 5px;
+  border: 1px solid #ccc;
+  background: #222;
+}
+
+.cell {
+  height: 30px;
+}
+
+.enemy,
+.player {
+  width: 100%;
+  height: 100%;
+}
+
+.enemy {
+  background: #e46767;
+}
+
+.player {
+  background: #14c6f3;
+}
+
+.helpers{
+  font-weight: bold;
+  color: brown;
+  text-align: center;
+    font-style: oblique;
+    margin-top: 10px;
+}
+
+.helpers p{
+  margin: 5px 0;
+}
+
+.helpers p:first-child:before{
+  content: "👉 ";
+}
+
+.helpers p:nth-child(2):before{
+  content: "🏃‍♂️ ";
+}
+
+.helpers p:last-child:before{
+  content: "🚀 ";
+}
+

README.md

@@ -326,6 +326,8 @@ Also join the discord server for GameZone and start collaborating with others 
 | 221 | [Insect Catch Game](https://github.com/kunjgit/GameZone/tree/main/Games/Insect_Catch_Game)|)
 | 222 | [Carnival_game](https://github.com/kunjgit/GameZone/tree/main/Games/Carnival_game)|
 | 223 | [Make Me Laugh](https://github.com/kunjgit/GameZone/tree/main/Games/Make_Me_Laugh)|
+| 224 | [Avoider_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Avoider_Game)|
+