From bf615c16b884342cd0159c9d639b61d6a667da32 Mon Sep 17 00:00:00 2001
From: Ashutosh Rai <ashutoshrai20bcs20@iiitkottayam.ac.in>
Date: Sun, 3 Oct 2021 12:38:42 +0530
Subject: [PATCH] Ball-Fall-Game added

---
 Ball-Fall-Game/app.js     | 94 +++++++++++++++++++++++++++++++++++++++
 Ball-Fall-Game/index.html | 14 ++++++
 Ball-Fall-Game/readme.md  |  6 +++
 Ball-Fall-Game/style.css  | 37 +++++++++++++++
 CONTRIBUTING.md           |  2 +-
 5 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 Ball-Fall-Game/app.js
 create mode 100644 Ball-Fall-Game/index.html
 create mode 100644 Ball-Fall-Game/readme.md
 create mode 100644 Ball-Fall-Game/style.css

diff --git a/Ball-Fall-Game/app.js b/Ball-Fall-Game/app.js
new file mode 100644
index 0000000..dd147bd
--- /dev/null
+++ 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);
\ No newline at end of file
diff --git a/Ball-Fall-Game/index.html b/Ball-Fall-Game/index.html
new file mode 100644
index 0000000..b61bb00
--- /dev/null
+++ 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> 
\ No newline at end of file
diff --git a/Ball-Fall-Game/readme.md b/Ball-Fall-Game/readme.md
new file mode 100644
index 0000000..eb1cb93
--- /dev/null
+++ 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.
+
+===================================
\ No newline at end of file
diff --git a/Ball-Fall-Game/style.css b/Ball-Fall-Game/style.css
new file mode 100644
index 0000000..c3993b9
--- /dev/null
+++ 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; 
+}
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5f5b93b..5cca57e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,4 +6,4 @@ e.g -->  1. [Aman Raza](https://github.com/aman-raza)
 
 1.
 2.
-3.
+