Merge pull request #2196 from Niraj1608/mariogame

Add Mario Jump game #350 #2168
iamrahulmahato · Nov 7, 2024 · 60f8d6d · 60f8d6d
2 parents e682037 + eaf5dd5
commit 60f8d6d
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 0 deletions.
diff --git a/Mario-game/README.md b/Mario-game/README.md
@@ -0,0 +1,21 @@
+### Game-Mario-Jump
+
+This Mario-inspired game requires you to press the spacebar to make Mario jump and avoid colliding with passing pipes.
+
+### Technologies Used:
+<div style="display: inline_block">
+  <img align="center" alt="JavaScript" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg">
+  <img align="center" alt="HTML" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg">
+  <img align="center" alt="CSS" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg">
+</div>
+
+### Project Images:
+<div>
+ <img width="300px" src="https://i.imgur.com/1bUH48J.png" alt="Game image" >
+ <img width="300px" src="https://i.imgur.com/a0xz4kI.png" alt="Game image" > 
+</div>
+
+<br>
+
+### Project Link:
+[https://niraj1608.github.io/Game-Mario/](https://niraj1608.github.io/Game-Mario/)
diff --git a/Mario-game/css/style.css b/Mario-game/css/style.css
@@ -0,0 +1,87 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.game-board{
+    width: 100%;
+    height: 500px;
+    border-bottom: 15px solid #049c18;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(#87ceeb, #e0f6ff);
+}
+
+.pipe{
+    position: absolute;
+    bottom: 0;
+    width: 80px;
+    animation: pipe-animation 2s infinite linear;
+}
+
+.mario{
+    width: 150px;
+    position: absolute;
+    bottom: 0;
+
+}
+
+.jump{
+    animation: jump 500ms ease-out;
+}
+
+.clouds{
+    position: absolute;
+    width: 550px;
+    animation: clouds-animation 20s infinite linear;
+}
+
+@keyframes clouds-animation {
+    from{
+        right: -550px;
+    }
+
+    to{
+        right: 100%;
+    }
+}
+
+@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: 0;
+    }
+}
+
+
+
+
+
diff --git a/Mario-game/images/clouds.png b/Mario-game/images/clouds.png
diff --git a/Mario-game/images/game-over.png b/Mario-game/images/game-over.png
diff --git a/Mario-game/images/mario.gif b/Mario-game/images/mario.gif
diff --git a/Mario-game/images/pipe.png b/Mario-game/images/pipe.png
diff --git a/Mario-game/index.html b/Mario-game/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Mario jump</title>
+
+    <link rel="stylesheet" href="./css/style.css">
+    <script src="./js/script.js" defer></script>    
+</head>
+<body>
+
+    <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/Mario-game/js/script.js b/Mario-game/js/script.js
@@ -0,0 +1,46 @@
+const mario = document.querySelector('.mario');
+const pipe = document.querySelector('.pipe');
+const clouds = document.querySelector('.clouds');
+
+const jump = () => {
+    mario.classList.add('jump');
+
+    setTimeout(()=> {
+
+        mario.classList.remove('jump');
+
+    }, 500)
+}
+
+const loop = setInterval(() => {
+
+
+        const cloudsPosition = clouds.offsetLeft;
+        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';
+
+            clouds.style.animation = 'none';
+            clouds.style.left = `${cloudsPosition}px`;
+
+            clearInterval(loop);
+
+        }
+
+    }, 10);
+
+
+
+
+document.addEventListener('keydown', jump);