100+行HMTL5代码实现flappy bird

最近开始学习HTML5，刚好用最近正火的游戏flappy bird来练手。

效果如下：

JS代码实现如下：

function Bird(x, y, image){
    this.x = x,
    this.y = y,
    this.width = 0,
    this.height = 0,
    this.image = image;
    this.draw = function(context, state){
        if(state == "up")
            context.drawImage(this.image, this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height);
        else
            context.drawImage(this.image, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);
    }
};

function Obstacle(x, y, width, height){
    this.x = x,
    this.y = y,
    this.width = width,
    this.height = height,
    this.draw = function(context){
        context.fillRect(this.x, this.y, this.width, this.height);
    }
};

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var c=canvas.getContext("2d");
    c.font = "24pt 宋体";

    var touch = false;
    var gameOver = false;

    var startX = 100;   //起始位置
    var startY = 100;
    var obsDistance = 150;  //上下连个障碍物距离
    var obsSpeed = 2;  //障碍物移动速度
    var obsInterval = 2000; //制造障碍物间隔ms
    var upSpeed = 5;    //上升速度
    var downSpeed = 5;  //下降速度
    var score = 0;  //得分

    //主角
    var image = new Image()
    var bird = new Bird(startX, startY, image);
    image.src = "img/test01.png";
    image.onload = function(){
        bird.width = image.width/2;
        bird.height = image.height;
    };

    //障碍物
    var obsList = new Array();
    var h = 100;
    var h2 = canvas.height- h - obsDistance;
    var obs1 = new Obstacle(canvas.width, 0, 50, h);
    var obs2 = new Obstacle(canvas.width, canvas.height-h2, 50, h2);
    obsList.push(obs1);
    obsList.push(obs2);

    canvas.onmousedown = function() {
        touch = true;
    }
    canvas.onmouseup = function(){
        touch = false;
    };

    //游戏更新
    var updateTimer = setInterval(function(){
        //计分
        if(score == 0 && obs1.x+obs1.width < startX) {
            score = 1;
            var scoreTimer = setInterval(function(){
                if(gameOver) {
                    clearInterval(scoreTimer);
                    return;
                }
                score++;
            }, obsInterval);
        }

        //碰撞检测
        if(bird.y<0 || bird.y > canvas.height-bird.height)
            gameOver = true;
        else {
            var p = [{x:bird.x, y:bird.y}, {x:bird.x+bird.width, y:bird.y},
                {x:bird.x, y:bird.y+bird.height}, {x:bird.x+bird.width, y:bird.y+bird.height}];
            for(var i = 0; i < obsList.length; i++) {
                for(var j = 0; j < 4; j++)
                    if(p[j].x >= obsList[i].x && p[j].x <= obsList[i].x+obsList[i].width && p[j].y >= obsList[i].y && p[j].y <= obsList[i].y+obsList[i].height) {
                        gameOver = true;
                        break;
                    }
                if(gameOver)
                    break;
            }
        }
        if(gameOver) {
            clearInterval(updateTimer);
            c.fillStyle = "#ff0000";
            c.fillText("Game Over !", canvas.width/4, canvas.height/2);
            return;
        }

        //清屏
        c.fillStyle = "#000000";
        c.fillRect(0, 0, 500, 500);

        //绘制障碍物
        c.fillStyle = "#00ff00";
        for(var i = 0; i < obsList.length; i++) {
            obsList[i].x -= obsSpeed;
            obsList[i].draw(c);
        }

        //检测触摸
        if(touch) {
            bird.y -= upSpeed;
            bird.draw(c, "up");
        }
        else {
            bird.y += downSpeed;
            bird.draw(c, "down");
        }

        //显示分数
        c.fillStyle = "#ffffff";
        c.fillText("score : " + score, 10, 30);
    }, 20);

    //制造障碍物
    var obsTimer = setInterval(function(){
        if(gameOver) {
            clearInterval(obsTimer);
            return;
        }

        var h = Math.floor(Math.random()*(canvas.height-obsDistance-20)+20);
        var h2 = canvas.height - h - obsDistance;
        var obs1 = new Obstacle(canvas.width, 0, 50, h);
        var obs2 = new Obstacle(canvas.width, canvas.height-h2, 50, h2);
        obsList.push(obs1);
        obsList.push(obs2);

        //移除越界障碍物
        if(obsList[0].x < -obsList[0].width)
            obsList.splice(0, 2);
    }, obsInterval);
};