Mini Game Mario

MatheusCesarAmaral · Aug 25, 2023 · f4e514f · f4e514f
1 parent 229bbad
commit f4e514f
Show file tree

Hide file tree

Showing 12 changed files with 293 additions and 4 deletions.
diff --git a/JogoMario/.vscode/settings.json b/JogoMario/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/JogoMario/css/style.css b/JogoMario/css/style.css
@@ -0,0 +1,180 @@
+*{
+
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+
+}
+
+.game-board {
+
+    width: 100%;
+    height: 500px;
+    border-bottom: 15px solid rgb(35, 160, 35);
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(#87ceeb, #e0f6ff);
+
+}
+
+.pipe{
+
+position: absolute;
+bottom: 0;
+width: 80px;
+
+
+animation: pipe-animation 1.5s infinite linear;
+
+
+}
+
+
+.mario{
+
+width: 150px;
+position: absolute;
+bottom: 0px;
+
+
+}
+
+.jump{
+
+    animation: jump 500ms  ease-out;
+
+
+}
+
+
+.clouds{
+
+position: absolute;
+width: 550px;
+animation: clouds-animation 30s infinite linear;
+
+
+
+}
+
+
+#score.score {
+    display: inline-block;
+    padding: 10px;
+    font-size: 28px;
+    background-color: #87ceeb;
+    color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s ease;
+  }
+
+  #score.score:hover {
+    background-color: #00bfff;
+    transform: scale(1.1);
+  }
+
+   .score {
+  font-family: 'Arial', sans-serif;
+  font-size: 24px;
+  color: #FFD700;
+  text-shadow: 2px 2px 4px #000000;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+
+
+
+
+
+
+
+@keyframes pipe-animation {
+
+from{
+
+right: -80px;
+
+
+}
+
+to{
+
+right: 100%;
+
+
+}
+
+
+}
+
+@keyframes jump{
+
+
+    0%{
+
+      bottom: 0;
+
+    }
+
+
+    40%{
+
+
+        bottom: 180px;
+
+    }
+
+    50%{
+
+
+        bottom: 180px;
+
+
+
+    }
+
+
+    60%{
+
+
+        bottom: 180px;
+
+
+
+    }
+
+
+    100%{
+
+
+    bottom: 0px;
+
+    }
+
+
+
+
+
+
+}
+
+
+@keyframes clouds-animation {
+
+from{
+
+right: -550px;
+
+}
+
+to{
+
+ right: 100%;
+
+}
+
+}
diff --git a/JogoMario/images/clouds.png b/JogoMario/images/clouds.png
diff --git a/JogoMario/images/game-over.png b/JogoMario/images/game-over.png
diff --git a/JogoMario/images/mario.gif b/JogoMario/images/mario.gif
diff --git a/JogoMario/images/pipe.png b/JogoMario/images/pipe.png
diff --git a/JogoMario/index.html b/JogoMario/index.html
@@ -0,0 +1,45 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="./css/style.css">
+
+    <script src="./js/script.js" defer></script>
+
+
+
+    <style>
+
+       .score {
+    font-family: 'Arial', sans-serif;
+    font-size: 24px;
+    color: #FFD700;
+    text-shadow: 2px 2px 4px #000000;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+</style>
+
+
+
+    <title>Mario Brasileiro</title>
+</head>
+<body>
+
+<audio id="background-music" src="./musica/SUPER MARIO BROS MÚSICAS.mp3" autoplay loop></audio>
+<audio id="death-music" src="./musica/morte.mp3"></audio>
+
+<p class="score">Esta é sua pontuação:</p>
+
+<span id="score" class="score"></span> <span id="pontuacao"></span>
+
+<div class="game-board">
+    <img src="./images/clouds.png" class="clouds">
+    <img src="./images/mario.gif" class="mario">
+    <img src="./images/pipe.png" class="pipe">
+</div>
+
+</body>
+</html>
diff --git a/JogoMario/js/script.js b/JogoMario/js/script.js
@@ -0,0 +1,63 @@
+const mario = document.querySelector('.mario');
+const pipe = document.querySelector('.pipe');
+const backgroundMusic = document.getElementById('background-music');
+const deathMusic = document.getElementById('death-music');
+const scoreElement = document.getElementById('score');
+
+let isJumping = false;
+let gameOver = false;
+let score = 0;
+let canScore = true;
+
+const jump = (event) => {
+  if (event.key === ' ' && !isJumping && !gameOver) {
+    isJumping = true;
+    mario.classList.add('jump');
+
+    setTimeout(() => {
+      mario.classList.remove('jump');
+      isJumping = false;
+    }, 500);
+  }
+};
+
+const loop = setInterval(() => {
+  const pipePosition = pipe.offsetLeft;
+  const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', '');
+
+  if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
+    pipe.style.animation = 'none';
+    pipe.style.left = `${pipePosition}px`;
+
+    mario.style.animation = 'none';
+    mario.style.bottom = `${marioPosition}px`;
+
+    mario.src = './images/game-over.png';
+    mario.style.width = '75px';
+    mario.style.marginLeft = '50px';
+
+    // Tocar a música de morte
+    backgroundMusic.pause();
+    deathMusic.play();
+
+    gameOver = true;
+    clearInterval(loop);
+  } else if (pipePosition <= 0 && !gameOver && canScore) {
+    // O Mario passou pelo cano com sucesso
+    score++;
+    scoreElement.textContent = score;
+    canScore = false; // Impede que a pontuação seja incrementada novamente no mesmo pulo
+  } else if (pipePosition > 0 && !canScore) {
+    canScore = true; // Permite que a pontuação seja incrementada novamente
+  }
+}, 10);
+
+document.addEventListener('keydown', jump);
+
+
+
+
+startButton.addEventListener('click', () => {
+  startButton.style.display = 'none';
+  backgroundMusic.play();
+});
diff --git a/JogoMario/musica/SUPER MARIO BROS MÚSICAS.mp3 b/JogoMario/musica/SUPER MARIO BROS MÚSICAS.mp3
diff --git a/JogoMario/musica/morte.mp3 b/JogoMario/musica/morte.mp3
diff --git a/index.html b/index.html
@@ -92,9 +92,7 @@
             data-aos-easing="ease-in-out"
           >
             <a href="https://youtu.be/TnGl01FkMMo?si=buHLY6MFYYijm_qF" target="_blank">Assistir trailer</a>
-            <button>
-              Comprar ingresso
-            </button>
+            <a href="/JogoMario/index.html" id="game">Mini Game Mario</a>
           </div>
       </div>
 

diff --git a/styles/main.css b/styles/main.css
@@ -43,7 +43,7 @@ main {
     background: var(--red);
 }
 
-.main__info div button {
+#game {
     background: transparent;
     border: 1px solid var(--green);
 }