From 5666fa16d62002adb8275202e1c303d6003d7945 Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Fri, 2 Aug 2024 23:21:14 +0530 Subject: [PATCH 1/2] Added Skyjumper gme --- Games/Sky_Jumper/README.md | 31 +++++++++++++ Games/Sky_Jumper/game.js | 88 +++++++++++++++++++++++++++++++++++++ Games/Sky_Jumper/index.html | 15 +++++++ Games/Sky_Jumper/styles.css | 16 +++++++ README.md | 1 + 5 files changed, 151 insertions(+) create mode 100644 Games/Sky_Jumper/README.md create mode 100644 Games/Sky_Jumper/game.js create mode 100644 Games/Sky_Jumper/index.html create mode 100644 Games/Sky_Jumper/styles.css 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 | From 0cca2badd01973cd4b5a99219bf7dbcc671ba21a Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Sat, 3 Aug 2024 14:45:55 +0530 Subject: [PATCH 2/2] Added Image --- assets/images/Sky_Jumper.png | Bin 0 -> 9585 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 assets/images/Sky_Jumper.png diff --git a/assets/images/Sky_Jumper.png b/assets/images/Sky_Jumper.png new file mode 100644 index 0000000000000000000000000000000000000000..586f2d7bad735cf038d034e3a69ebed22d4fd2ac GIT binary patch literal 9585 zcmeAS@N?(olHy`uVBq!ia0y~yV6S9gV4lsv1{8@~YJCq#F%}28J29*~C-V}>VM%xN zb!1@J*w6hZkrl}2EbxddW?&F10b#~_Y4Q~e461CNE{-7;ac}S1=TA+QIPma$N5BE2 zhW~1!qPa@SZo-yRzsy?IjR z45#9x)DJ9-h=`Ez2T2|H{6vp0p{!%ifrVC8Uv3oSJp8eP5hQW`@ITo*|6*krHak9H z<-6PYSiNnsdc0+Y9@xZ+vTyJ2e0zWI+xrI$Gi3j%>w~l~FgSGVe**F~5O4@qg3V!I zaB_)*2sH>y6o;@BQa0_V$g-LTRZ(%!H|*LqSC}%6^QO!YbuArxAPfdYCAbwQxFKQ! zN}rfUl>x(iG(bSfU^In*Gs9?>0SCiq;Q$VX(ZT^745NhuBp5~uhta}eG%t+ih0#VM zBn^z_h0(k)niod%0t3Tne*v5dM*9np%rH8b01k)I{sK4{Mhl10!hwM*dBG?$GJ1Yr zIs*gKwtsge>VCXk-ORc9-C^_T?Muz49p?oGb3-j~q}$=lv1^APetY#4D4SRL@>xOV z%VXeS`3>ib&w}G(*p7E1LTKKbf5v}4T`#Zx{P73(nRVO!>TUMa{yGE+2Y>iH!^aq7 zNQjKqU661Xt-HYCK$ZMDI>iJEOPb{@SY}T<@a^2lx0_+``rO`sM?W0A#}2aD zz~3dVL2~oPuLV2yR{cykv?e-kmt{=UF2g*KEW_u6Bc(V@J1}|f@x!;~-{-r%yZ?B6 zLfKr~&nG{eo9Pd(G#C=>5HqFovcXfdgr;C!;3X*Dnc7ihpoE4rbv+s&qXB|{aRUV@ zL`^&U_2rLeWNzHMDN|SV;q1Yd$nW>E=kvdRU(3L-N8+5#4*NO(|GnFBc6$8&Jyw5e zzuf^fhYnm8tbC5W$yjjX+}eB6>*DsC<$ZqoZmsp6mR2vn(jC;_|wpSaR`(7K8Pn;-5>110#;G63It9#SLtghbna2BW;CZFR9G$3TJW M>FVdQ&MBb@03LOVd;kCd literal 0 HcmV?d00001