Adds Sky_Lift_Dash game

Adds Sky_Lift_Dash game index.html is in root folder of the Sky_Lift_Dash game folder root folder has README.md file, including description and screenshots
kunjgit · Aug 7, 2024 · b5a2bd6 · b5a2bd6
1 parent 7af1820
commit b5a2bd6
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 0 deletions.
diff --git a/Games/Sky_Lift_Dash/README.md b/Games/Sky_Lift_Dash/README.md
@@ -0,0 +1,21 @@
+# Sky Lift Dash
+
+## Description 📃
+Sky Lift Dash is a fun and engaging game where players guide a ball through a moving gap in horizontal walls to prevent it from reaching the top of the screen. The game challenges players to align the ball with the gap as the walls rise, providing an exciting and dynamic gameplay experience.
+
+## Functionalities 🎮
+- **Dynamic Walls**: Horizontal walls move upward continuously.
+- **Gravity Mechanic**: The ball falls under gravity.
+- **Gap Navigation**: Align the ball with the moving gap to avoid collision.
+- **Scoring System**: Track and display the number of successful passes through the gap.
+- **Game Over**: Triggered if the ball touches the top edge of the screen.
+
+## How to Play? 🕹️
+1. **Start**: Launch the game to begin.
+2. **Control**: Use the keyboard left/right arrow controls to move the paddle or adjust the ball's trajectory.
+3. **Objective**: Navigate the ball through the gap in the walls while avoiding collisions.
+4. **Goal**: Keep the ball from reaching the top of the screen by aligning it with the gap in the walls.
+
+## Screenshots 📸
+![Gameplay Screenshot](https://github.com/SanskarSinghiit/GameZone/blob/main/Games/Sky_Lift_Dash/images/maingame.png) 
+![Gameplay Screenshot](https://github.com/SanskarSinghiit/GameZone/blob/main/Games/Sky_Lift_Dash/images/gameover.png)
diff --git a/Games/Sky_Lift_Dash/images/gameover.png b/Games/Sky_Lift_Dash/images/gameover.png
diff --git a/Games/Sky_Lift_Dash/images/maingame.png b/Games/Sky_Lift_Dash/images/maingame.png
diff --git a/Games/Sky_Lift_Dash/index.html b/Games/Sky_Lift_Dash/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Fall game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id="game">
+    <div id="character"></div>
+</div>
+
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/Games/Sky_Lift_Dash/script.js b/Games/Sky_Lift_Dash/script.js
@@ -0,0 +1,94 @@
+var character = document.getElementById("character");
+var game = document.getElementById("game");
+var interval;
+var both = 0;
+var counter = 0;
+var currentBlocks = [];
+
+function moveLeft(){
+    var left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
+    if(left>0){
+        character.style.left = left - 2 + "px";
+    }
+}
+function moveRight(){
+    var left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
+    if(left<380){
+        character.style.left = left + 2 + "px";
+    }
+}
+document.addEventListener("keydown", event => {
+    if(both==0){
+        both++;
+        if(event.key==="ArrowLeft"){
+            interval = setInterval(moveLeft, 1);
+        }
+        if(event.key==="ArrowRight"){
+            interval = setInterval(moveRight, 1);
+        }
+    }
+});
+document.addEventListener("keyup", event => {
+    clearInterval(interval);
+    both=0;
+});
+
+var blocks = setInterval(function(){
+    var blockLast = document.getElementById("block"+(counter-1));
+    var holeLast = document.getElementById("hole"+(counter-1));
+    if(counter>0){
+        var blockLastTop = parseInt(window.getComputedStyle(blockLast).getPropertyValue("top"));
+        var holeLastTop = parseInt(window.getComputedStyle(holeLast).getPropertyValue("top"));
+    }
+    if(blockLastTop<400||counter==0){
+        var block = document.createElement("div");
+        var hole = document.createElement("div");
+        block.setAttribute("class", "block");
+        hole.setAttribute("class", "hole");
+        block.setAttribute("id", "block"+counter);
+        hole.setAttribute("id", "hole"+counter);
+        block.style.top = blockLastTop + 100 + "px";
+        hole.style.top = holeLastTop + 100 + "px";
+        var random = Math.floor(Math.random() * 360);
+        hole.style.left = random + "px";
+        game.appendChild(block);
+        game.appendChild(hole);
+        currentBlocks.push(counter);
+        counter++;
+    }
+    var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
+    var characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
+    var drop = 0;
+    if(characterTop <= 0){
+        alert("Game over. Score: "+(counter-9));
+        clearInterval(blocks);
+        location.reload();
+    }
+    for(var i = 0; i < currentBlocks.length;i++){
+        let current = currentBlocks[i];
+        let iblock = document.getElementById("block"+current);
+        let ihole = document.getElementById("hole"+current);
+        let iblockTop = parseFloat(window.getComputedStyle(iblock).getPropertyValue("top"));
+        let iholeLeft = parseFloat(window.getComputedStyle(ihole).getPropertyValue("left"));
+        iblock.style.top = iblockTop - 0.5 + "px";
+        ihole.style.top = iblockTop - 0.5 + "px";
+        if(iblockTop < -20){
+            currentBlocks.shift();
+            iblock.remove();
+            ihole.remove();
+        }
+        if(iblockTop-20<characterTop && iblockTop>characterTop){
+            drop++;
+            if(iholeLeft<=characterLeft && iholeLeft+20>=characterLeft){
+                drop = 0;
+            }
+        }
+    }
+    if(drop==0){
+        if(characterTop < 480){
+            character.style.top = characterTop + 2 + "px";
+        }
+    }else{
+        character.style.top = characterTop - 0.5 + "px";
+    }
+},1);
diff --git a/Games/Sky_Lift_Dash/style.css b/Games/Sky_Lift_Dash/style.css
@@ -0,0 +1,37 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+#game{
+    width: 400px;
+    height: 500px;
+    border: 1px solid black;
+    margin: 50px auto;
+    overflow: hidden;
+}
+#character{ 
+    width: 20px;
+    height: 20px;
+    background-color: red;
+    border-radius: 50%;
+    position: relative;
+    top: 400px;
+    left: 190px;
+    z-index: 1000000;
+}
+.block{
+    width: 400px;
+    height: 20px;
+    background-color: black;
+    position: relative;
+    top: 100px;
+    margin-top: -20px;
+}
+.hole{
+    width: 40px;
+    height: 20px;
+    background-color: white;
+    position: relative;
+    top: 100px;
+    margin-top: -20px;
+}