6.HTML5--製做Flappy Bird

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
//三個類，Bird類，Obstacle類，FlappyBird類（遊戲主要函數）

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

            context.drawImage(image, this.width, 0, this.width, this.height, this.x, this.y, this.width,
                this.height);
        }
    }
};

function Obstacle(x, y, h, image) {
    this.x = x,
    this.y = y,
    this.width = image.width / 2,
    this.height = h,
    this.flypast=false;//沒被飛過
    this.draw = function(context, state) {
        if (state === "up") {
            context.drawImage(image, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);
        } else {

            context.drawImage(image, this.width, image.height - this.height, this.width, this.height, this.x,
                this.y, this.width, this.height);
        }
    }
};
//FlappyBird類包括了遊戲主要參數及運行時須要的函數。
function FlappyBird(){}
FlappyBird.prototype={
bird: null, // Bird pc
bg: null, // backgrand
obs: null, // 障礙物
obsList: [],

mapWidth: 340, // Cav寬度
mapHeight: 453, // Cav高度
startX: 90, // 起始位置
startY: 225,
obsDistance: 150, // 上下障礙物距離
obsSpeed: 2, // 障礙物移動速度
obsInterval: 2000, // 製造障礙物間隔ms
upSpeed: 8, // 上升速度
downSpeed: 3, // 降低速度
line: 56, // 地面高度
score: 0, // 得分
touch: false, // 是否觸摸
gameOver: false,

/*變化參數能夠改變遊戲難度。
函數列表：
CreateMap: function() {}    // 繪製Cav
CreateObs: function() {}    // 創造障礙物
DrawObs: function() {}       // 繪製障礙物
CountScore: function() {}   // 判斷是否啓動記分器
ShowScore: function() {}   // 顯示分數
CanMove: function() {}       // 判斷是否能夠移動及遊戲結束
CheckTouch: function() {} // 判斷是否觸摸
ClearScreen: function() {} // 清屏
ShowOver: function() {}     // GAME OVER
*/

//產生遊戲主要的畫面
    CreateMap:function(){
        this.bg=new Image();
        //背景
        this.bg.src='img/bg.png';
        var starBg=new Image();
        starBg.src='img/start.jpg';
        starBg.onload=function(){
            c.drawImage(starBg,0,0);
        };
        //小鳥
        var image=new Image();
        image.src='img/bird.png';
        image.onload=function(){
            this.bird=new Bird(this.startX,this.startY,image);
        }.bind(this);
        //障礙物
        this.obs=new Image();
        this.obs.src='img/obs.png';
        this.obs.onload=function(){
            var h=100;
            var h2=this.mapHeight-h-this.obsDistance;
            var obs1=new Obstacle(this.mapWidth,0,h,this.obs);
            var obs2=new Obstacle(this.mapWidth,this.mapHeight-h2,h2-this.line,this.obs);
            this.obsList.push(obs1);
            this.obsList.push(obs2);
        }.bind(this);
    },
   CreateObs:function(){
       //隨機產生障礙物上管道高度
        var h=Math.floor(Math.random()*(this.mapHeight-this.obsDistance-this.line));
        var h2=this.mapHeight-h-this.obsDistance;
        var obs1=new Obstacle(this.mapWidth,0,h,this.obs);
        var obs2=new Obstacle(this.mapWidth,this.mapHeight-h2,h2-this.line,this.obs);
        this.obsList.push(obs1);
        this.obsList.push(obs2);

        //移除越界障礙物
        if(this.obsList[0].x<-this.obsList[0].width)
            this.obsList.splice(0,2);
   },
   DrawObs:function(){//繪製障礙物
        c.fillStyle='#00ff00';
        for (var i=0;i<this.obsList.length;i++){
            this.obsList[i].x-=this.obsSpeed;
            if(i%2)
                this.obsList[i].draw(c,'up');
            else
                this.obsList[i].draw(c,'down');
        }
   },

   CountScore:function() {//計分數
       if (this.obsList[0].x + this.obsList[0].width < this.startX && this.obsList[0].flypast == false) {
           //小鳥座標超過obslist【0】障礙物
           this.score += 1;
           this.obsList[0].flypast = true;
       }
   },
   ShowScore:function() {//顯示分數
       c.strokeStyle = '#000';
       c.lineWidth = 1;
       c.fillStyle = '#fff';
       c.fillText(this.score, 10, 50);
       c.strokeText(this.score, 10, 50);
   },

    CanMove: function(){
        if(this.bird.y<0|| this.bird.y>this.mapHeight-this.bird.height-this.line){
            this.gameOver=true;
        }else{
            var boundary=[{
                x:this.bird.x,
                y:this.bird.y
            },{
                x:this.bird.x+this.bird.width,
                y:this.bird.y
            },{
                x:this.bird.x,
                y:this.bird.y+this.bird.height
            },{
                x:this.bird.x+this.bird.width,
                y:this.bird.y+this.bird.height
            }];
            for (var i=0;i<this.obsList.length;i++){
                for(var j=0;j<4;j++){
                    if(boundary[j].x>=this.obsList[i].x&& boundary[j].x<=this.obsList[i].x+this.obsList[i].width
                        && boundary[j].y>=this.obsList[i].y && boundary[j].y<=this.obsList[i].y+this.obsList[i].height){
                            this.gameOver=true;
                            break;
                        }
                }
                if (this.gameOver){
                    break;
                }
            }
        }
    },

   CheckTouch:function() {//檢測觸摸
       if (this.touch) {
           this.bird.y -= this.usSpeed;
           this.bird.draw(c, 'up');
       } else {
           this.bird.y += this.downSpeed;
           this.bird.draw(c, 'down');
       }
   },

   ClearScreen:function(){//清屏
        c.drawImage(this.bg,0,0);
    },
   ShowOver:function(){
        var overImg=new Image();
        overImg.src='img/over.png';
        overImg.onload=function(){
            c.drawImage(overImg,(this.mapWidth-overImg.width)/2,(this.mapHeight-overImg.height)/2-50);
        }.bind(this);
        return;
    }
};

var game = new FlappyBird();
var Speed = 20;
var IsPlay = false;
var GameTime = null;
var btn_start;
window.onload = InitGame;

function InitGame() {
    c.font = "3em 微軟雅黑";
    game.CreateMap();
    canvas.onmousedown = function() {
        game.touch = true;
    }
    canvas.onmouseup = function() {
        game.touch = false;
    };
    canvas.onclick = function() {
        if (!IsPlay) {
            IsPlay = true;
            GameTime = RunGame(Speed);
        }
    }
}

//遊戲運行函數
function RunGame(speed) {
    var updateTimer = setInterval(function() {
        // 若小鳥經過第一個障礙物啓動記分器
        game.CanMove();
        if (game.gameOver) {
            game.ShowOver();
            clearInterval(updateTimer);
            return;
        }
        game.ClearScreen();
        game.DrawObs();
        game.CheckTouch();
        game.ShowScore();
    }, speed);
    var obsTimer = setInterval(function() {
        if (game.gameOver) {
            clearInterval(obsTimer);
            return;
        }
        game.CreateObs();
    }, game.obsInterval);

}

=============================================================================================