Clicks Per Minite Game Added

kunjgit · Jun 18, 2024 · b553e67 · b553e67
1 parent 667a612
commit b553e67
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 0 deletions.
diff --git a/Games/Clicks_PerMin/README.md b/Games/Clicks_PerMin/README.md
@@ -0,0 +1,33 @@
+# **Click Per Minute** 
+
+---
+
+<br>
+
+## **Description 📃**
+
+- The "Click Per Minute Game" is an exciting and engaging game where users aim to achieve the highest number of clicks within one minute. It’s a fun and competitive way to test and improve your clicking speed and reaction time.
+
+## **functionalities 🎮**
+
+- Real-Time Point Counting: Keep track of your score in real-time as you click the button.
+Timer: A one-minute countdown timer to challenge your speed.
+Clicking Speed Display: See how fast you can click within the given time frame.
+
+<br>
+
+## **How to play? 🕹️**
+Simply click the "Click Me!" button as many times as you can within one minute.
+Your score will be updated in real-time.
+Once the timer reaches zero, your final score will be displayed, showing the total number of clicks per minute.
+- 
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+![image](../../assets/images/Clicks_PerMin.png)
+<br>
+
+
diff --git a/Games/Clicks_PerMin/app.js b/Games/Clicks_PerMin/app.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const clickButton = document.getElementById('clickButton');
+    const scoreDisplay = document.getElementById('score');
+    const timerDisplay = document.getElementById('timer');
+    const gameOverDisplay = document.getElementById('gameOver');
+    const finalScoreDisplay = document.getElementById('finalScore');
+
+    let score = 0;
+    let timeLeft = 60; // 60 seconds
+
+    clickButton.addEventListener('click', function() {
+      score++;
+      scoreDisplay.innerText = `Score: ${score}`;
+    });
+
+    // Timer function
+    const timer = setInterval(function() {
+      timeLeft--;
+      let minutes = Math.floor(timeLeft / 60);
+      let seconds = timeLeft % 60;
+      timerDisplay.innerText = `Time left: ${minutes}:${seconds.toString().padStart(2, '0')}`;
+
+      if (timeLeft === 0) {
+        clearInterval(timer);
+        clickButton.disabled = true;
+        finalScoreDisplay.innerText = score;
+        gameOverDisplay.classList.remove('d-none');
+      }
+    }, 1000);
+  });
diff --git a/Games/Clicks_PerMin/index.html b/Games/Clicks_PerMin/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>Click Per Minute Game</title>
+  <!-- Bootstrap CSS -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1 class="display-4">Click Per Minute Game</h1>
+    <p class="lead">Click the button as many times as you can in 1 minute!</p>
+    <button id="clickButton" class="btn btn-primary btn-lg click-button">Click Me!</button>
+    <p id="score" class="score-board">Score: 0</p>
+    <p id="timer" class="timer-board">Time left: 1:00</p>
+    <p id="gameOver" class="game-over d-none">Game over! Your score is <span id="finalScore"></span> clicks per minute.</p>
+  </div>
+
+  <!-- Bootstrap JS and necessary scripts -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/Games/Clicks_PerMin/style.css b/Games/Clicks_PerMin/style.css
@@ -0,0 +1,20 @@
+body {
+    background-color: #f8f9fa;
+  }
+  .container {
+    text-align: center;
+    margin-top: 100px;
+  }
+  .score-board, .timer-board {
+    font-size: 1.5rem;
+    margin-top: 20px;
+  }
+  .click-button {
+    font-size: 1.25rem;
+    padding: 15px 30px;
+  }
+  .game-over {
+    font-size: 1.75rem;
+    color: #dc3545;
+    margin-top: 20px;
+  }
diff --git a/README.md b/README.md
@@ -345,6 +345,7 @@ This repository also provides one such platforms where contributers come over an
 | [Intellect Quest](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Intellect_Quest) |
 | [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Game) |
 | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) |
+| [Clicks_PerMin](https://github.com/kunjgit/GameZone/tree/main/Games/Clicks_PerMin) |
 
  </center>
 

diff --git a/assets/images/Clicks_PerMin.png b/assets/images/Clicks_PerMin.png