Merge branch 'main' into drum_kit

shellygarg10 · Jul 24, 2024 · d14c210 · d14c210
2 parents 35a05f9 + 04d9b65
commit d14c210
Show file tree

Hide file tree

Showing 30 changed files with 2,070 additions and 21 deletions.
diff --git a/Games/Boom_Blast/asset/images/Boom_Blast_gameplay.png b/Games/Boom_Blast/asset/images/Boom_Blast_gameplay.png
diff --git a/Games/Boom_Blast/asset/images/Boom_Blast_option.png b/Games/Boom_Blast/asset/images/Boom_Blast_option.png
diff --git a/Games/Boom_Blast/asset/images/Boom_Blast_scoring.png b/Games/Boom_Blast/asset/images/Boom_Blast_scoring.png
diff --git a/Games/Boom_Blast/asset/images/Boom_Blast_start.png b/Games/Boom_Blast/asset/images/Boom_Blast_start.png
diff --git a/Games/Boom_Blast/asset/images/desktop.ini b/Games/Boom_Blast/asset/images/desktop.ini
@@ -0,0 +1,5 @@
+[LocalizedFileNames]
+Screenshot 2024-07-23 101337.png=@Screenshot 2024-07-23 101337,0
+Screenshot 2024-07-23 101316.png=@Screenshot 2024-07-23 101316,0
+Screenshot 2024-07-23 101249.png=@Screenshot 2024-07-23 101249,0
+Screenshot 2024-07-23 101237.png=@Screenshot 2024-07-23 101237,0
diff --git a/Games/Boom_Blast/index.html b/Games/Boom_Blast/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BOOM BLAST</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game-title">BOOM BLAST</div>
+    <div id="score">Score: 0</div>
+    <div id="timer">Time: 30s</div>
+    <div id="game-area">
+        <div id="game-over"></div>
+    </div>
+    <div id="controls">
+        <button id="start-button">Start Game</button>
+        <select id="time-select">
+            <option value="30">30 seconds</option>
+            <option value="60">60 seconds</option>
+            <option value="90">90 seconds</option>
+            <option value="120">120 seconds</option>
+        </select>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Boom_Blast/readme.md b/Games/Boom_Blast/readme.md
@@ -0,0 +1,62 @@
+# BOOM BLAST
+
+BOOM BLAST is a fun and colorful browser-based game where players click on balloons to score points before time runs out.
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [How to Play](#how-to-play)
+- [Game Mechanics](#game-mechanics)
+- [Customization](#customization)
+- [Technologies Used](#technologies-used)
+
+## Features
+
+- Vibrant, dynamic background
+- Colorful balloons with gradient effects
+- Customizable game duration
+- Real-time score and timer display
+- Responsive design
+
+## Installation
+
+1. Clone this repository .
+```bash
+  clone git https://github.com/kunjgit/GameZone/tree/main/Games/Boom_Blast
+```
+2. Open the `index.html` file in a web browser to start the game.
+
+## How to Play
+
+1. Open the game in a web browser.
+2. Select the desired game duration from the dropdown menu.
+3. Click the "Start Game" button to begin.
+4. Click on the balloons as they appear to score points.
+5. Try to click as many balloons as possible before time runs out.
+6. When the game ends, your final score will be displayed.
+7. Click "Start Game" again to play another round.
+
+## Game Mechanics
+
+- Balloons appear randomly within the game area every second.
+- Each balloon has a random size and color gradient.
+- Clicking a balloon adds 1 point to your score and removes the balloon.
+- Balloons automatically disappear after 2 seconds if not clicked.
+- The game ends when the timer reaches zero.
+
+## Customization
+
+You can customize the game by modifying the following:
+
+- Game duration options in the HTML file
+- Colors and animations in the CSS file
+- Balloon spawn rate and game logic in the JavaScript file
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- JavaScript (ES6+)
+
+Feel free to fork this project and customize it to your liking. Enjoy playing BOOM BLAST!
diff --git a/Games/Boom_Blast/script.js b/Games/Boom_Blast/script.js
@@ -0,0 +1,98 @@
+const gameArea = document.getElementById('game-area');
+const startButton = document.getElementById('start-button');
+const scoreElement = document.getElementById('score');
+const timerElement = document.getElementById('timer');
+const gameOverElement = document.getElementById('game-over');
+const timeSelect = document.getElementById('time-select');
+
+let score = 0;
+let timeLeft = 30;
+let gameInterval;
+let balloonInterval;
+
+startButton.addEventListener('click', startGame);
+
+function startGame() {
+    score = 0;
+    timeLeft = parseInt(timeSelect.value);
+    updateScore();
+    updateTimer();
+    startButton.disabled = true;
+    timeSelect.disabled = true;
+    gameOverElement.style.display = 'none';
+    clearInterval(gameInterval);
+    clearInterval(balloonInterval);
+
+    gameInterval = setInterval(() => {
+        timeLeft--;
+        updateTimer();
+        if (timeLeft <= 0) {
+            endGame();
+        }
+    }, 1000);
+
+    balloonInterval = setInterval(createBalloon, 1000);
+}
+
+function createBalloon() {
+    const balloon = document.createElement('div');
+    balloon.classList.add('balloon');
+    const size = Math.random() * 50 + 20;
+    const colors = getRandomGradient();
+
+    balloon.style.width = `${size}px`;
+    balloon.style.height = `${size}px`;
+    balloon.style.background = colors;
+    balloon.style.left = `${Math.random() * (gameArea.clientWidth - size)}px`;
+    balloon.style.top = `${Math.random() * (gameArea.clientHeight - size)}px`;
+
+    balloon.addEventListener('click', () => {
+        score++;
+        updateScore();
+        gameArea.removeChild(balloon);
+    });
+
+    gameArea.appendChild(balloon);
+
+    setTimeout(() => {
+        if (gameArea.contains(balloon)) {
+            gameArea.removeChild(balloon);
+        }
+    }, 2000);
+}
+
+function getRandomGradient() {
+    const color1 = getRandomColor();
+    const color2 = getRandomColor();
+    return `radial-gradient(circle, ${color1}, ${color2})`;
+}
+
+function getRandomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+function updateScore() {
+    scoreElement.textContent = `Score: ${score}`;
+}
+
+function updateTimer() {
+    timerElement.textContent = `Time: ${timeLeft}s`;
+}
+
+function endGame() {
+    clearInterval(gameInterval);
+    clearInterval(balloonInterval);
+    gameOverElement.textContent = `Game Over! Final Score: ${score}`;
+    gameOverElement.style.display = 'block';
+    startButton.disabled = false;
+    timeSelect.disabled = false;
+    while (gameArea.firstChild) {
+        gameArea.removeChild(gameArea.firstChild);
+    }
+    gameArea.appendChild(gameOverElement);
+}
diff --git a/Games/Boom_Blast/style.css b/Games/Boom_Blast/style.css
@@ -0,0 +1,101 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+#game-title {
+    font-size: 48px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-bottom: 20px;
+}
+
+#game-area {
+    width: 600px;
+    height: 400px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.balloon {
+    position: absolute;
+    border-radius: 50%;
+    cursor: pointer;
+    animation: float 2s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+#score, #timer {
+    font-size: 24px;
+    color: #fff;
+    margin: 10px 0;
+}
+
+#controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+#start-button, #time-select {
+    font-size: 20px;
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#start-button:hover {
+    background-color: #45a049;
+}
+
+#time-select {
+    background-color: #3498db;
+}
+
+#time-select:hover {
+    background-color: #2980b9;
+}
+
+#game-over {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 36px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    display: none;
+}
diff --git a/Games/Four_In_Row/README.md b/Games/Four_In_Row/README.md
@@ -0,0 +1,30 @@
+# **Four_In_Row** 
+
+## **Description 📃**
+<!-- add your game description here  -->
+- Four in a Row is a two-player strategy game where players take turns dropping colored discs into a vertical grid. The objective is to connect four of their own discs in a row—either horizontally, vertically, or diagonally—before the opponent does.
+
+## **Functionalities 🎮**
+<!-- add functionalities over here -->
+- Two-Player Mode: Designed for two players, either competitively or cooperatively.
+- Vertical Grid: Features a vertical grid with slots where discs are dropped.
+- Disc Colors: Players use different colored discs to differentiate between their moves.
+- Winning Condition: The goal is to connect four discs in a row, either horizontally, vertically, or diagonally.
+- Turn-Based Play: Players take turns dropping discs into the grid.
+- Game Over Detection: The game ends when a player achieves four in a row or when the grid is full.
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- Players take turns dropping colored discs into a vertical grid.
+- The objective is to connect four of your discs in a row horizontally, vertically, or diagonally.
+- The game ends when a player connects four in a row or the grid is full.
+
+<br>
+
+## **Screenshots 📸**
+![image](https://github.com/user-attachments/assets/613f20e4-153f-4c1c-ba84-7fb04a95b293)
+
+![image](https://github.com/user-attachments/assets/08d88616-d097-4f5e-ac36-cd93f3f97ac2)
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>