Merge pull request #2107 from ananyag309/master

Added Mario Game
Sulagna-Dutta-Roy · Jul 4, 2024 · 14567ed · 14567ed
2 parents 7c4b14f + a6886ce
commit 14567ed
Show file tree

Hide file tree

Showing 10 changed files with 209 additions and 0 deletions.
diff --git a/Mario Jump/bg.png b/Mario Jump/bg.png
diff --git a/Mario Jump/dino.png b/Mario Jump/dino.png
diff --git a/Mario Jump/dragon.png b/Mario Jump/dragon.png
diff --git a/Mario Jump/gameover.mp3 b/Mario Jump/gameover.mp3
diff --git a/Mario Jump/index.html b/Mario Jump/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE 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">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
+    <script src="script.js"></script>
+    <title>MarioJump</title>
+</head>
+<body>
+    <div class="gameContainer">
+        <div class="gameOver">Welcome to Mario Jump</div>
+        <div class="mario"></div>
+        <div id="scoreCont"><strong>Your Score: 0</strong></div>
+        <div class="obstacle obstacleAni"></div>
+    </div>
+</body>
+</html>
diff --git a/Mario Jump/manifest.json b/Mario Jump/manifest.json
@@ -0,0 +1,22 @@
+{
+    "name": "MarioJump",
+    "short_name": "MarioJump",
+    "description": "A fun and interactive Mario Jump game.",
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "yellow",
+    "theme_color": "yellow",
+    "icons": [
+      {
+        "src": "/path/to/icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/path/to/icon-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
+
diff --git a/Mario Jump/mario.png b/Mario Jump/mario.png
diff --git a/Mario Jump/music.mp3 b/Mario Jump/music.mp3
diff --git a/Mario Jump/script.js b/Mario Jump/script.js
@@ -0,0 +1,76 @@
+score = 0;
+cross = true;
+
+audiogo = new Audio('gameover.mp3');
+audio = new Audio('music.mp3');
+
+setTimeout(() => {
+    audio.play();
+}, 1000);
+
+
+document.onkeydown = function(e) {
+    console.log("Key code is: ", e.keyCode);
+    if(e.keyCode == 38){
+        mario = document.querySelector('.mario');
+        mario.classList.add('animateMario');
+        setTimeout(() => {
+            mario.classList.remove('animateMario');
+        }, 700);
+    }
+    if(e.keyCode == 39){
+        mario = document.querySelector('.mario');
+        marioX = parseInt(window.getComputedStyle(mario, null).getPropertyValue('left'));
+        mario.style.left = marioX + 112 + 'px';
+    }
+    if(e.keyCode == 37){
+        mario = document.querySelector('.mario');
+        marioX = parseInt(window.getComputedStyle(mario, null).getPropertyValue('left'));
+        mario.style.left = (marioX - 112) + 'px';
+    }
+}
+
+setInterval(() => {
+    mario = document.querySelector('.mario');
+    gameOver = document.querySelector('.gameOver');
+    obstacle = document.querySelector('.obstacle');
+
+    mx = parseInt(window.getComputedStyle(mario, null).getPropertyValue('left'));
+    my = parseInt(window.getComputedStyle(mario, null).getPropertyValue('top'));
+
+    ox = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('left'));
+    oy = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('top'));
+
+    offsetX = Math.abs(mx-ox);
+    offsetY = Math.abs(my-oy);
+
+    if (offsetX < 80 && offsetY < 95) {
+        gameOver.innerHTML = 'Game Over - Reload to Play again';
+        obstacle.classList.remove('obstacleAni');
+        audiogo.play();
+        setTimeout(() => {
+            audiogo.pause();
+            audio.pause();
+        }, 1000);
+
+    }else if(offsetX < 50 && cross){
+        score+=1;
+        updateScore(score);
+        cross = false;
+        setTimeout(() => {
+            cross = true;
+        }, 1000);
+
+        setTimeout(() => {
+            aniDur = parseFloat(window.getComputedStyle(obstacle, null).getPropertyValue('animation-duration'));
+        newDur = aniDur - 0.1;
+        obstacle.style.animationDuration= newDur + "s";
+        }, 500);
+
+    }
+
+}, 10);
+
+function updateScore(score){
+    scoreCont.innerHTML = "Your Score: " + score;
+}
diff --git a/Mario Jump/style.css b/Mario Jump/style.css
@@ -0,0 +1,89 @@
+*{
+    margin: 0;
+    padding: 0;
+
+}
+
+body{
+    background-color: yellow;
+    overflow: hidden;
+}
+
+.gameContainer{
+    background-image: url(bg.png);
+    background-repeat: no-repeat;
+    background-size: 100vw 100vh;
+    width: 100%;
+    height: 100vh;
+}
+
+#scoreCont{
+    color: rgb(186, 218, 4);
+    font-family: 'Zen Dots', cursive;
+    position: absolute;
+    top: 12px;
+    /* left: 12px; */
+    right: 23px;
+    width: fit-content;
+    border: 2px solid black;
+    padding: 10px;
+    border-radius: 10px;
+}
+
+.gameOver{
+    position: relative;
+    font-family: 'Zen Dots', cursive;
+    /* visibility: hidden; */
+    top: 45px;
+    font-size: 45px;
+    text-align: center;
+}
+
+.mario{
+    background-image: url(mario.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 170px;
+    height: 195px;
+    position: absolute;
+    bottom: 0;
+    left: 72px;
+}
+
+.obstacle{
+    background-image: url(dragon.png);
+    background-size: cover;
+    width: 228px;
+    height: 155px;
+    position: absolute;
+    bottom: 0;
+    left: 992px;
+}
+
+.animateMario{
+    animation: mario 2s linear;
+}
+
+@keyframes mario {
+    0%{
+        bottom: 0;
+    }
+    50%{
+        bottom: 722px;
+    }
+    100%{
+        bottom: 0;
+    }
+}
+.obstacleAni{
+    animation: obstacleAni 4s linear infinite;
+}
+@keyframes obstacleAni {
+    0%{
+        left: 100vw;
+    }
+
+    100%{
+        left: -10vw;
+    }
+}