Merge pull request #422 from ratnojitsaha/ball_game

Ball_Slider Game added.
Priyanshi662 · Feb 24, 2024 · 0795218 · 0795218
2 parents 96047ea + a2ff253
commit 0795218
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 0 deletions.
diff --git a/Assets/games/Ball_Slider/ball_pic.png b/Assets/games/Ball_Slider/ball_pic.png
diff --git a/Assets/games/Ball_Slider/index.html b/Assets/games/Ball_Slider/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="main.js"></script>
+</html>
diff --git a/Assets/games/Ball_Slider/main.js b/Assets/games/Ball_Slider/main.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/Assets/games/Ball_Slider/style.css b/Assets/games/Ball_Slider/style.css
@@ -0,0 +1,37 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+#game{
+    width: 400px;
+    height: 500px;
+    border: 1px solid black;
+    margin: 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;
+}
diff --git a/index.html b/index.html
@@ -778,10 +778,16 @@ <h2>StopWatch</h2>
         </div>
 
         <div class="card" data-aos="zoom-out-up">
+            <img src="./Assets/games/Ball_Slider/ball_pic.png">
+            <h2>BallSlider</h2>
+            <!-- Button to navigate to page1.html -->
+            <button onclick="window.location.href='./Assets/games/Ball_Slider/index.html'">Go!</button><br>
+
             <img src="./Mars-Imagery/Screenshot 2024-02-24 161201.png">
             <h2>Mars Imagery</h2>
             <!-- Button to navigate to page1.html -->
             <button onclick="window.location.href='./Mars-Imagery/index.html'">Go!</button><br>
+
         </div>
 
         <br>