Code : Flappy Bird Game [HTML | CSS | JS]

Step 1: Create Index.html File.

  <!DOCTYPE html>
<html>
    <head>
        <title> Flappy Bird </title>
    </head>
    <body>
        <div id = "game"></div>
    </body>
</html>



Step 2: Create Style.css File.
body{
    user-select:none;
    -webkit-user-select:none;
}

#game{
    position:fixed;
    left:0top:0;
    width:100%height:100%;
    background:url("https://imgur.com/19GPbJd.jpg");
    background-size:cover;
    background-position:center;
}

#player{
    position:fixed;
    width:10vminheight:8vmin;
    top:calc(50% - 5vmin); left:1em;
    background:url("https://imgur.com/vcK646j.jpg");
    background-size:cover;
    background-position:center;
    z-index:2;
    transition:transform 0.5s;
}

.topCloud{
    position:fixed;
    left:100%top:0;
    width:25vminheight:10em;
    background:linear-gradient(to right#0f0greendarkgreen 45%darkgreen 65%green#0f0);
}

.bottomCloud{
    position:fixed;
    left:100%bottom:0;
    width:25vminheight:10em;
    background:linear-gradient(to right#0f0greendarkgreen 45%darkgreen 65%green#0f0);
}

.bottomCloud::after{
    content:"";
    position:absolute;
    width:110%height:2em;
    background:linear-gradient(135degdarkgreen#070);
    left:-5%top:0;
    box-shadow:0 0 3px black;
}

.topCloud::after{
    content:"";
    position:absolute;
    width:110%height:2em;
    background:linear-gradient(135degdarkgreen#070);
    left:-5%bottom:0;
    box-shadow:0 0 3px black;
}

#score{
    position:absolute;
    left:10pxtop:10px;
    width:autoheight:auto;
    z-index:2;
}

#playText{
    position:fixed;
    left:50%top:50%;
    transform:translate(-50%-50%);
    font-size:115%;
    letter-spacing:1px;
    word-spacing:2px;
    z-index:3;
}



Step 3: Create Script.js File.
var $ = (id=> document.getElementById(id);

//Intervals
var gravity;
var advance;
//Score, gravity power(1 default) and boolean for checking if the bird can fly.
var game_score = 0;
//Somewhat a falling acceleration.
var gravityPoints = 0;
//Bird alive or dead
var alive = true;
//The speed of poles coming towards the bird
const flySpeed = 9;
//extra jump height
const aditionalJump = 5;


//Bird "jump".
function fly(){
    if(alive === true){
        //Going up if the bird is alive
        $("player").style.transition = "all 0.5s";
        $("player").style.top=$("player").offsetTop - window.innerHeight/10 - aditionalJump + "px";
        clearInterval(gravity);
        gravity = false//forbiding user to click for bird jump until the last jump is finished
        $("player").style.transform = "rotate(-20deg)";
        gravityPoint = 0;
        //falling
        setTimeout(function(){
            if(gravity === false){
                gravity = setInterval(fall15);
                $("game").addEventListener("click"fly, {once:true});
                $("player").style.transition = "";
            }
        }, 500);
    }
}

//html elements made with js because that one div in html looks too great.
function createPlayer_and_score(){
    //Player
    let player = document.createElement("div");
    player.id = "player";
    $("game").appendChild(player);
    //Score
    let score = document.createElement("div");
    score.id = "score";
    $("game").appendChild(score);
    $("score").innerText = "Score: " + game_score;
    //Tap to play
    let play = document.createElement("div");
    play.id = "playText";
    $("game").appendChild(play);
    $("playText").innerText = "Tap to Play";
}

function write_score(){
    $("score").innerText = "Score: " + (++game_score);
}

window.onload = function(){
    createPlayer_and_score();
    createClouds();
    createClouds("calc(180% + 12.5vmin)");
    $("game").addEventListener("click"beginGame, {once:true});
};

function fall(){
    $("player").style.top=$("player").offsetTop + 1 + gravityPoint/9.81 + "px";
    $("player").style.transform = "rotate(15deg)";
    gravityPoint++
    //Collision with top and bottom borders of the screen
    checkBorders_replay();
}

function checkBorders_replay(){
    if($("player").offsetTop < 0){$("game").removeEventListener("click"fly);}
    if($("player").offsetTop + $("player").offsetHeight > window.innerHeight){
        clearInterval(gravity);
        clearInterval(advance);
        $("game").removeEventListener("click"fly);
        replay_button();
    }
}

function replay_button(){
    $("playText").innerText = "Tap to Replay";
    $("playText").style.display = "block";
    $("game").addEventListener("click",beginGame, {once:true});
}


//Creating the green things
function createClouds(x = "120%"){
    let topCloud = document.createElement("div");
    let bottomCloud = document.createElement("div");
    $("game").appendChild(topCloud);
    $("game").appendChild(bottomCloud);
    topCloud.classList = "topCloud";
    bottomCloud.classList = "bottomCloud";
    topCloud.style.left = x;
    bottomCloud.style.left = x;
    let randTop = Math.floor(Math.random() * 70);
    topCloud.style.height = randTop + "vh";
    bottomCloud.style.height = 100 - 30 - randTop + "vh";
}


function goForward(){
    //Advancing towards the clouds
    for(let z = 0z < document.getElementsByClassName("topCloud").lengthz++){
        document.getElementsByClassName("topCloud")[z].style.left = (document.getElementsByClassName("topCloud")[z].offsetLeft - 1) + "px";
        document.getElementsByClassName("bottomCloud")[z].style.left = (document.getElementsByClassName("bottomCloud")[z].offsetLeft - 1) + "px";
    }
    //removing the previous cloud then adding a new one
    if(document.getElementsByClassName("topCloud")[0].offsetLeft < -document.getElementsByClassName("topCloud")[0].offsetWidth){
        document.getElementsByClassName("topCloud")[0].remove();
        document.getElementsByClassName("bottomCloud")[0].remove();
        createClouds();
        write_score();
    }
    checkForCollision();
}


function checkForCollision(){
    //collision with the first top and bottom clouds
    if($("player").offsetLeft + $("player").offsetWidth > document.getElementsByClassName("topCloud")[0].offsetLeft || $("player").offsetLeft > document.getElementsByClassName("topCloud")[0].offsetLeft){
        if(($("player").offsetTopdocument.getElementsByClassName("topCloud")[0].offsetTop + document.getElementsByClassName("topCloud")[0].offsetHeight)  ||  ($("player").offsetTop + $("player").offsetHeight > document.getElementsByClassName("bottomCloud")[0].offsetTop)){
            $("game").removeEventListener("click"fly);
            clearInterval(advance);
            gravityPoints = 3;
            alive = false;
        }
    }
}

//start game and restart
function beginGame(){
    alive = true;
    $("player").style.transform = "rotate(0deg)";
    $("player").style.top = "calc(50% - 5vmin)";
    document.getElementsByClassName("topCloud")[0].style.left = "120%";
    document.getElementsByClassName("topCloud")[1].style.left = "calc(180% + 12.5vmin)";
    document.getElementsByClassName("bottomCloud")[0].style.left = "120%";
    document.getElementsByClassName("bottomCloud")[1].style.left = "calc(180% + 12.5vmin)";
    $("playText").style.display = "none";
    game_score = 0;
    gravityPoint = 0;
    $("score").innerText = "Score: 0";
    setTimeout(function(){
        gravity = setInterval(fall15);
        advance = setInterval(goForwardflySpeed);
        $("game").addEventListener("click"fly, {once:true});
    }, 500);
}



Step 4: Result.
game


If you found this helpful PLEASE SHARE IT.  You may also find these posts helpful!
 
 

To that end, I am only an email away.  Contact me with any questions.

Happy coding,

By 💜 Alex Tușinean 🍇 ( SoloLearn User )


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ If any Photos/Videos/Article/Blog/Content has an issue with this upload, please contact us and we will remove it immediately. Contact E-Mail :lawtantra@gmail.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Post a Comment

0 Comments