Added new game

kunjgit · Oct 17, 2023 · 4475339 · 4475339
1 parent b3f6e00
commit 4475339
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 0 deletions.
diff --git a/Games/Catch_Me_If_You_Can/README.md b/Games/Catch_Me_If_You_Can/README.md
@@ -0,0 +1,63 @@
+
+# **Catch Me If You Can**
+
+ ---
+
+
+
+<br>
+
+
+
+## **Description 📃**
+
+Welcome to the Catch Me If You Can game! This is a simple and fun game built using HTML, CSS, and JavaScript. Your objective is to whack the balls that appear on the screen and earn points.
+
+
+
+## **Functionalities 🎮**
+
+-  Whack the balls as they pop up on the screen.
+- Keep track of your score in the top-right corner.
+- Balls appear randomly at different positions within the game area.
+
+<br>
+
+
+
+## **How to play? 🕹️**
+
+1. *Objective*: Click on the balls as they appear to earn points.
+
+2. *Scoring*: Your score is displayed at the top-right corner of the game screen.
+
+3. *Balls*: Balls will randomly pop up at different positions within the game area.
+
+4. *Winning*: Keep clicking on balls to increase your score.
+
+
+
+<br>
+
+
+
+## **Screenshots 📸**
+
+
+
+<br>
+
+<!-- add your screenshots like this -->
+
+![Screenshot](/Games/Catch_Me_If_You_Can/assets/Catch_Me_If_You_Can.png)
+
+
+<br>
+
+
+
+## **Working video 📹**
+
+Watch a brief video showcasing the gameplay and features of the Catch Me Of You Can game:
+
+<video src="assets/DemoVideo.mp4" controls title="DemoVideo"></video>
diff --git a/Games/Catch_Me_If_You_Can/assets/Catch_Me_If_You_Can.png b/Games/Catch_Me_If_You_Can/assets/Catch_Me_If_You_Can.png
diff --git a/Games/Catch_Me_If_You_Can/assets/DemoVideo.mp4 b/Games/Catch_Me_If_You_Can/assets/DemoVideo.mp4
diff --git a/Games/Catch_Me_If_You_Can/index.css b/Games/Catch_Me_If_You_Can/index.css
@@ -0,0 +1,38 @@
+body {
+    text-align: center;
+    font-family: Arial, sans-serif;
+  }
+
+  h1 {
+    color: #120381;
+    padding: 1rem;
+  }
+
+  .game-container {
+    position: relative;
+    margin: 0 auto;
+    width: 400px;
+    height: 400px;
+    background-color: #c6fa0b;
+    border: 5px solid #333;
+    overflow: hidden;
+  }
+
+  .monster {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background-color: #d60f94;
+    border: 2px solid #333;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .score {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #070101;
+    font-size: 18px;
+  }
+
diff --git a/Games/Catch_Me_If_You_Can/index.html b/Games/Catch_Me_If_You_Can/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="index.css" />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <h1>Catch Me If You Can </h1>
+  <div class="game-container">
+    <div class="score">Score: <span id="score">0</span></div>
+   </div>
+</body>
+</html>
diff --git a/Games/Catch_Me_If_You_Can/index.js b/Games/Catch_Me_If_You_Can/index.js
@@ -0,0 +1,40 @@
+let score = 0;
+const scoreElement = document.getElementById('score');
+
+function randomPosition() {
+  const gameContainer = document.querySelector('.game-container');
+  const maxX = gameContainer.clientWidth - 50;
+  const maxY = gameContainer.clientHeight - 50;
+
+  const randomX = Math.random() * maxX;
+  const randomY = Math.random() * maxY;
+
+  return { x: randomX, y: randomY };
+}
+
+function updateScore() {
+  score++;
+  scoreElement.textContent = score;
+}
+
+function createMonster() {
+  const monster = document.createElement('div');
+  monster.classList.add('monster');
+  const position = randomPosition();
+  monster.style.left = `${position.x}px`;
+  monster.style.top = `${position.y}px`;
+
+  monster.addEventListener('click', () => {
+    monster.remove();
+    updateScore();
+  });
+
+  document.querySelector('.game-container').appendChild(monster);
+
+  setTimeout(() => {
+    monster.remove();
+  }, 1000);
+}
+
+setInterval(createMonster, 1000);
+