kunjgit · anisharma07 · May 31, 2024 · May 31, 2024
diff --git a/Games/Hit_Counter/README.md b/Games/Hit_Counter/README.md
@@ -0,0 +1,48 @@
+# **Hit_Counter**
+
+---
+
+<br>
+
+## **Description 📃**
+
+Hit Counter is an interactive web-based game designed to test and measure your speed and accuracy in either hitting the spacebar or clicking the mouse button. Choose your preferred mode and duration, then compete to see how many hits you can achieve within the given time.
+
+## **Functionalities 🎮**
+
+- Set the game duration (in seconds).
+- Choose between "Keyboard" mode (spacebar hits) and "Click" mode (mouse clicks).
+- Start the game and display a real-time counter and timer.
+- Count and animate hits in real-time.
+- Display results as hits per minute after the game ends.
+- choose new settings and Start again.
+
+<br>
+
+## **How to Play? 🕹️**
+
+1. **Enter Time**: Input the desired game duration in seconds.
+2. **Select Mode**: Choose between "Keyboard" for spacebar hits or "Click" for mouse clicks.
+3. **Get Ready**: Click the "Ready" button to start the game.
+4. **Start Hitting**:
+   - In Keyboard mode, hit the spacebar as quickly as possible.
+   - In Click mode, click the mouse button as quickly as possible.
+5. **Monitor Time**: Watch the timer and the count of hits update in real-time.
+6. **View Results**: After the time runs out, view your hits per minute.
+7. **Reset**: Use the Start button to set up a new game.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+<!-- Add your screenshots like this -->
+
+![Hit_Counter](./assets/images/image.png)
+
+<br>
+
+## **Working Video 📹**
+
+- [Working Video 📹](https://youtu.be/fZqLdfQNhf8)
diff --git a/Games/Hit_Counter/assets/images/image.png b/Games/Hit_Counter/assets/images/image.png
diff --git a/Games/Hit_Counter/assets/images/keyboard.svg b/Games/Hit_Counter/assets/images/keyboard.svg
diff --git a/Games/Hit_Counter/assets/images/mouse.svg b/Games/Hit_Counter/assets/images/mouse.svg
diff --git a/Games/Hit_Counter/assets/video/Hit_Counter.mp4 b/Games/Hit_Counter/assets/video/Hit_Counter.mp4
diff --git a/Games/Hit_Counter/favicon.ico b/Games/Hit_Counter/favicon.ico
diff --git a/Games/Hit_Counter/index.html b/Games/Hit_Counter/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hit Count Game</title>
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body class="caesar-dressing-regular">
+    <img src="assets/images/keyboard.svg" class="myKeyboard" />
+    <img src="assets/images/mouse.svg" class="myMouse" />
+    <h1 class="Heading">Hit Count Game</h1>
+
+    <div class="game-container">
+      <div class="container">
+        <div id="setup">
+          <div>
+            <label class="this_label" for="timeInput">Select Time:</label>
+            <!-- <input type="number" id="timeInput" min="1" required /> -->
+            <select id="timeInput" required>
+              <option value="10">10s</option>
+              <option value="20">20s</option>
+              <option value="30">30s</option>
+              <option value="40">40s</option>
+              <option value="50">50s</option>
+              <option value="60">60s</option>
+            </select>
+          </div>
+          <div>
+            <label class="this_label" for="modeSelect">Select Mode:</label>
+            <select id="modeSelect">
+              <option value="keyboard">Keyboard</option>
+              <option value="click">Click</option>
+            </select>
+          </div>
+          <button id="readyButton">Start Game</button>
+        </div>
+
+        <div id="game" class="hidden">
+          <p>Start hitting the spacebar or clicking!</p>
+
+          <div id="countDisplay">0</div>
+          <span class="clickOrHit">Hits</span>
+          <button id="resetButton" class="hidden">Reset</button>
+        </div>
+        <div id="result" class="hidden"></div>
+      </div>
+    </div>
+    <div id="timeDisplay">Time: 0s</div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Games/Hit_Counter/index.js b/Games/Hit_Counter/index.js
@@ -0,0 +1,74 @@
+document.getElementById("readyButton").addEventListener("click", startGame);
+document.getElementById("resetButton").addEventListener("click", resetGame);
+
+let mode = "keyboard";
+let timeLimit = 0;
+let count = 0;
+let timePassed = 0;
+let timer;
+
+function startGame() {
+  timeLimit = parseInt(document.getElementById("timeInput").value);
+  mode = document.getElementById("modeSelect").value;
+  count = 0;
+  timePassed = 0;
+  document.querySelector(".clickOrHit").innerHTML =
+    mode === "keyboard" ? "Hits" : "Clicks";
+  document.getElementById("setup").style.display = "none";
+  document.getElementById("game").classList.remove("hidden");
+  document.getElementById("result").classList.add("hidden");
+  document.getElementById("countDisplay").innerText = count;
+  document.getElementById("timeDisplay").innerText = `Time: ${timePassed}s`;
+  document.getElementById("resetButton").classList.add("hidden");
+
+  if (mode === "keyboard") {
+    document.addEventListener("keyup", countKey);
+  } else {
+    document.addEventListener("click", countClick);
+  }
+
+  timer = setInterval(updateTime, 1000);
+  setTimeout(endGame, timeLimit * 1000);
+}
+
+function countKey(event) {
+  if (event.code === "Space") {
+    count++;
+    document.getElementById("countDisplay").innerText = count;
+  }
+}
+
+function countClick() {
+  count++;
+  document.getElementById("countDisplay").innerText = count;
+}
+
+function updateTime() {
+  timePassed++;
+  document.getElementById("timeDisplay").innerText = `Time: ${timePassed}s`;
+}
+
+function endGame() {
+  clearInterval(timer);
+  document.getElementById("game").classList.add("hidden");
+  document.getElementById("setup").style.display = "block";
+  document.getElementById("result").classList.remove("hidden");
+  document.getElementById("resetButton").classList.remove("hidden");
+  document.getElementById("result").innerText = `Result: ${
+    (count / timeLimit) * 60
+  } ${mode === "keyboard" ? "hits" : "clicks"} per minute`;
+
+  if (mode === "keyboard") {
+    document.removeEventListener("keyup", countKey);
+  } else {
+    document.removeEventListener("click", countClick);
+  }
+}
+
+function resetGame() {
+  document.getElementById("setup").classList.remove("hidden");
+  document.getElementById("game").classList.add("hidden");
+  document.getElementById("result").classList.add("hidden");
+  document.getElementById("timeInput").value = "";
+  document.getElementById("modeSelect").value = "keyboard";
+}
diff --git a/Games/Hit_Counter/style.css b/Games/Hit_Counter/style.css
@@ -0,0 +1,135 @@
+@import url("https://fonts.googleapis.com/css2?family=Allura&family=Caesar+Dressing&family=Cinzel:[email protected]&family=DM+Serif+Display:ital@0;1&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Mrs+Saint+Delafield&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Parisienne&family=Pinyon+Script&display=swap");
+
+.caesar-dressing-regular {
+  font-family: "Caesar Dressing", system-ui;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  height: 100svh;
+  width: 100vw;
+  margin: 0;
+  overflow: hidden;
+
+  /* background-color: #f0f0f0; */
+}
+.game-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90%;
+  width: 100vw;
+}
+
+.container {
+  text-align: center;
+  color: white;
+  background-color: #ffffff22;
+  border-radius: 15px;
+  padding: 30px;
+  width: 60%;
+  min-height: 300px;
+  font-size: 28px;
+}
+#setup {
+  height: 300px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#timeDisplay {
+  padding: 10px 30px;
+  position: absolute;
+  bottom: 50px;
+  left: 44%;
+  color: white;
+  font-size: 30px;
+  background-color: #1a003a;
+  border: 2px solid #620087;
+  border-radius: 43px;
+}
+#result {
+  font-size: 2em;
+  margin-top: 20px;
+  color: green;
+}
+
+input,
+select {
+  cursor: pointer;
+  width: 200px;
+  padding: 10px 20px;
+  margin: 10px;
+  font-size: 0.8em;
+  border-radius: 20px;
+}
+.Heading {
+  padding-top: 20px;
+  text-align: center;
+  margin: 0 auto 0;
+  color: white;
+  font-size: 60px;
+}
+
+body {
+  background: rgb(0, 0, 0);
+  background: -moz-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(80, 0, 131, 1) 91%
+  );
+  background: -webkit-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(80, 0, 131, 1) 91%
+  );
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(80, 0, 131, 1) 91%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#500083",GradientType=1);
+}
+
+.myKeyboard {
+  position: absolute;
+  top: 5px;
+  left: 0px;
+}
+
+.myMouse {
+  position: absolute;
+  top: 0px;
+  right: 10px;
+}
+#readyButton {
+  cursor: pointer;
+  font-family: "Caesar Dressing", system-ui;
+  font-weight: 400;
+  font-size: 27px;
+  font-style: normal;
+  color: white;
+  background-color: #00629a;
+  border: 2px solid #ffffff28;
+  border-radius: 50px;
+  width: 253px;
+  height: 71px;
+}
+#resetButton {
+  color: white;
+  background-color: #00629a;
+}
+#game {
+  font-size: 40px;
+}
+#countDisplay {
+  font-size: 50px;
+}
+.hidden {
+  display: none;
+}