kunjgit · kunjgit · Jul 14, 2024 · Jul 10, 2024 · Jul 13, 2024
diff --git a/Games/Catch Him/README.md b/Games/Catch Him/README.md
@@ -0,0 +1,18 @@
+## Catch him 
+"Catch Him" is a fun and engaging game that involves quick reflexes and strategic thinking. The main objective of the game is to catch a character named Ralph, who moves swiftly across the screen. Players must click or tap on Ralph as he appears in different locations, often disappearing and reappearing quickly to increase the challenge. The game typically includes various levels of difficulty, with Ralph moving faster and more unpredictably as players advance. It's a great game for testing hand-eye coordination and speed, providing an entertaining and competitive experience for players of all ages.
+
+## How to play ?:
+
+1. **Objective**: Your goal is to catch Ralph by clicking or tapping on him whenever he appears on the screen.
+
+2. **Gameplay**:
+   - Ralph will move around the screen and may disappear and reappear in different locations.
+   - Use your mouse (if on a computer)  tap to catch Ralph.
+   - Each time you successfully catch Ralph, you earn points.
+
+3. **Time Limit**: The game may have a time limit . Try to catch Ralph as many times as possible before time runs out.
+
+4. **Score**: Your score is based on how many times you catch Ralph. Aim for a high score and challenge yourself to improve with each playthrough.
+
+## Screenshot
+<img src="images/Catch_him.png">
diff --git a/Games/Catch Him/audios/hit.m4a b/Games/Catch Him/audios/hit.m4a
diff --git a/Games/Catch Him/images/Catch_him.png b/Games/Catch Him/images/Catch_him.png
diff --git a/Games/Catch Him/images/favicon.jpg b/Games/Catch Him/images/favicon.jpg
diff --git a/Games/Catch Him/images/player.png b/Games/Catch Him/images/player.png
diff --git a/Games/Catch Him/images/ralph.png b/Games/Catch Him/images/ralph.png
diff --git a/Games/Catch Him/images/wall.png b/Games/Catch Him/images/wall.png
diff --git a/Games/Catch Him/index.html b/Games/Catch Him/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+
+  <!-- settings -->
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ctch Ralph</title>
+
+  <!-- fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Press+Start+2P&display=swap" rel="stylesheet">
+
+  <!-- styles -->
+  <link rel="stylesheet" href="./styles/reset.css">
+  <link rel="stylesheet" href="./styles/main.css">
+</head>
+
+<body>
+
+  <div class="container">
+    <div class="menu">
+      <div class="menu-time">
+        <h2 style="color: red;">Time Left</h2>
+        <h2 id="time-left">0</h2>
+      </div>
+      <div class="menu-score">
+        <h2 style="color: red;">Your Score</h2>
+        <h2 id="score">0</h2>
+      </div>
+      <div class="menu-lives">
+        <img src="./images/player.png" alt="img" height="60px" />
+        <h2>x3</h2>
+      </div>
+    </div>
+
+    <div class="panel">
+      <div class="panel-row">
+        <div class="square " id="1"></div>
+        <div class="square" id="2"></div>
+        <div class="square" id="3"></div>
+      </div>
+
+      <div class="panel-row">
+        <div class="square enemy" id="4"></div>
+        <div class="square" id="5"></div>
+        <div class="square" id="6"></div>
+      </div>
+
+      <div class="panel-row">
+        <div class="square" id="7"></div>
+        <div class="square" id="8"></div>
+        <div class="square" id="9"></div>
+      </div>
+    </div>
+  </div>
+
+  <script defer src="scripts/engine.js"></script>
+</body>
+
+</html>
diff --git a/Games/Catch Him/scripts/engine.js b/Games/Catch Him/scripts/engine.js
@@ -0,0 +1,65 @@
+const state = {
+  view: {
+    squares: document.querySelectorAll(".square"),
+    enemy: document.querySelector(".enemy"),
+    timeLeft: document.querySelector("#time-left"),
+    score: document.querySelector("#score"),
+  },
+  values: {
+    gameVelocity: 1000,
+    hitPosition: 0,
+    result: 0,
+    curretTime: 60,
+  },
+  actions: {
+    timerId: setInterval(randomSquare, 1000),
+    countDownTimerId: setInterval(countDown, 1000),
+  },
+};
+
+function countDown() {
+  state.values.curretTime--;
+  state.view.timeLeft.textContent = state.values.curretTime;
+
+  if (state.values.curretTime <= 0) {
+    clearInterval(state.actions.countDownTimerId);
+    clearInterval(state.actions.timerId);
+    alert("Game Over! O seu resultado foi: " + state.values.result);
+  }
+}
+
+function playSound(audioName) {
+  let audio = new Audio(`./src/audios/${audioName}.m4a`);
+  audio.volume = 0.2;
+  audio.play();
+}
+
+function randomSquare() {
+  state.view.squares.forEach((square) => {
+    square.classList.remove("enemy");
+  });
+
+  let randomNumber = Math.floor(Math.random() * 9);
+  let randomSquare = state.view.squares[randomNumber];
+  randomSquare.classList.add("enemy");
+  state.values.hitPosition = randomSquare.id;
+}
+
+function addListenerHitBox() {
+  state.view.squares.forEach((square) => {
+    square.addEventListener("mousedown", () => {
+      if (square.id === state.values.hitPosition) {
+        state.values.result++;
+        state.view.score.textContent = state.values.result;
+        state.values.hitPosition = null;
+        playSound("hit");
+      }
+    });
+  });
+}
+
+function initialize() {
+  addListenerHitBox();
+}
+
+initialize();
diff --git a/Games/Catch Him/styles/main.css b/Games/Catch Him/styles/main.css
@@ -0,0 +1,48 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-image: url("../images/wall.png");
+}
+
+.menu {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  height: 90px;
+  width: 100%;
+  background-color: #000000;
+  color: #ffffff;
+  border-bottom: 5px solid #ffd700;
+}
+
+.panel {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.square {
+  height: 150px;
+  width: 150px;
+  border: 1px solid #000000;
+  background-color: #1aeaa5;
+}
+
+.enemy {
+  background-image: url("../images/ralph.png");
+  background-size: cover;
+}
+
+.menu-lives {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-time h2:nth-child(2),
+.menu-score h2:nth-child(2) {
+  margin-top: 1rem;
+}
diff --git a/Games/Catch Him/styles/reset.css b/Games/Catch Him/styles/reset.css
@@ -0,0 +1,7 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  /* font-family: "Bebas Neue", sans-serif; */
+  font-family: "Press Start 2P", cursive;
+}
diff --git a/README.md b/README.md
@@ -376,10 +376,9 @@ This repository also provides one such platforms where contributers come over an
 | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) |
 |[Rock_Paper_Scissors_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_Paper_Scissors_Neon)|
 |[Beat_a_mole](https://github.com/kunjgit/GameZone/tree/main/Games/Beat_a_mole)|
+|[Catch Him](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_him) |
 |[Hexsweep_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hexsweep-Game)|
 
-
-
   </center>
 
 <br>

diff --git a/assets/images/Catch_him.png b/assets/images/Catch_him.png
diff --git a/assets/images/Catch_him.webp b/assets/images/Catch_him.webp