top of page
Search

Flappy Bird practice assessment

  • Writer: Keshav Batra
    Keshav Batra
  • Aug 19, 2022
  • 2 min read

Now that I've finished the coding practice, I've decided that I needed to practice making the game itself. So I watched a video to help me do it and it actually helped a lot. I was able to code the movement and the backgrounds. It got very hard and complicated towards the end, but I've managed to complete it with help.



The Style Code is for the surroundings of the website

*{
    padding: 0;
    margin: 0;
}
#game{
    width: 400px;
    height: 500px;
    border: 1px solid black;
    margin: auto;
    overflow: hidden;
}
#block{
    width: 50px;
    height: 500px;
    background-color: black;
    position: relative;
    left: 400px;
    animation: block 2s infinite linear;
}
@keyframes block{
    0%{left:400px}
    100%{left:-50px}
}
#hole{
    width: 50px;
    height: 150px;
    background-color: white;
    position: relative;
    left: 400px;
    top: -500px;
    animation: block 2s infinite linear; 
}
#character{
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
    top: 100px;
    border-radius: 50%;
}

This script is for the movement of the character

var block = document.getElementById("block");
var hole = document.getElementById("hole");
var character = document.getElementById("character");
var jumping = 0;
var counter = 0;

hole.addEventListener('animationiteration', () => {
    var random = -((Math.random()*300)+150);
    var top = (random*100)+150;
    hole.style.top = random + "px";
    counter++;
});
setInterval(function(){ //
    var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    if(jumping==0){
        character.style.top = (characterTop+3)+"px";
    }
    var blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
    var holeTop = parseInt(window.getComputedStyle(hole).getPropertyValue("top"));
    var characterTop = 
    parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    var cTop = -(500-characterTop)
    if((characterTop>480)||((blockLeft<20) && (blockLeft>-50) && ((cTop<holeTop)||(cTop>holeTop+130)))){
        alert("Game over. Score:" + counter);
        character.style.top = 100 + "px";
        counter=0;
    }
},10);
function jump(){
    jumping = 1;
    jumpCount = 0;
    var jumpInterval = setInterval (function() {
        var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    if((characterTop>6)&&(counter<15)){
        character.style.top = (characterTop-5)+"px";
    }
    
    if (jumpCount>20){
        clearInterval(jumpInterval);
        jumping=0;
        jumpCount=0;
    }
    jumpCount++;
    },10);
}

Index.HTML

<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game">
        <div id="block"></div>
        <div id="hole"></div>
        <div id="character"></div>
    </div>
</body>
<script src="script.js"></script>
<html>





 
 
 

Comments

bottom of page