Merge pull request kunjgit#2218 from Avdhesh-Varshney/brainGame

[GSSoC'23] Brain Burst Game Completed
Tharun-nennavath · Jul 5, 2023 · 0bd1efc · 0bd1efc
2 parents 9caff83 + bf0eb78
commit 0bd1efc
Show file tree

Hide file tree

Showing 7 changed files with 344 additions and 1 deletion.
diff --git a/Games/Brain_Burst_Game/README.md b/Games/Brain_Burst_Game/README.md
@@ -0,0 +1,42 @@
+# **BRAIN BURST GAME** 
+
+---
+
+<br>
+
+## **Description 📃** 
+- This project is built on a basic web tech stacks such as HTML, CSS and Javascript.
+- This is a single-player game.
+
+<br>
+
+## **Functionalities 🎮** 
+- Select the difficulty level according to your convenience.
+- Click on the boxes that are formed randomly.
+- If player is able to click before go away from the position, score will increases.
+- Otherwise, score remains same.
+
+<br>
+
+## ** Additional Features **
+- Implementing a graphical user interface (GUI) for a more interactive experience.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![image](../../assets/images/Brain_Burst_Game.png)
+
+<br>
+
+## **Working video 📹**
+https://github.com/kunjgit/GameZone/assets/114330097/115588cb-c53b-4663-8d68-2d1b5a3ed205
+
+<br>
+
+## **Creator 👦**
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
diff --git a/Games/Brain_Burst_Game/favicon.ico b/Games/Brain_Burst_Game/favicon.ico
diff --git a/Games/Brain_Burst_Game/index.html b/Games/Brain_Burst_Game/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <!-- Logo of the game -->
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+
+    <!-- Title of the game -->
+    <title>Brain Burst Game</title>
+
+    <!-- Stylesheet of the game -->
+    <link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+
+<body style="background-color:lightgray;">
+
+    <!-- Game section -->
+    <section class="game__wrapper">
+        <!-- Main heading of the game -->
+        <p class="game__wrapper--title">Brain Burst Game</p>
+
+        <!-- Full box of the game -->
+        <div class="game__wrapper--pitch">
+        </div>
+
+        <!-- Score board of the game -->
+        <p class="game__wrapper--score"></p>
+
+        <!-- Difficulties modes of the game -->
+        <div class="game__wrapper--mode">
+            <button class="game__mode--easy">EASY</button>
+            <button class="game__mode--medium">MEDIUM</button>
+            <button class="game__mode--hard">HARD</button>
+        </div>
+    </section>
+
+    <!-- Footer of the game -->
+    <footer class="game__footer">
+        <p class="game__footer--info">Created By <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a></p>
+    </footer>
+
+    <!-- Main javascript file -->
+    <script src="main.js"></script>
+
+</body>
+
+</html>
diff --git a/Games/Brain_Burst_Game/main.js b/Games/Brain_Burst_Game/main.js
@@ -0,0 +1,93 @@
+// Initialising variables
+const scoreText = document.querySelector('.game__wrapper--score');
+const gameWrapper = document.querySelector('.game__wrapper--pitch');
+
+// Declaring variables
+let gameScore = 0;
+let defaultMode = 700;
+let boxNumbers = 6;
+let boxName = "pitch__block";
+let lightClass = "light";
+scoreText.textContent = `Score: ${gameScore}`
+
+// Difficulty Levels
+const easyLevel = document.querySelector('.game__mode--easy')
+const mediumLevel = document.querySelector('.game__mode--medium')
+const hardLevel = document.querySelector('.game__mode--hard')
+
+// Easy level
+const easyChange = () => {
+    localStorage.setItem('level', 'easy')
+    window.location.reload();
+}
+
+// Medium level
+const mediumChange = () => {
+    localStorage.setItem('level', 'medium')
+    window.location.reload();
+}
+
+// Hard level
+const hardChange = () => {
+    localStorage.setItem('level', 'hard')
+    window.location.reload();
+}
+
+// Adding event listener on easy, medium and hard levels
+easyLevel.addEventListener('click', easyChange);
+mediumLevel.addEventListener('click', mediumChange);
+hardLevel.addEventListener('click', hardChange);
+
+// Different setting for different levels
+if (localStorage.getItem('level') == 'medium') {
+    defaultMode = 550;
+    boxNumbers = 12;
+    lightClass = "light__medium";
+    boxName = "pitch__block--medium";
+} else if (localStorage.getItem('level') == 'hard') {
+    defaultMode = 420;
+    boxNumbers = 30;
+    lightClass = "light__hard";
+    boxName = "pitch__block--hard";
+} else {
+    defaultMode = 700;
+}
+
+// Create Boxes
+for (i = 0; i < boxNumbers; i++) {
+    const oneBoxEasy = document.createElement('div');
+    oneBoxEasy.classList.add(boxName);
+    gameWrapper.appendChild(oneBoxEasy);
+}
+
+const gameBoxes = document.querySelectorAll(`.${boxName}`);
+
+//Random Box Generator
+const randomIndex = () => {
+    const randomNumber = Math.floor(Math.random() * gameBoxes.length);
+    gameBoxes[randomNumber].classList.add(lightClass);
+}
+
+//Hide Box after time
+const hideBox = () => {
+    gameBoxes.forEach(function (clearBox) {
+        clearBox.classList.remove(lightClass);
+    })
+};
+setInterval(hideBox, defaultMode);
+
+//Score and logic
+gameBoxes.forEach(function (gameBox) {
+    gameBox.addEventListener('click', function () {
+        if (gameBox.classList.contains(lightClass)) {
+            gameBox.classList.remove(lightClass);
+            gameScore += 1;
+            scoreText.textContent = `Score: ${gameScore}`
+        } else {
+            gameScore += 0;
+        }
+
+    })
+});
+
+setInterval(randomIndex, defaultMode);
diff --git a/Games/Brain_Burst_Game/style.css b/Games/Brain_Burst_Game/style.css
@@ -0,0 +1,156 @@
+/* Default settings */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+}
+
+/* Game Box */
+.game__wrapper {
+    position: absolute;
+    left: 50%;
+    top: 40px;
+    transform: translateX(-50%);
+    height: 640px;
+    width: 330px;
+}
+
+.game__wrapper--title {
+    letter-spacing: 3px;
+    word-spacing: 6px;
+    font-weight: 600;
+    color: rgb(138, 100, 20);
+    padding-bottom: 12px;
+    text-align: center;
+    font-size: 26px;
+}
+
+.game__wrapper--pitch {
+    height: 495px;
+    width: 330px;
+    background-color: rgba(61, 100, 350, 0.48);
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* Pitch Blocks styling */
+.pitch__block {
+    height: 165px;
+    width: 165px;
+    transition: .1s;
+}
+
+.pitch__block--medium {
+    height: 110px;
+    width: 110px;
+}
+
+.pitch__block--hard {
+    height: 68px;
+    width: 66px;
+}
+
+.light {
+    background-color: rgba(67, 168, 89, 0.808);
+}
+
+.light__medium {
+    background-color: rgb(226, 188, 82);
+}
+
+.light__hard {
+    background-color: rgb(211, 60, 55);
+}
+
+/* Game Score Styling */
+.game__wrapper--score {
+    text-align: center;
+    font-size: 18px;
+    line-height: 60px;
+}
+
+.game__wrapper--mode {
+    display: flex;
+    justify-content: space-around;
+    align-content: center;
+    width: 100%;
+}
+
+.game__wrapper--mode button {
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 18px;
+    color: white;
+    outline: none;
+    border: none;
+    transition: .2s;
+    height: 40px;
+    width: 90px;
+}
+
+.game__mode--easy {
+    background-color: rgb(64, 194, 64);
+}
+
+.game__mode--medium {
+    background-color: rgb(240, 168, 34);
+}
+
+.game__mode--hard {
+    background-color: rgb(209, 53, 53);
+}
+
+/* Styling the footer section */
+.game__footer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 60px;
+    width: 100%;
+    background-color: rgba(190, 190, 190, 0.274);
+}
+
+.game__footer--info {
+    color: rgb(92, 92, 92);
+}
+
+a {
+    text-decoration: none;
+    color: rgb(92, 92, 92);
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Adding Responsiveness to the game */
+@media (min-width: 860px) {
+    .game__footer {
+        padding-left: 30%;
+        padding-right: 30%;
+    }
+}
+
+@media (min-width: 1660px) {
+    .game__footer {
+        padding-left: 38%;
+        padding-right: 38%;
+    }
+}
+
+@media (max-height: 745px) {
+    .game__footer {
+        bottom: -210px;
+    }
+}
+
+@media (max-height: 515px) {
+    .game__footer {
+        bottom: -510px;
+    }
+}
diff --git a/README.md b/README.md
@@ -416,6 +416,7 @@ Also join the discord server for GameZone and start collaborating with others
 | 299 | [Reversi](https://github.com/kunjgit/GameZone/tree/main/Games/Reversi)|  
 | 300 | [reaction_teaser](https://github.com/kunjgit/GameZone/pull/2134/files)|
 | 301 | [Scribble](https://github.com/kunjgit/GameZone/tree/main/Games/Scribble)|
+| 302 | [Brain Burst Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brain_Burst_Game)|
 
 
 
@@ -506,4 +507,4 @@ Also join the discord server for GameZone and start collaborating with others
 </a>
 </center>
 <br>
-<p align="right"><a href="#top">Back to top</a></p>
+<p align="right"><a href="#top">Back to top</a></p>
diff --git a/assets/images/Brain_Burst_Game.png b/assets/images/Brain_Burst_Game.png