diff --git a/Delta-Projects b/Delta-Projects new file mode 160000 index 00000000..87d1700d --- /dev/null +++ b/Delta-Projects @@ -0,0 +1 @@ +Subproject commit 87d1700d102c3e081c8c19d5011dab5a1a3092af diff --git a/Rajvardhan-Singh-Rathore/README.md b/Rajvardhan-Singh-Rathore/README.md new file mode 100644 index 00000000..a11d8d74 --- /dev/null +++ b/Rajvardhan-Singh-Rathore/README.md @@ -0,0 +1,4 @@ +# flappy-bird +My flappy bird game (mini project) for mobile users. +# tech-stack +made using html css and javascript \ No newline at end of file diff --git a/Rajvardhan-Singh-Rathore/app.js b/Rajvardhan-Singh-Rathore/app.js new file mode 100644 index 00000000..b57aa8f0 --- /dev/null +++ b/Rajvardhan-Singh-Rathore/app.js @@ -0,0 +1,142 @@ +console.log("connected"); +let bird = document.querySelector('.bird'); +let pipe1top = document.querySelector('.pipe1top'); +let pipe1bottom = document.querySelector('.pipe1bottom'); +let pipe2bottom = document.querySelector('.pipe2bottom'); +let pipe2top = document.querySelector('.pipe2top'); +let p = document.querySelector('p'); +let p2 = document.querySelector('.p2'); +let slider1 = document.querySelector('.slider'); +let slider2 = document.querySelector('.slider2'); +let pipeContainer = document.querySelector('.pipeContainer'); +let randomHeight = 10; +let count= 0; +let mouseDown = false; +let birdCurrHeight = bird.offsetTop; +let pipe1Passed=false; +let pipe2Passed=false; +let gameOver=false; +// document.addEventListener("keydown",function(event){ +// if(event.code==="Space"){ +// bird.style.animation="none"; +// currTop = currTop-20; +// bird.style.top = currTop+"px"; +// console.log(randomHeight); +// } +// }); +let birdMove = setInterval(()=>{ + if(!mouseDown){ + birdCurrHeight+=5; + bird.style.top=birdCurrHeight+"px"; + } + if(birdCurrHeight>window.innerHeight+50||birdCurrHeight<=0){ + gameOver=true; + p.style.visibility="visible"; + pipeContainer.style.animationPlayState="paused"; + clearInterval(birdMove); + clearInterval(stop); + slider1.classList.add("paused"); + slider1.classList.add("paused"); + slider1.style.animation = "none"; + slider2.style.animation = "none"; + } + // if(birdCurrHeight>500){ + // p.style.visibility="visible"; + // } +},30) +pipeContainer.addEventListener("animationiteration",()=>{pipe1Passed=false;pipe2Passed=false;}); + +setInterval(()=>{ + let pipe1Rect = pipe1top.getBoundingClientRect(); + let birdRect = bird.getBoundingClientRect(); + if(!pipe1Passed&&pipe1Rect.rightwindow.innerWidth){ + // pipe1Passed=false; + // } + // if(pipe1Rect.left+pipe1Rect.widtht<=0){ + // pipe1Passed=false; + // } + let pipe2Rect = pipe2top.getBoundingClientRect(); + if(!pipe2Passed&&pipe2Rect.rightwindow.innerWidth){ + // pipe2Passed=false; + // } + // if(pipe2Rect.left+pipe2Rect.width<0){ + // pipe2Passed=false; + // } + +},30) +document.addEventListener("mousedown",()=>{ + mouseDown=true; + birdCurrHeight-=55; + bird.style.top=birdCurrHeight+"px"; +}); +document.addEventListener("mouseup",()=>{mouseDown=false;}); +setInterval(()=>{ + if(!gameOver){ + pipe1bottom.style.height = (randomHeight+Math.floor(Math.random()*5.5))+"rem"; + pipe1bottom.style.animationPlayState = "running"; + pipe1top.style.height = (randomHeight+Math.floor(Math.random()*5))+"rem"; + pipe1top.style.animationPlayState = "running"; + } + +},1000) +setInterval(()=>{ + if(!gameOver){ + pipe2bottom.style.height = (randomHeight+Math.floor(Math.random()*5.5))+"rem"; + pipe2bottom.style.animationPlayState = "running"; + pipe2top.style.height = (randomHeight+Math.floor(Math.random()*5))+"rem"; + pipe2top.style.animationPlayState = "running"; + } + +},3000) +//collision detection +function checkCollide(){ + let birdRect = bird.getBoundingClientRect(); + let pipe1BottomRect = pipe1bottom.getBoundingClientRect(); + let pipe1TopRect = pipe1top.getBoundingClientRect(); + let pipe2BottomRect = pipe2bottom.getBoundingClientRect(); + let pipe2TopRect = pipe2top.getBoundingClientRect(); + + if(isColliding(birdRect,pipe1BottomRect) + ||isColliding(birdRect,pipe1TopRect) + ||isColliding(birdRect,pipe2BottomRect) + ||isColliding(birdRect,pipe2TopRect)){ + p.style.visibility="visible"; + gameOver=true; + // pipe1top.style.animationPlayState="paused"; + slider1.classList.add("paused"); + slider2.classList.add("paused"); + slider1.style.animation = "none"; + slider2.style.animation = "none"; + pipeContainer.style.animationPlayState="paused"; + clearInterval(birdMove); + clearInterval(stop); + setInterval(()=>{location.reload();},5000); + } +} +function isColliding(rect1,rect2){ + return( + rect1.toprect2.top&& + rect1.right>rect2.left + ); +} +// setInterval(()=>{ +// if(birdCurrHeight>500){ +// p.style.visibility="visible"; +// } +// },30); +let stop = setInterval(checkCollide,30); + + + diff --git a/Rajvardhan-Singh-Rathore/assets/bird.png b/Rajvardhan-Singh-Rathore/assets/bird.png new file mode 100644 index 00000000..c6f9c3b0 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/bird.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/bird2.png b/Rajvardhan-Singh-Rathore/assets/bird2.png new file mode 100644 index 00000000..c437ff54 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/bird2.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/bird3.png b/Rajvardhan-Singh-Rathore/assets/bird3.png new file mode 100644 index 00000000..e67a4b54 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/bird3.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/bird4.png b/Rajvardhan-Singh-Rathore/assets/bird4.png new file mode 100644 index 00000000..f2585cbe Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/bird4.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/flappy-bg.jpeg b/Rajvardhan-Singh-Rathore/assets/flappy-bg.jpeg new file mode 100644 index 00000000..0be4e793 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/flappy-bg.jpeg differ diff --git a/Rajvardhan-Singh-Rathore/assets/pipe1bottom.png b/Rajvardhan-Singh-Rathore/assets/pipe1bottom.png new file mode 100644 index 00000000..2c57b32a Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/pipe1bottom.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/pipe1top.png b/Rajvardhan-Singh-Rathore/assets/pipe1top.png new file mode 100644 index 00000000..8b0a9675 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/pipe1top.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/pipe2bottom.png b/Rajvardhan-Singh-Rathore/assets/pipe2bottom.png new file mode 100644 index 00000000..1462b7e4 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/pipe2bottom.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/pipe2top.png b/Rajvardhan-Singh-Rathore/assets/pipe2top.png new file mode 100644 index 00000000..bc199ac5 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/pipe2top.png differ diff --git a/Rajvardhan-Singh-Rathore/assets/slider.jpeg b/Rajvardhan-Singh-Rathore/assets/slider.jpeg new file mode 100644 index 00000000..ae708cb0 Binary files /dev/null and b/Rajvardhan-Singh-Rathore/assets/slider.jpeg differ diff --git a/Rajvardhan-Singh-Rathore/index.html b/Rajvardhan-Singh-Rathore/index.html new file mode 100644 index 00000000..b517ea71 --- /dev/null +++ b/Rajvardhan-Singh-Rathore/index.html @@ -0,0 +1,29 @@ + + + + + + Flappy Bird - Play and enjoy + + + +
+ + + +

Game Over!

+

0

+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/Rajvardhan-Singh-Rathore/style.css b/Rajvardhan-Singh-Rathore/style.css new file mode 100644 index 00000000..c509eedd --- /dev/null +++ b/Rajvardhan-Singh-Rathore/style.css @@ -0,0 +1,175 @@ +html ,body{ + margin : 0; + margin-top: -20px; + padding : 0; + display : flex; + overflow : hidden; + align-items: center; + justify-content: center; + width : 100vw; + height : 100vh; +} +.paused{ + animation-play-state: paused; +} +.container{ + height : 760px; + width : 430px; + background-image: url(./assets/flappy-bg.jpeg); + background-size: cover; + display: flex; + position: relative; + justify-content: space-evenly; +} +.slider{ + width : 385px; + height : 40px; + align-self: flex-end; + margin-bottom: 76px; + position: absolute; + animation: slide 1.5s linear infinite; + /* left : 100%; */ + z-index: 1; +} + +.slider2{ + width : 385px; + height : 40px; + align-self: flex-end; + margin-bottom: 77.2px; + position: absolute; + animation : slide 1.5s linear infinite; + margin-left: 373px; + animation-delay: 0.5s; + z-index: 1; +} + +.bird{ + height : 3rem; + align-self : center; + position : absolute; + top : 191px; + z-index: 1; + /* animation-name : moveDown; + animation-duration : 1.5s; + animation-iteration-count: infinite; */ +} +@keyframes slide{ + 0%{ + transform: translateX(0); + } + 100%{ + transform: translateX(-50%); + } +} +@keyframes pipeSlide{ + 0%{ + transform: translateX(0%); + } + 100%{ + transform: translateX(-400%); + } +} +/* @keyframes pipeSlide2{ + 0%{ + transform: translateX(0%); + } + 100%{ + transform: translateX(-150%); + } +} +@keyframes pipeSlide22{ + 0%{ + transform: translateX(0%); + } + 100%{ + transform: translateX(-450%); + } +} */ +/* @keyframes moveDown{ + from{ + top : 391px; + } + to{ + top : 595px; + } +} */ +.stopped{ + animation: none; +} + +p{ + font-weight: 500; + color: #000; + font-size: 50px; + margin-left: 20px; + visibility: hidden; + z-index: 1; +} +.p2{ + font-weight: 500; + color: #fff; + font-size: 50px; + position: absolute; + left: 300px; + top: 20px; + visibility: visible; +} +.pipeContainer{ + display: flex; + gap: 200px; + width: 100%; + animation: pipeSlide 4s linear infinite; + margin-left: 530px; +} +.pipes1,.pipes2{ + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; +} + +.pipe1top{ + height : 10rem; + width : 5rem; + margin-top: -8px; + /* margin-left : -200px; */ + /* position: absolute; */ + /* right: -100%; */ + /* animation: pipeSlide 2.5s linear infinite; */ + animation-delay: 1.5s; + transform: rotate(1deg); +} +.pipe1bottom{ + height : 11rem; + width : 5rem; + margin: 0 auto; + /* margin-left : -200px; */ + position: relative; + /* align-self: flex-end; */ + bottom: 6.5rem; + /* right: -100%; */ + /* animation: pipeSlide2 2.5s linear infinite; */ + animation-delay: 1.5s; +} +.pipe2top{ + height : 10rem; + width : 6rem; + position: absolute; + top : -0.198rem; + /* right: -50%; */ + /* animation: pipeSlide22 3.5s linear infinite; */ + animation-delay: 2.5s; + animation-play-state: paused; +} +.pipe2bottom{ + height : 8rem; + width : 6rem; + /* align-self: flex-end; */ + position: absolute; + /* right: -50%; */ + bottom : 6.7rem; + /* animation: pipeSlide22 3.5s linear infinite; */ + animation-delay: 2.5s; + animation-play-state: paused; +} \ No newline at end of file