Merge pull request #5079 from Ayushmaanagarwal1211/sky-jumper

Added Sky Jumper Game
kunjgit · Aug 4, 2024 · 41d7292 · 41d7292
2 parents 52c5976 + 0cca2ba
commit 41d7292
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 0 deletions.
diff --git a/Games/Sky_Jumper/README.md b/Games/Sky_Jumper/README.md
@@ -0,0 +1,31 @@
+# Sky Jumper Game
+
+A simple 2D platformer game where the player jumps between platforms in a sky-themed environment. This game is built using HTML, CSS, and JavaScript.
+
+## Overview
+
+Sky Jumper is a basic web-based game where the player controls a character that can jump between floating platforms. It features:
+- Gravity and jumping mechanics
+- Basic platform collision detection
+- Simple controls using arrow keys and the space bar
+
+## Features
+
+- **Player Movement**: Move left and right using arrow keys.
+- **Jumping**: Jump using the space bar.
+- **Platforms**: Jump between floating platforms in the sky.
+- **Responsive Canvas**: Adjusts to the window size.
+
+## Getting Started
+
+### Prerequisites
+
+No additional software is required other than a modern web browser.
+
+### Setup
+
+1. **Clone the Repository**
+
+   ```bash
+   git clone <repository-url>
+   cd sky-jumper
diff --git a/Games/Sky_Jumper/game.js b/Games/Sky_Jumper/game.js
@@ -0,0 +1,88 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// Game variables
+const playerWidth = 50;
+const playerHeight = 50;
+const platformWidth = 150;
+const platformHeight = 20;
+let playerX = canvas.width / 2 - playerWidth / 2;
+let playerY = canvas.height - playerHeight - 100;
+let playerSpeedX = 0;
+let playerSpeedY = 0;
+const gravity = 0.5;
+const jumpPower = -10;
+const moveSpeed = 5;
+
+// Platforms
+const platforms = [
+    { x: 100, y: canvas.height - 50, width: platformWidth, height: platformHeight },
+    { x: 300, y: canvas.height - 150, width: platformWidth, height: platformHeight },
+    { x: 500, y: canvas.height - 250, width: platformWidth, height: platformHeight }
+];
+
+// Input
+const keys = {};
+
+// Event listeners
+window.addEventListener('keydown', (e) => keys[e.code] = true);
+window.addEventListener('keyup', (e) => keys[e.code] = false);
+
+function update() {
+    // Player movement
+    if (keys['ArrowLeft']) playerSpeedX = -moveSpeed;
+    else if (keys['ArrowRight']) playerSpeedX = moveSpeed;
+    else playerSpeedX = 0;
+
+    if (keys['Space'] && onGround()) {
+        playerSpeedY = jumpPower;
+    }
+
+    playerSpeedY += gravity;
+    playerX += playerSpeedX;
+    playerY += playerSpeedY;
+
+    // Collision detection
+    if (playerY + playerHeight > canvas.height) {
+        playerY = canvas.height - playerHeight;
+        playerSpeedY = 0;
+    }
+
+    platforms.forEach(platform => {
+        if (playerX < platform.x + platform.width &&
+            playerX + playerWidth > platform.x &&
+            playerY + playerHeight > platform.y &&
+            playerY + playerHeight < platform.y + platform.height &&
+            playerSpeedY > 0) {
+            playerY = platform.y - playerHeight;
+            playerSpeedY = 0;
+        }
+    });
+
+    // Draw everything
+    draw();
+    requestAnimationFrame(update);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw player
+    ctx.fillStyle = 'red';
+    ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
+
+    // Draw platforms
+    ctx.fillStyle = 'green';
+    platforms.forEach(platform => {
+        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
+    });
+}
+
+function onGround() {
+    return playerY + playerHeight >= canvas.height;
+}
+
+update();
diff --git a/Games/Sky_Jumper/index.html b/Games/Sky_Jumper/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sky Jumper Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="gameCanvasContainer">
+        <canvas id="gameCanvas"></canvas>
+    </div>
+    <script src="game.js"></script>
+</body>
+</html>
diff --git a/Games/Sky_Jumper/styles.css b/Games/Sky_Jumper/styles.css
@@ -0,0 +1,16 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #87CEEB; /* Sky blue */
+}
+
+#gameCanvasContainer {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+}
+
+canvas {
+    display: block;
+}
diff --git a/README.md b/README.md
@@ -1316,6 +1316,7 @@ This repository also provides one such platforms where contributers come over an
 |[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)|
 |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)|
 |[Catch_The_Object](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_The_Objects)|
+|[Sky_Jumper](https://github.com/kunjgit/GameZone/tree/main/Games/Sky_Jumper)|
  </center>
 
 | Game                                                                                                             | Game                                                                                                    | Game                                                                                                         | Game                                                                                                               | Game                                                                                                        |

diff --git a/assets/images/Sky_Jumper.png b/assets/images/Sky_Jumper.png