Ball-Fall-Game added

aman-raza · Oct 3, 2021 · bf615c1 · bf615c1
1 parent b566827
commit bf615c1
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 1 deletion.
diff --git a/Ball-Fall-Game/app.js b/Ball-Fall-Game/app.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 - 10 + "px";
+    }
+}
+function moveRight(){
+    var left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
+    if(left<380){
+        character.style.left = left + 10 + "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/Ball-Fall-Game/index.html b/Ball-Fall-Game/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ball game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id="game">
+    <div id="character"></div>
+</div>
+
+</body>
+<script src="app.js"></script>
+</html> 
diff --git a/Ball-Fall-Game/readme.md b/Ball-Fall-Game/readme.md
@@ -0,0 +1,6 @@
+#Description:
+===================================
+
+This is a game "Ball-fall" that i have made using javascript mainly. It has a .html file with styling done in the .css file added. This was fun to do as I was learning JS through this.
+
+===================================
diff --git a/Ball-Fall-Game/style.css b/Ball-Fall-Game/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/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -6,4 +6,4 @@ e.g -->  1. [Aman Raza](https://github.com/aman-raza)
 
 1.
 2.
-3.
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,4 +6,4 @@ e.g --> 1. [Aman Raza](https://github.com/aman-raza)

		1.
		2.
		3.