diff --git a/Games/Brain_Burst_Game/README.md b/Games/Brain_Burst_Game/README.md new file mode 100644 index 0000000000..0e7e089d84 --- /dev/null +++ b/Games/Brain_Burst_Game/README.md @@ -0,0 +1,42 @@ +# **BRAIN BURST GAME** + +--- + +
+ +## **Description 📃** +- This project is built on a basic web tech stacks such as HTML, CSS and Javascript. +- This is a single-player game. + +
+ +## **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. + +
+ +## ** Additional Features ** +- Implementing a graphical user interface (GUI) for a more interactive experience. + +
+ +## **Screenshots 📸** + +
+ +![image](../../assets/images/Brain_Burst_Game.png) + +
+ +## **Working video 📹** +https://github.com/kunjgit/GameZone/assets/114330097/115588cb-c53b-4663-8d68-2d1b5a3ed205 + +
+ +## **Creator 👦** +[Avdhesh Varshney](https://github.com/Avdhesh-Varshney) + +
diff --git a/Games/Brain_Burst_Game/favicon.ico b/Games/Brain_Burst_Game/favicon.ico new file mode 100644 index 0000000000..cbef754eea Binary files /dev/null and b/Games/Brain_Burst_Game/favicon.ico differ diff --git a/Games/Brain_Burst_Game/index.html b/Games/Brain_Burst_Game/index.html new file mode 100644 index 0000000000..a56e652e4a --- /dev/null +++ b/Games/Brain_Burst_Game/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + Brain Burst Game + + + + + + + + +
+ +

Brain Burst Game

+ + +
+
+ + +

+ + +
+ + + +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/Games/Brain_Burst_Game/main.js b/Games/Brain_Burst_Game/main.js new file mode 100644 index 0000000000..cb454b04ed --- /dev/null +++ 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 new file mode 100644 index 0000000000..72b3d5efdb --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/README.md b/README.md index 16177d947d..63addb5e81 100644 --- 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
-

Back to top

+

Back to top

\ No newline at end of file diff --git a/assets/images/Brain_Burst_Game.png b/assets/images/Brain_Burst_Game.png new file mode 100644 index 0000000000..eb2060b49d Binary files /dev/null and b/assets/images/Brain_Burst_Game.png differ