digitalinnovationone · Igu333 · Jan 4, 2025 · Jan 4, 2025 · Jan 4, 2025
diff --git a/Detona Ralph/Audios/hit.m4a b/Detona Ralph/Audios/hit.m4a
diff --git a/Detona Ralph/Images/favicon.jpg b/Detona Ralph/Images/favicon.jpg
diff --git a/Detona Ralph/Images/player.png b/Detona Ralph/Images/player.png
diff --git a/Detona Ralph/Images/ralph.png b/Detona Ralph/Images/ralph.png
diff --git a/Detona Ralph/Images/wall.png b/Detona Ralph/Images/wall.png
diff --git a/Detona Ralph/Scripts/engine.js b/Detona Ralph/Scripts/engine.js
@@ -0,0 +1,68 @@
+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,
+        currentTime: 60,
+    },
+
+    actions:{
+        timerId: setInterval(randomSquare,1000),
+        countDownTimerId: setInterval(countDown, 1000),
+    },
+};
+
+function countDown(){
+    state.values.currentTime--;
+    state.view.timeLeft.textContent = state.values.currentTime;
+
+    if(state.values.currentTime <= 0){
+        clearInterval(state.actions.countDownTimerId)
+        clearInterval(state.actions.timerId)
+        alert("Game Over! O seu resultado foi: " + state.values.result);
+    }
+}
+
+function playSound (){
+    let audio = new Audio("./Audios/hit.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();
+            }
+        });
+    });
+}
+
+function init() {
+    addListenerHitBox();
+}
+
+init ();
diff --git a/Detona Ralph/Styles/main.css b/Detona Ralph/Styles/main.css
@@ -0,0 +1,34 @@
+.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 #ffae00;}
+
+.panel {margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content:center;}
+
+.square {height: 150px;
+    width: 150px;
+    background-color: #ffae00;
+border: 1px solid #000000;} 
+
+.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/Detona Ralph/Styles/reset.css b/Detona Ralph/Styles/reset.css
@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+* {font-family: 'Press Start 2P', serif;
+margin: 0;
+padding: 0;
+box-sizing: border-box;}
diff --git a/Detona Ralph/index.html b/Detona Ralph/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Detona Ralph</title>
+    <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" height="60px"/>
+                <h2>x3</h2>
+            </div>
+        </div>
+
+        <div class="panel">
+            <div class="panel-row">
+                <div class="square enemy" id="1"></div>
+                <div class="square" id="2"></div>
+                <div class="square" id="3"></div>
+            </div>
+            <div class="panel-row">
+                <div class="square" 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>