Flappy bird game

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

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.right<birdRect.left){
+        count++;
+        pipe1Passed=true;
+        p2.textContent=count;
+    }
+    // if(pipe1Rect.left>window.innerWidth){
+    //     pipe1Passed=false;
+    // }
+    // if(pipe1Rect.left+pipe1Rect.widtht<=0){
+    //     pipe1Passed=false;
+    // }
+    let pipe2Rect = pipe2top.getBoundingClientRect();
+    if(!pipe2Passed&&pipe2Rect.right<birdRect.left){
+        count++;
+        pipe2Passed=true;
+        p2.textContent=count;
+    }
+    // if(pipe2Rect.left>window.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.top<rect2.bottom&&
+        rect1.left<rect2.right&&
+        rect1.bottom>rect2.top&&
+        rect1.right>rect2.left
+    );
+}
+// setInterval(()=>{
+//     if(birdCurrHeight>500){
+//         p.style.visibility="visible";
+//     }
+// },30);
+let stop = setInterval(checkCollide,30);
+
+
+

Rajvardhan-Singh-Rathore/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flappy Bird - Play and enjoy</title>
+    <link rel = "stylesheet" href="style.css"/>
+</head>
+<body>
+    <div class="container">
+        <img class = "slider" src="./assets/slider.jpeg"/>
+        <img class = "slider2" src="./assets/slider.jpeg"/>
+        <img class = "bird" src="./assets/bird2.png"/>
+        <p><b>Game Over!</b></p>
+        <p class = "p2"><b>0</b></p>
+        <div class="pipeContainer">
+            <div class="pipes1">
+                <div class="top1pipe"><img class = "pipe1top" src="./assets/pipe1top.png"/></div>
+                <div class="bottom1pipe"><img class = "pipe1bottom" src="./assets/pipe1bottom.png"/></div>
+            </div>
+            <div class="pipes2">
+                <div class="top2pipe"><img class = "pipe2top" src="./assets/pipe2top.png"/></div>
+                <div class="bottom2pipe"><img class = "pipe2bottom" src="./assets/pipe2bottom.png"/></div>
+            </div>
+        </div>
+    </div>
+<script src="app.js"></script>
+</body>
+</html>

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;
+}