var bird = {
  bird: [imgs.bird0,imgs.bird1],//正常狀態(tài)，圖片
  up_bird: [imgs.up_bird0,imgs.up_bird1],//向上飛狀態(tài)
  down_bird: [imgs.down_bird0,imgs.down_bird1],//向下掉狀態(tài)
  posX: 100,//橫坐標(biāo)
  posY: 200,//縱坐標(biāo)Y
  speed: 0,//速度
  index: 0,//翅膀揮動，切換圖片的標(biāo)
  alive: true,//存活狀態(tài)
  //繪制小鳥
  draw: function (bird) {
    ctx.drawImage(bird,this.posX,this.posY);
  },
  //飛行中
  fly: function () {
    //縱坐標(biāo)隨速度改變
    this.posY+=this.speed;
    //加速度為1
    this.speed++;
    //如果墜地，死亡
    if(this.posY >= 395){
      this.speed = 0;
      this.draw(this.bird[this.index]);
      this.dead();
    }
    //如果撞頂，彈回來
    if(this.posY <= 0){
      this.speed = 6;
    }
    //如果速度為正，則向下，反之，則向上，否則水平
    if(this.speed>0){
      this.draw(this.down_bird[this.index]);
    }else if(this.speed<0){
      this.draw(this.up_bird[this.index]);
    }else{
      this.draw(this.bird[this.index]);
    }
    //確保墜落速度不會太快
    if(bird.speed > 6){
      bird.speed = 6;
    }
  },
  //煽動翅膀，切換圖片
  wingWave: function () {
    this.index++;
    if(this.index > 1){
      this.index = 0;
    }
  },
  //死亡
  dead: function() {
    this.alive = false;
  }
}

...當(dāng)然這只是主角的代碼，一個(gè)對象字面量。但是它可以操控主角的所有行為（雖然也沒有幾個(gè)行為...），首先就是畫出主角draw()，通過傳進(jìn)不同的圖片繪制出主角不同情況下的英姿...然后是wingWave()，通過改變index,切換上面定義的圖片數(shù)組中的圖片，也就是揮翅膀。再然后就是飛行fly(),在飛行過程中主角會碰到各種各樣的事故，像是飛的太高撞到天花板啊，或是飛的太低，摔了個(gè)狗啃屎。再干脆點(diǎn)一頭撞死在了鋼管上，但是這個(gè)函數(shù)并不在這里，因?yàn)樾▲B撞死在鋼管上到底是小鳥的行為，還是鋼管的行為呢，我還沒想明白，所以干脆放在了全局中。

  //判斷是否碰撞
  function isHit(oPipe){
    if(bird.posX+bird.bird[0].width>oPipe.posX&&bird.posXoPipe.down_posY){
        bird.dead();
      }
    }
  }

就像這樣，通過判斷小鳥和鋼管的位置判斷小鳥是不是撞在鋼管上了。反正結(jié)果還是撞死bird.dead()?？吹竭@里相信不用我說，大家也明白了吧，只要將這段代碼注釋掉，我們的小鳥不就練成的絕世鐵頭功，鋼管都捅穿給你看?；蛘呱陨栽龃笠稽c(diǎn)小鳥會被碰撞到的體積，那就是凌波微步、輕功管上飄了呀。說了半天，還沒告訴大家這個(gè)水管又是哪里來的。

//水管類
class Pipe {
  constructor(up_pipe,up_mod,down_pipe,down_mod) {
    //構(gòu)造函數(shù)
    this.up_pipe = up_pipe;//上水管頭部
    this.up_mod = up_mod;//上水管中間部分
    this.down_pipe = down_pipe;
    this.down_mod = down_mod;
    this.up_height = Math.floor(Math.random()*60);//隨機(jī)生成上管體高度
    this.down_height = (60 - this.up_height)*3;//保證所有上下水管距離相同
    this.posX = 300;//橫坐標(biāo)
    this.up_posY = this.up_height*3+this.up_pipe.height;//上水管縱坐標(biāo)
    this.down_posY = 362-this.down_height;//下水管縱坐標(biāo)
    this.hadSkipped = false;//是否被越過
    this.hadSkippedChange = false;//去重
  }
  //繪制水管
  drawPipe() {
    ctx.drawImage(this.up_pipe,this.posX,this.up_height*3);
    ctx.drawImage(this.down_pipe,this.posX,362-this.down_height);
  }
  //繪制管體
  drawMods() {
    for(var i=0;i


又是一段冗長的代碼，大家不要急躁，我來給大家詳細(xì)解釋，水管分為兩部分，一部分是固定的管口，還有一部分是為了控制鋼管長度的管體，在上面的圖片也可以看到，每一關(guān)的管道是分為上下兩個(gè)的——up_pipe和down_pipe，也就是說我們看到的鋼管是由數(shù)個(gè)相同的管體加管口構(gòu)成的，這里管體的數(shù)量是隨機(jī)的，這樣就可以使管道擁有隨機(jī)的長度了。然后為了保證上下兩個(gè)鋼管的中間距離固定，下管道的高度就是總高度減去上管道的高度，嗯，這里需要理一理，大家也可以直接去看我的代碼。有了上面的理論，接下來就簡單了，繪制管口drawPipe()，注意給管體預(yù)留出位置來，再繪制管體drawMods(),用一個(gè)for循環(huán)依次繪制出數(shù)個(gè)管體疊加在一起的樣子。水管移動move(),就是改變水管的橫坐標(biāo)了。這里可以通過改變上下水管高度的總值，來增加上下水管之間的距離，是不是游戲難度一下就降了很多？再有就是判斷水管是否被小鳥跨越的hadskiped屬性，往下看
//判斷是否越過水管
  function isSkipped(oPipe) {
    if(bird.posX>oPipe.posX+oPipe.down_pipe.width){
      //水管已經(jīng)被越過
      oPipe.hadSkipped = true;
      //確保水管只被越過一次
      if(!oPipe.hadSkippedChange&&oPipe.hadSkipped){
        //分?jǐn)?shù)+1
        scroll++;
        oPipe.hadSkippedChange = true;
      }
    }
  }
我是通過判斷水管的位置是否已經(jīng)位于小鳥的后面來判斷，小鳥是否越過了水管的，如果越過了就+1分，至于沒越過就是通過前面講過到的isHit()判斷了，因?yàn)椴皇峭粫r(shí)間段發(fā)生的事情所以不能放在一起。
計(jì)分表

var scroll = 0;//當(dāng)前得分
var scrollImg = [imgs.scroe0,imgs.scroe1,imgs.scroe2,
              imgs.scroe3,imgs.scroe4,imgs.scroe5,
              imgs.scroe6,imgs.scroe7,imgs.scroe8,
              imgs.scroe9];//存儲數(shù)字圖片
  //繪制當(dāng)前得分
  function drawScore() {
    //每繪制一位數(shù)，向右移23，繪制下一位數(shù)
    for(var i=0;i
首先，把所有分?jǐn)?shù)有關(guān)的圖片放到這里scrollImg來，方便使用。然后判斷數(shù)字的位數(shù)，也就是個(gè)十百千萬。循環(huán)并截取每個(gè)位數(shù)，再通過相應(yīng)的圖片繪制出來，并且每繪制一個(gè)位數(shù)的圖片位置向右移23，這樣數(shù)字就不會疊在一起了。這里有一種最沒意思的作弊方法，就是手動調(diào)整分?jǐn)?shù)，但這只是一個(gè)數(shù)字，游戲的樂趣果然還是在于過程，下面...
游戲開始！
//游戲界面
  function gameLayer() {
    gameTimer = setInterval(function () {
      clean();
      drawBg();
      drawGrass();
      if(gameTime%5 == 0){
        if(gameTime == 30){
          createPipes();
          gameTime = 0;
        }
        bird.wingWave();
      }
      gameTime++;
      for(var i = 0;i< pipes.length;i++){
        pipes[i].move();
        isHit(pipes[i]);
        isSkipped(pipes[i]);
      }
      drawScore();
      bird.fly();
      //如果小鳥死了
      if(!bird.alive){
        gameOver();//游戲結(jié)束
        reset();//數(shù)據(jù)重置
      }
    }, 24);
  }
...看到這里，估計(jì)已經(jīng)有人在罵我了，講了半天游戲還沒開始...好吧，你們看，其實(shí)游戲的界面也不過是一個(gè)定時(shí)器，將前面講到的函數(shù)和代碼，無腦的、重復(fù)的執(zhí)行著。然后這里一定要注意畫圖的順序，不然后畫的部分會把前面覆蓋掉，其次這里的gameTimer和gameTime也和開始界面中startTimer、startTime起到類似的作用，每過一段較長的時(shí)間生成一個(gè)水管，也就是通過水管類實(shí)例化一個(gè)水管對象，具體的方法被我封裝進(jìn)一個(gè)createPipes函數(shù)里了。
var pipes = [];//用于存放水管
function createPipes() {
    var pipe = new Pipe(imgs.up_pipe,imgs.up_mod,imgs.down_pipe,imgs.down_mod);
    //添加進(jìn)pipes中，如果已經(jīng)有三個(gè)水管，則依次替換
    if(pipes.length<3){
      pipes.push(pipe);
    }else{
      pipes[index] = pipe;
      index++;
      if(index >= 3){
        index = 0;
      }
    }
  }
因?yàn)閷?shí)現(xiàn)的方法沒有想象中那么簡單，首先我們要創(chuàng)造一個(gè)水管的數(shù)組，它的作用就是為了控制水管的數(shù)量，不然我們的定時(shí)器就會一遍一遍的創(chuàng)造出無數(shù)的水管，但是前面的水管早就離我們遠(yuǎn)去，所以我就用數(shù)組把水管裝起來，控制只有一個(gè)屏幕的水管，也就是三個(gè)。如果創(chuàng)建了超過三個(gè)水管，就會把最前面一個(gè)替換掉，因?yàn)樗呀?jīng)超出了我們的視野。
響應(yīng)事件
光有動畫也不行，只能看不能玩有個(gè)皮用啊。所以我們當(dāng)然要添加響應(yīng)事件了。
//鍵盤點(diǎn)擊事件
  function kd(e) {
    if (e.keyCode === 32) {
      bird.speed = -10;
    }
  }
  //觸屏事件
  function ts() {
    bird.speed = -10;
  }
  //start按鈕點(diǎn)擊事件
  function startBtn_click(e) {
    //判斷點(diǎn)擊位置
    if(e.clientX>canvas.offsetLeft+canvas.width/2-imgs.startBtn.width/2
      &&e.clientXcanvas.offsetTop+300){
      clean();
      //清除開始界面定時(shí)器
      clearInterval(startTimer);
      gameLayer();
      //添加響應(yīng)事件
      window.addEventListener("keydown",kd,false)
      window.addEventListener("touchstart",ts,false)
      //刪除start按鈕響應(yīng)事件
      canvas.removeEventListener("click",startBtn_click,false);
    }
  }
  canvas.addEventListener("click", startBtn_click , false);
這就是所有的響應(yīng)事件了，通過按空格鍵和點(diǎn)擊屏幕都可以改變小鳥的速度，只要把這個(gè)速度調(diào)整到一個(gè)比較舒服的程度，游戲難度就會大大降低。其次，因?yàn)閏anvas是一個(gè)整體，所以我們沒有辦法直接監(jiān)聽里面圖片按鈕的響應(yīng)事件，只能退而求其次，判斷點(diǎn)擊的位置是否在按鈕的位置上了，就上面那段有點(diǎn)長的if判斷語句。
游戲結(jié)束
假如我們的主角真的一個(gè)不小心如我們所料的撞死在了鋼管上（往上翻，就在游戲開始那里），那就表示gameOver();
  //游戲結(jié)束
  function gameOver(){
    //清除定時(shí)器
    clearInterval(gameTimer);
    //清除窗口響應(yīng)事件
    window.removeEventListener("keydown",kd,false);
    window.removeEventListener("touchstart",ts,false);
    //繪制GAME OVER
    ctx.font = "50px blod";
    ctx.fontWeight = "1000"
    ctx.fillStyle = "white";
    ctx.fillText("GAME OVER", 20, 200);
    drawStartBtn();
  }


整個(gè)世界都平靜了下來，定時(shí)器關(guān)掉，響應(yīng)事件移除掉，然后繪上大大的、慘白的GAME OVER,下面附帶一個(gè)游戲開始時(shí)就出現(xiàn)的start按鈕。不是有一句話說的是，結(jié)束不過是新的開始嗎，你又可以再來一局了。......好吧，這個(gè)就是我為了偷懶隨便搞搞的。不過這還沒完，數(shù)據(jù)還得重置一下，不然怎么重新開始。
  //重置數(shù)據(jù)
  function reset(){
    bird.posY = 200;
    bird.speed = 0;
    bird.alive = true;
    pipes = [];
    scroll = 0;
    canvas.addEventListener("click", startBtn_click , false);
  }
最后再給這個(gè)start按鈕添加上點(diǎn)擊事件，大功告成！這就是我調(diào)整難度之后的樣子：


嘖嘖嘖，這種閑庭信步的感覺......

果然游戲還是有點(diǎn)難度才有意思......
總結(jié)
吁...一篇又臭又長、廢話又多的文章終于寫完了，如果大家覺得有幫助，或者對這篇文章有興趣的話，就賞個(gè)贊。如果覺得我的程序有問題，或者有別的想說的，都可以在評論里告訴我，我會看的。

我的項(xiàng)目地址：https://github.com/tzc123/can...

參考項(xiàng)目地址：http://www.jianshu.com/p/45d9...