diff --git a/Games/Sky_Jumper/README.md b/Games/Sky_Jumper/README.md new file mode 100644 index 0000000000..bf47b1f880 --- /dev/null +++ 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 + cd sky-jumper diff --git a/Games/Sky_Jumper/game.js b/Games/Sky_Jumper/game.js new file mode 100644 index 0000000000..ad1c57b616 --- /dev/null +++ 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 new file mode 100644 index 0000000000..c5fc9699a2 --- /dev/null +++ b/Games/Sky_Jumper/index.html @@ -0,0 +1,15 @@ + + + + + + Sky Jumper Game + + + +
+ +
+ + + diff --git a/Games/Sky_Jumper/styles.css b/Games/Sky_Jumper/styles.css new file mode 100644 index 0000000000..867f78f9f2 --- /dev/null +++ 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 index ad93e8faa9..58a38a3486 100644 --- a/README.md +++ b/README.md @@ -1337,6 +1337,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)| | Game | Game | Game | Game | Game | diff --git a/assets/images/Sky_Jumper.png b/assets/images/Sky_Jumper.png new file mode 100644 index 0000000000..586f2d7bad Binary files /dev/null and b/assets/images/Sky_Jumper.png differ