Send/Recieve Files Online (Recieve Files by Enter 6 Digit Code) 👉

X
Code copied to clipboard!

POMSD

Advertisement

Flappy Bird Souce Code

 <!DOCTYPE html>

<html>

<head>

    <title>Flappy Bird</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        body {

            font-family: 'Pacifico';

            display: flex;

            justify-content: center;

        }

        canvas {

            border: 1px solid #0a3cda;

            margin: 10px;

        }

    </style>

</head>

<body>

    <canvas id="myCanvas" width="320" height="480"

        style="background:url('http://s2js.com/img/etc/flappyback.png'); background-size: 100%; height: 95%">

        Your browser does not support the HTML5 canvas tag.

    </canvas>

    <audio id="backgroundMusic" src="https://www.chosic.com/download-audio/27021/" loop></audio>

    <audio id="gameOverSound" src="https://www.myinstants.com/en/instant/flappy-birds-die/?utm_source=copy&utm_medium=share"></audio>

    <script>

        var ctx = myCanvas.getContext('2d');

        var FPS = 40;

        var jump_amount = -10;

        var max_fall_speed = +10;

        var acceleration = 1;

        var pipe_speed = -2;

        var game_mode = 'prestart';

        var time_game_last_running;

        var bottom_bar_offset = 0;

        var pipes = [];

        var score = 0; // Score variable


        // Audio elements

        var backgroundMusic = document.getElementById('backgroundMusic');

        var gameOverSound = document.getElementById('gameOverSound');


        function MySprite(img_url) {

            this.x = 0;

            this.y = 0;

            this.visible = true;

            this.velocity_x = 0;

            this.velocity_y = 0;

            this.MyImg = new Image();

            this.MyImg.src = img_url || '';

            this.angle = 0;

            this.flipV = false;

            this.flipH = false;

        }

        MySprite.prototype.Do_Frame_Things = function () {

            ctx.save();

            ctx.translate(this.x + this.MyImg.width / 2, this.y + this.MyImg.height / 2);

            ctx.rotate((this.angle * Math.PI) / 180);

            if (this.flipV) ctx.scale(1, -1);

            if (this.flipH) ctx.scale(-1, 1);

            if (this.visible)

                ctx.drawImage(this.MyImg, -this.MyImg.width / 2, -this.MyImg.height / 2);

            this.x = this.x + this.velocity_x;

            this.y = this.y + this.velocity_y;

            ctx.restore();

        };

        function ImagesTouching(thing1, thing2) {

            if (!thing1.visible || !thing2.visible) return false;

            if (

                thing1.x >= thing2.x + thing2.MyImg.width ||

                thing1.x + thing1.MyImg.width <= thing2.x

            )

                return false;

            if (

                thing1.y >= thing2.y + thing2.MyImg.height ||

                thing1.y + thing1.MyImg.height <= thing2.y

            )

                return false;

            return true;

        }

        function Got_Player_Input(MyEvent) {

            switch (game_mode) {

                case 'prestart': {

                    game_mode = 'running';

                    backgroundMusic.play(); // Start background music

                    break;

                }

                case 'running': {

                    bird.velocity_y = jump_amount;

                    break;

                }

                case 'over':

                    if (new Date() - time_game_last_running > 1000) {

                        reset_game();

                        game_mode = 'running';

                        break;

                    }

            }

            MyEvent.preventDefault();

        }

        addEventListener('touchstart', Got_Player_Input);

        addEventListener('mousedown', Got_Player_Input);

        addEventListener('keydown', Got_Player_Input);

        function make_bird_slow_and_fall() {

            if (bird.velocity_y < max_fall_speed) {

                bird.velocity_y = bird.velocity_y + acceleration;

            }

            if (bird.y > myCanvas.height - bird.MyImg.height) {

                bird.velocity_y = 0;

                game_mode = 'over';

                backgroundMusic.pause(); // Stop background music

                gameOverSound.play(); // Play game over sound

            }

            if (bird.y < 0 - bird.MyImg.height) {

                bird.velocity_y = 0;

                game_mode = 'over';

                backgroundMusic.pause(); // Stop background music

                gameOverSound.play(); // Play game over sound

            }

        }


        function add_pipe(x_pos, top_of_gap, gap_width) {

            var top_pipe = new MySprite();

            top_pipe.MyImg = pipe_piece;

            top_pipe.x = x_pos;

            top_pipe.y = top_of_gap - pipe_piece.height;

            top_pipe.velocity_x = pipe_speed;

            pipes.push(top_pipe);

            var bottom_pipe = new MySprite();

            bottom_pipe.MyImg = pipe_piece;

            bottom_pipe.flipV = true;

            bottom_pipe.x = x_pos;

            bottom_pipe.y = top_of_gap + gap_width;

            bottom_pipe.velocity_x = pipe_speed;

            pipes.push(bottom_pipe);

        }

        function make_bird_tilt_appropriately() {

            if (bird.velocity_y < 0) {

                bird.angle = -15;

            } else if (bird.angle < 70) {

                bird.angle = bird.angle + 4;

            }

        }

        function show_the_pipes() {

            for (var i = 0; i < pipes.length; i++) {

                pipes[i].Do_Frame_Things();

            }

        }

        function check_for_end_game() {

            for (var i = 0; i < pipes.length; i++) {

                if (pipes[i].x < bird.x && !pipes[i].scored) {

                    score += 0.5;

                    pipes[i].scored = true;

                }

                if (ImagesTouching(bird, pipes[i])) {

                    game_mode = 'over';

                    backgroundMusic.pause(); // Stop background music

                    gameOverSound.play(); // Play game over sound

                }

            }

        }

        function display_intro_instructions() {

            ctx.font = '25px Arial';

            ctx.fillStyle = 'red';

            ctx.textAlign = 'center';

            ctx.fillText(

                'Press, touch or click to start',

                myCanvas.width / 2,

                myCanvas.height / 4

            );

        }

        function display_game_over() {

            ctx.font = '30px Arial';

            ctx.fillStyle = 'red';

            ctx.textAlign = 'center';

            ctx.fillText('Game Over', myCanvas.width / 2, 100);

            ctx.fillText('Score: ' + Math.floor(score), myCanvas.width / 2, 150);

            ctx.font = '20px Arial';

            ctx.fillText('Click, touch, or press to play again', myCanvas.width / 2, 300);

        }

        function display_bar_running_along_bottom() {

            if (bottom_bar_offset < -23) bottom_bar_offset = 0;

            ctx.drawImage(

                bottom_bar,

                bottom_bar_offset,

                myCanvas.height - bottom_bar.height

            );

        }

        function reset_game() {

            bird.y = myCanvas.height / 2;

            bird.angle = 0;

            pipes = []; // erase all the pipes from the array

            add_all_my_pipes(); // and load them back in their starting positions

            score = 0; // reset score

        }

        function add_all_my_pipes() {

            add_pipe(500, 100, 140);

            add_pipe(800, 50, 140);

            add_pipe(1000, 250, 140);

            add_pipe(1200, 150, 120);

            add_pipe(1600, 100, 120);

            add_pipe(1800, 150, 120);

            add_pipe(2000, 200, 120);

            add_pipe(2200, 250, 120);

            add_pipe(2400, 30, 100);

            add_pipe(2700, 300, 100);

            add_pipe(3000, 100, 80);

            add_pipe(3300, 250, 80);

            add_pipe(3600, 50, 60);

            var finish_line = new MySprite('http://s2js.com/img/etc/flappyend.png');

            finish_line.x = 3900;

            finish_line.velocity_x = pipe_speed;

            pipes.push(finish_line);

        }

        var pipe_piece = new Image();

        pipe_piece.onload = add_all_my_pipes;

        pipe_piece.src = 'http://s2js.com/img/etc/flappypipe.png';

        function Do_a_Frame() {

            ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

            bird.Do_Frame_Things();

            display_bar_running_along_bottom();

            switch (game_mode) {

                case 'prestart': {

                    display_intro_instructions();

                    break;

                }

                case 'running': {

                    time_game_last_running = new Date();

                    bottom_bar_offset = bottom_bar_offset + pipe_speed;

                    show_the_pipes();

                    make_bird_tilt_appropriately();

                    make_bird_slow_and_fall();

                    check_for_end_game();

                    ctx.font = '20px Arial';

                    ctx.fillStyle = 'black';

                    ctx.textAlign = 'right';

                    ctx.fillText('Score: ' + Math.floor(score), myCanvas.width - 10, 30);

                    break;

                }

                case 'over': {

                    make_bird_slow_and_fall();

                    display_game_over();

                    break;

                }

            }

        }

        var bottom_bar = new Image();

        bottom_bar.src = 'http://s2js.com/img/etc/flappybottom.png';


        var bird = new MySprite('http://s2js.com/img/etc/flappybird.png');

        bird.x = myCanvas.width / 3;

        bird.y = myCanvas.height / 2;


        setInterval(Do_a_Frame, 1000 / FPS);

    </script>

</body>

</html>


Contact Us!

Comment Box

0 Comments

type your comment...