diff --git a/Mario Jump/bg.png b/Mario Jump/bg.png new file mode 100644 index 00000000..75e46ba6 Binary files /dev/null and b/Mario Jump/bg.png differ diff --git a/Mario Jump/dino.png b/Mario Jump/dino.png new file mode 100644 index 00000000..fb9a2cf6 Binary files /dev/null and b/Mario Jump/dino.png differ diff --git a/Mario Jump/dragon.png b/Mario Jump/dragon.png new file mode 100644 index 00000000..a759f6c7 Binary files /dev/null and b/Mario Jump/dragon.png differ diff --git a/Mario Jump/gameover.mp3 b/Mario Jump/gameover.mp3 new file mode 100644 index 00000000..12084bfd Binary files /dev/null and b/Mario Jump/gameover.mp3 differ diff --git a/Mario Jump/index.html b/Mario Jump/index.html new file mode 100644 index 00000000..5fe243b4 --- /dev/null +++ b/Mario Jump/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + MarioJump + + +
+
Welcome to Mario Jump
+
+
Your Score: 0
+
+
+ + \ No newline at end of file diff --git a/Mario Jump/manifest.json b/Mario Jump/manifest.json new file mode 100644 index 00000000..6178327c --- /dev/null +++ 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" + } + ] + } + \ No newline at end of file diff --git a/Mario Jump/mario.png b/Mario Jump/mario.png new file mode 100644 index 00000000..e87643b8 Binary files /dev/null and b/Mario Jump/mario.png differ diff --git a/Mario Jump/music.mp3 b/Mario Jump/music.mp3 new file mode 100644 index 00000000..17184566 Binary files /dev/null and b/Mario Jump/music.mp3 differ diff --git a/Mario Jump/script.js b/Mario Jump/script.js new file mode 100644 index 00000000..6d185a1d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Mario Jump/style.css b/Mario Jump/style.css new file mode 100644 index 00000000..338f54b4 --- /dev/null +++ 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; + } +} \ No newline at end of file