jorgefelipecunha · heitorMSarmento · Jul 2, 2022 · Jul 2, 2022
diff --git a/Images/clouds-gamer.png b/Images/clouds-gamer.png
diff --git a/Images/mario-game-over.png b/Images/mario-game-over.png
diff --git a/Images/pipe-game.png b/Images/pipe-game.png
diff --git a/Images/super-mario.gif b/Images/super-mario.gif
diff --git a/css/style.css b/css/style.css
@@ -1,78 +1,139 @@
 *{
-    margin:0;
+    margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 .game {
     width: 100%;
-    height: 100vh;
-    border-bottom: 100px solid rgb(24,174,24);
-    margin: 0 auto;
+    height: 80vh;
+    border-bottom: 5px solid #b09371;
+    margin: 0;
     position: relative;
     overflow: hidden;
-    background: linear-gradient(#87CEEB, #E0F6FF);
+    background: linear-gradient(#1343e3, #e0f6ff);
 }
 
-.pipe-game {
+.ground-game {
+    height: 19vh;
+    width: 100%;
+}
+
+.power {
+    position: absolute;
+    bottom: 80px;
+    width: 120px;
+    animation: pipe-animation 2.0s infinite linear;
+}
+
+.goku-run {
+    width: 200px;
     position: absolute;
-    bottom: 0;
-    width: 80px;
-    animation: pipe-animation 1.5s infinite linear;
+    bottom: -10px;
+    left: 250px;
 }
 
-.super-mario{
-    width:150px;
+.raditz {
+    width: 190px;
     position: absolute;
-    bottom: 0;
+    bottom: -10px;
+    right: 200px;
+    z-index: 1;
 }
 
-.jump-mario {
-    animation: mario-animation 500ms ease-out;
+.raditz-atack {
+    display: none;
+    width: 330px;
+    position: absolute;
+    bottom: -10px;
+    right: 100px;
+    z-index: 1;
+}
+
+.thunder {
+    width: 200px;
+    position: absolute;
+    bottom: -50px;
+    left: 350px; 
+    display: none;
 }
 
-.cloud-game{
+.clouds {
     position: absolute;
-    width: 550px;
-    animation: clouds-animation 20s infinite linear;
+    width: 900px;
+    animation: clouds-animation 30s infinite linear;
+}
+
+#intro {
+    background-color:lightgray;
+}
+
+.flex-container {
+    display: flex;
+    width: 80%;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+    padding-top: 100px;
+}
+
+.goku-logo {
+    width: 300px;
+    z-index: 1;
+    position: relative;
+}
+
+.dbz-logo {
+    width: 700px;
+    margin-top: -80px;
+    margin-bottom: 10px;
+}
+
+h2 {
+    font-family: 'Courier New', Courier, monospace;
+}
+
+button {
+    margin: 20px;
+    width: 200px;
+    height: 50px;
+    border-bottom: 3px solid black;
+    border-left: 3px solid black;
+    font-size: 24px;
+    background-color: rgb(238, 238, 25);
+}
+
+button:hover {
+    background-color: rgb(236, 8, 8);
+    color: white;
+    cursor: pointer;
+}
+
+#reset {
+    display: none;
+    position: relative;
+    top: -500px;
+    left: 700px;
+    z-index: 1;
+    font-size: 28px;
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    color:#1343e3;
 }
 
 @keyframes pipe-animation {
     from {
-        right: -80px;
-    }
-    to{
+        right: 200px;
+    }    
+    to {
         right: 100%;
     }
 }
 
 @keyframes clouds-animation {
-    from{
+    from {
         right: -550px;
     }
-    to{
-        right:  100%;
-    }
-}
-
-@keyframes mario-animation{
-    0% {
-        bottom:0;
-    }
-    40% {
-        bottom: 180px;
-    }
-    50% {
-        bottom: 180px;
-    }
-    60%{
-        bottom: 180px;
-    }
-    70%{
-        bottom: 180px;
-    }
-    100%{
-        bottom: 0%
+    to {
+        right: 100%;
     }
-
 }
diff --git a/game.html b/game.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dragon Ball Game - StartSE</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+<div class="game">
+    <img src="./img/nuvem.webp" class="clouds">
+    <img src="./img/goku-run.gif" class="goku-run">
+    <img src="./img/raditz.gif" class="raditz">
+    <img src="./img/raditz-ataq.gif" class="raditz-atack">
+    <img src="./img/thunder.gif" class="thunder">
+    <img src="./img/power.gif" class="power">
+
+</div>
+<div class="ground">
+    <img src="./img/ground.jpg" class="ground-game">
+    <a id="reset" href="./game.html">Não desista Kakarotto,<br> vamos lá...<br> tente outra vez!</a>
+</div>
+<script src="./js/script.js"></script>
+</body>
+</html>
diff --git a/img/goku-ataq.gif b/img/goku-ataq.gif
diff --git a/img/goku-down.gif b/img/goku-down.gif
diff --git a/img/goku-logo.webp b/img/goku-logo.webp
diff --git a/img/goku-run.gif b/img/goku-run.gif
diff --git a/img/ground.jpg b/img/ground.jpg
diff --git a/img/logo-dbz.png b/img/logo-dbz.png
diff --git a/img/nuvem.webp b/img/nuvem.webp
diff --git a/img/power.gif b/img/power.gif
diff --git a/img/raditz-ataq.gif b/img/raditz-ataq.gif
diff --git a/img/raditz-win.gif b/img/raditz-win.gif
diff --git a/img/raditz.gif b/img/raditz.gif
diff --git a/img/thunder.gif b/img/thunder.gif
diff --git a/index.html b/index.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="pt-br">
-    <head>
-        <meta charset="UTF-8"/>
-        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="./css/style.css" /> 
-        <title>Super Mario StartSe</title>
-    </head>
-    <body>
-        <div class="game">
-            <img src="./Images/clouds-gamer.png" class="cloud-game" />
-            <img src="./Images/super-mario.gif" class="super-mario" />
-            <img src="./Images/pipe-game.png" class="pipe-game" />
-        </div>
-        <script src="./js/script.js"></script>
-    </body>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dragon Ball Game - StartSE</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+<body id="intro">
+    <div class="flex-container">
+        <div><img src="./img/goku-logo.webp" class="goku-logo"></div>
+        <div><img src="./img/logo-dbz.png" class="dbz-logo"></div>
+        <div><h2>StartSE - Tech Academy</h2></div>
+        <form action="./game.html"><button type="submit">Let's Play!</button></form>
+    </div>
+</body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1,33 +1,69 @@
-const mario = document.querySelector(".super-mario");
-const pipe = document.querySelector(".pipe-game");
+const goku = document.querySelector('.goku-run');
+const power = document.querySelector('.power');
+const thunder = document.querySelector('.thunder')
 
 const jump = () => {
-  mario.classList.add("jump-mario");
+    goku.src = './img/goku-ataq.gif';
+    goku.style.bottom = "210px";
 
-  setTimeout(() => {
-    mario.classList.remove("jump-mario");
-  }, 500);
+    setTimeout(() => {
+        goku.src = './img/goku-run.gif'
+        goku.style.bottom = "-10px";
+    }, 700);
 };
 
 const loopGame = setInterval(() => {
-  const pipePosition = pipe.offsetLeft;
-  const marioPosition = +window
-    .getComputedStyle(mario)
-    .bottom.replace("px", "");
+    const powerPosition = power.offsetLeft;
+    const reset = document.querySelector('#reset');
+    const raditz = document.querySelector('.raditz');
+    const gokuPosition = +window
+        .getComputedStyle(goku)
+        .bottom.replace('px', '');
 
-  if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
-    pipe.style.animation = "none";
-    pipe.style.left = `${pipePosition}px`;
+     if (powerPosition <= 400 && powerPosition > 200 && gokuPosition < 150) {   
 
-    mario.style.animation = "none";
-    mario.style.bottom = `${marioPosition}px`;
+        thunder.style.display = 'block';
 
-    mario.src = "./Images/mario-game-over.png";
-    mario.style.width = "75px";
-    mario.style.marginLeft = "45px";
+        goku.src = './img/goku-down.gif';
+        goku.style.width = '180px';
+        goku.style.marginLeft = '45px';
+        goku.style.bottom = "-5px";
+
+        power.style.animation = 'none'
+        power.style.left = '-150px'
+
+        raditz.src = './img/raditz-win.gif'
+        raditz.style.width = '280px'
+
+        reset.style.display = 'block';
+
+
+        setTimeout(() => {
+            thunder.style.display = 'none'
+        }, 500);
+
+    }
 
-    clearInterval(loopGame);
-  }
 }, 10);
 
-document.addEventListener("keydown", jump);
+const loopRaditz = setInterval(() => {
+    const raditzPosition = document.querySelector('.raditz').offsetLeft;
+    const raditz = document.querySelector('.raditz');
+    const raditzAtack = document.querySelector('.raditz-atack')
+    const powerPosition = power.offsetLeft;
+
+     if (powerPosition >= raditzPosition ) {    
+
+        raditz.style.display = 'none';
+        raditzAtack.style.display = 'block';
+
+        setTimeout(() => {
+            raditz.style.display = 'block';
+            raditzAtack.style.display = 'none';
+        }, 450);
+    }
+
+}, 10);
+
+
+document.addEventListener('keydown', jump);