FlappyBird

Posted yan1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FlappyBird相关的知识,希望对你有一定的参考价值。

技术分享图片
canvas.width = 400;
canvas.height = 500;


var bg_day = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-612970cfd3fd6f4c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/288", 0, 0, 400, 500);

var bg_night = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-3e6a076d9048bf9d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/288", 400, 0, 400, 500);


var get_ready = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-b6d411bd48abe8d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/196", 100, 260, 200, 80);


var bird0 = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-641299de96a85e5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/48", 50, 220, 50, 50);

var bird1 = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-3c98de34184266c9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/48", 50, 220, 50, 50);

var bird2 = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-606b9e6598c0b1e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/48", 50, 220, 50, 50);


var pipe_up = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-7afee517ac79a77d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/52", 300, Math.random() * 100 - 200, 50, 300);

var pipe_down = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-313a5fd71b3d51d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/52", 300, 500 + pipe_up.y , 50, 300);

var game_over = new Sprite("https://upload-images.jianshu.io/upload_images/9107736-3fef9018816963ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/204", 100, 260, 200, 80);

var game_state = 0; // 准备开始游戏

var speed = 1;
var add_score = 0;

var time = 0;
var framePerSeconds = 1;

var score = 0;
var score_text = new Text("Score: " + score, 0, 0, 50);


function birdAnimation()
{
    time += 0.1;
    var frameIndex = Math.floor(time / (1.0 /framePerSeconds));
    if(frameIndex % 3 === 0)
    {
        bird0.draw();
    }
    if(frameIndex % 3 == 1)
    {
        bird1.draw();
    }
    if(frameIndex % 3 == 2)
    {
        bird2.draw();
    }
}



function draw_bg()
{
    canvas.clear();
    bg_day.draw();
    bg_night.draw();
    score_text.src = "Score: " + score;
    score_text.draw();
}


function MainLoop()
{
    if(game_state === 0)
    {
        draw_bg();
        get_ready.draw();
        pipe_up.x = 300;
        pipe_down.x = 300;
        pipe_up.y = Math.random() * 100 - 200;
        pipe_down.y = 450 + pipe_up.y;
        
        bird0.y = 220;
        bird1.y = bird0.y;
        bird2.y = bird0.y;
        get_ready.click = function() { game_state = 1; };
    }
    
    if(game_state == 1)
    {
        draw_bg();
        
        if(bg_day.x < -400) { bg_day.x = 400; }
        if(bg_night.x < -400) { bg_night.x = 400 }
        bg_day.x -= speed;
        bg_night.x -= speed;
        
        
        birdAnimation();
        
        pipe_up.draw();
        pipe_down.draw();
        pipe_up.x -= speed;
        pipe_down.x -= speed;
        if(pipe_up.x < -50)
        {
            speed += 0.4;
            add_score += 10;
            score += add_score;
            pipe_up.x = 300;
            pipe_down.x = 300;
            pipe_up.y = Math.random() * 100 - 200;
            pipe_down.y = 500 + pipe_up.y;
        }
        
        bird0.y += 1;
        bird1.y = bird0.y;
        bird2.y = bird0.y;
        
        Mouse.click = function()
        {
            bird0.y -= 40;
            bird1.y = bird0.y;
            bird2.y = bird0.y;
        };
        
        if(bird0.collide(pipe_up) || bird0.collide(pipe_down) || bird0.y < 0)
        {
            game_state = 2;
        }
        
    }
    
    if(game_state == 2)
    {
        bg_day.x = -300;
        bg_night.x = 100;
        draw_bg();
        add_score = 0;
        
        speed = 1;
        game_over.draw();
        game_over.click = function()
        {
            game_state = 0; 
            score = 0;
        };
    }
}

setInterval(MainLoop, 10);
View Code

 

以上是关于FlappyBird的主要内容,如果未能解决你的问题,请参考以下文章

Python3 FlappyBird

FlappyBird

[Canvas前端游戏开发]——FlappyBird详解

Python+Qt5实现flappybird

最简容器化动手小实践——再战flappybird

iOS今日头条选择框动画效果FlappyBird游戏源码