Merge pull request #2098 from Khushi-Pushkar/master

Added Catch Ralph
Sulagna-Dutta-Roy · Jul 4, 2024 · 44d259b · 44d259b
2 parents ab5f1e3 + 61f8046
commit 44d259b
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 0 deletions.
diff --git a/Catch Ralph/audios/hit.m4a b/Catch Ralph/audios/hit.m4a
diff --git a/Catch Ralph/images/favicon.jpg b/Catch Ralph/images/favicon.jpg
diff --git a/Catch Ralph/images/player.png b/Catch Ralph/images/player.png
diff --git a/Catch Ralph/images/ralph.png b/Catch Ralph/images/ralph.png
diff --git a/Catch Ralph/images/wall.png b/Catch Ralph/images/wall.png
diff --git a/Catch Ralph/index.html b/Catch Ralph/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/Catch Ralph/manifest.json b/Catch Ralph/manifest.json
@@ -0,0 +1,18 @@
+{
+    "manifest_version": 3,
+    "name": "Catch Ralph",
+    "description": "Catch Ralph",
+    "version": "1.0",
+    "permissions": [
+        "storage",
+        "declarativeNetRequest",
+        "declarativeNetRequestWithHostAccess",
+        "tabs"
+    ],
+    "host_permissions": [
+        "*://*/*"
+    ],
+    "action": {
+        "default_popup": "index.html"
+    }
+}
diff --git a/Catch Ralph/scripts/engine.js b/Catch Ralph/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/Catch Ralph/styles/main.css b/Catch Ralph/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/Catch Ralph/styles/reset.css b/Catch Ralph/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;
+}