kunjgit · kunjgit · Jul 26, 2024 · Jun 3, 2024 · Jul 24, 2024 · Jul 24, 2024
diff --git a/Games/Detona/index.html b/Games/Detona/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>Detona 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="./src/styles/reset.css">
+  <link rel="stylesheet" href="./src/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="./src/images/player.png" alt="foto do jogador" 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="./src/scripts/engine.js"></script>
+</body>
+
+</html>
diff --git a/Games/Detona/readme.md b/Games/Detona/readme.md
@@ -0,0 +1,49 @@
+## Awesome JSGame Detona Ralph
+
+```
+  #game-development
+  #javascript-game 
+  #html-css-javascript 
+  #html-css-javascript-games 
+  #ifood 
+  #dio-bootcamp 
+```
+
+
+# Bem-vindo ao **JSGame Detona Ralph**!
+
+Um projeto que, além do entretenimento, demonstra várias técnicas avançadas de desenvolvimento de jogos em JavaScript.
+
+
+Aqui, no repositório, você encontrará os arquivos do projeto.
+
+Nesta [página do jogo](https://netopaiva.github.io/detona-ralph/) você poderá se divertir com um *game* baseado no famoso filme "Detona Ralph".
+
+### Tecnologias Utilizadas
+
+- HTML5 e CSS3 para a estrutura e aparência do jogo.
+- JavaScript para a lógica de programação e interatividade.
+- Sprites e imagens customizadas para criar a estética única do universo de Detona Ralph.
+
+### Funcionalidades Incríveis
+
+- **Sistema de Pontuação**: Acompanhe sua pontuação à medida que progride no jogo e desafie seus amigos a superá-la, clique no quadrado que o Ralph se encontre
+
+### Como Jogar
+
+1. Clone este repositório para sua máquina local.
+2. Abra o arquivo `index.html` em seu navegador web.
+3. Use as setas direcionais para mover o personagem e a barra de espaço para interagir.
+4. Divirta-se explorando e coletando moedas, mas fique atento aos inimigos!
+
+### Contribuição
+
+Contribuições são bem-vindas! Se você deseja melhorar este jogo, adicionar novos recursos ou corrigir problemas, sinta-se à vontade para abrir um _pull request_.
+
+### Créditos
+
+Este jogo foi desenvolvido como parte de um projeto educacional da Digital Innovation One.
+
+---
+
+Divirta-se [jogando o **JSGame Detona Ralph**](https://netopaiva.github.io/detona-ralph/)  enquanto explora as técnicas modernas de desenvolvimento de jogos em JavaScript. Lembre-se de conferir o repositório original [aqui](https://github.com/digitalinnovationone/jsgame-detona-ralph) e deixar uma ⭐️ se você gostou do projeto!
diff --git a/Games/Detona/src/audios/hit.m4a b/Games/Detona/src/audios/hit.m4a
diff --git a/Games/Detona/src/images/favicon.jpg b/Games/Detona/src/images/favicon.jpg
diff --git a/Games/Detona/src/images/player.png b/Games/Detona/src/images/player.png
diff --git a/Games/Detona/src/images/ralph.png b/Games/Detona/src/images/ralph.png
diff --git a/Games/Detona/src/images/wall.png b/Games/Detona/src/images/wall.png
diff --git a/Games/Detona/src/scripts/engine.js b/Games/Detona/src/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/Detona/src/styles/main.css b/Games/Detona/src/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/Detona/src/styles/reset.css b/Games/Detona/src/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/Games/detona-ralph b/Games/detona-ralph
diff --git a/README.md b/README.md
@@ -221,7 +221,9 @@ This repository also provides one such platforms where contributers come over an
 | [Word Scramble Game](https://github.com/kunjgit/GameZone/tree/main/Games/Word_Scramble_Game)                     | [Tetris](https://github.com/kunjgit/GameZone/tree/main/Games/Tetris)                                    | [Interactive Quizzing Application](https://github.com/kunjgit/GameZone/tree/main/Games/Interactive_Quizzing) | [Planet Defense Game](https://github.com/kunjgit/GameZone/tree/main/Games/Planet_Defense)                          | [Rabbit Rush Game](https://github.com/kunjgit/GameZone/tree/main/Games/Rabbit_Rush)                         |
 | [Wordle](https://github.com/kunjgit/GameZone/tree/main/Games/Wordle)                                             | [Roll Race Game](https://github.com/kunjgit/GameZone/tree/main/Games/Roll_Race)                         | [Menja Game](https://github.com/kunjgit/GameZone/tree/main/Games/Menja)                                      | [Typing Speed Test Game](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test_Game)               | [Tile Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tile_Game)                                  |
 | [Stick Hero Game](https://github.com/kunjgit/GameZone/tree/main/Games/Stick_Hero_Game)                           | [Starwars Character Game](https://github.com/kunjgit/GameZone/tree/main/Games/Starwars_Character_Game)  | [Traffic Run](https://github.com/kunjgit/GameZone/tree/main/Games/Traffic_Run)                               | [Love Result Predictor](https://github.com/kunjgit/GameZone/tree/main/Games/Love_Result_Predictor)                 | [Tower Defense](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Defense)                          |
+
 | [Menja_block_breaker](https://github.com/kunjgit/GameZone/tree/main/Games/Menja_block_breaker)                   |  [Quick_Math](https://github.com/AaryanManghnani/GameZone/tree/QuickMath/Games/Quick_Math)                                                                                                        | [Yahtzee](https://github.com/kunjgit/GameZone/tree/main/Games/Yahtzee)                                       |
+
 | [Bird Game](https://github.com/kunjgit/GameZone/tree/main/Games/Bird_game)                                       | [Bubble Blast Game](https://github.com/kunjgit/GameZone/tree/main/Games/Bubble_Blast_Game)              | [Emoji Charades](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Charades)                         | [Drum And Kit](https://github.com/kunjgit/GameZone/tree/main/Games/Drum_Kit_Game)                                  | [Rock Paper Scissors](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_Paper_Scissors)              |
 | [Frogger](https://github.com/kunjgit/GameZone/tree/main/Games/Frogger)                                           | [!morethan5 ](https://github.com/kunjgit/GameZone/tree/main/Games/Not_morethan5)                        | [Unruly Tower](https://github.com/kunjgit/GameZone/tree/main/Games/Unruly_Tower)                             | [Maze Game](https://github.com/kunjgit/GameZone/tree/main/Games/MazeGame)                                          | [Connect4](https://github.com/kunjgit/GameZone/tree/main/Games/Connect4)                                    |
 | [Spelling_Bee](https://github.com/kunjgit/GameZone/tree/main/Games/Spelling_Bee)                                 | [2048](https://github.com/kunjgit/GameZone/tree/main/Games/2048)                                        | [Spin the Wheel](https://github.com/kunjgit/GameZone/tree/main/Games/Spin_the_wheel)                         | [Breakout](https://github.com/kunjgit/GameZone/tree/main/Games/Breakout)                                           | [Tower Blocks](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Blocks)                            |

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