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-20characterTop){ + 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 @@ + + + + Ball game + + + +
+
+
+ + + + \ 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. +