原生js实现Flappy Bird小游戏

<div id="game">
  <div id="bird"></div>
</div>

#game {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    background: url(images/sky.png);
    overflow: hidden;
    position: relative;
  }

  #game .piped {
    background: url(images/pipe1.png) top center;
    position: absolute;
  }

  #game .pipeu {
    background: url(images/pipe2.png) bottom center;
    position: absolute;
  }

  #bird {
    width: 34px;
    height: 25px;
    /*border-radius: 10px;*/
    /*background-color: red;*/
    position: absolute;
    top: 100px;
    left: 100px;
    background: url(images/birds.png) -8px -10px no-repeat;
  }

function animate(obj, json, fn) {
  clearinterval(obj.timer);
  obj.timer = setinterval(function () {
    var flag = true;
    for (var k in json) {
      if (k === "opacity") {
        var leader = getstyle(obj, k) * 100;
        var target = json[k] * 100;
        var step = (target - leader) / 10;
        step = step > 0 ? math.ceil(step) : math.floor(step);
        leader = leader + step;
        obj.style[k] = leader / 100;
      } else if (k === "zindex") {
        obj.style.zindex = json[k];
      } else {
        var leader = parseint(getstyle(obj, k)) || 0;
        var target = json[k];
        var step = (target - leader) / 10;
        step = step > 0 ? math.ceil(step) : math.floor(step);
        leader = leader + step;
        obj.style[k] = leader + "px";
      }
      if (leader !== target) {
        flag = false;
      }
    }
    if (flag) {
      clearinterval(obj.timer);
      if (fn) {
        fn();
      }
    }
  }, 15);
}
function getstyle(obj, attr) {
  if (window.getcomputedstyle) {
    return window.getcomputedstyle(obj)[attr];
  } else {
    return obj.currentstyle[attr];
  }
}

var birdelement = document.getelementbyid("bird");
var game = document.getelementbyid("game");
var gameover = false;
var g = 1;
var i = 0;
var timer=null;
var bird = {
  x: birdelement.offsetleft,
  y: birdelement.offsettop,
  speedx: 5,
  speedy: 0,
  entity: birdelement
};
var sky = {
  x: 0
};

//var timer=setinterval(function(){
//  birdelement.style.backgroundpositionx=-52*i+"px";
//  i++;
//  if(i===3){
//    i=0;
//  }
//},100);

setinterval(function () {
  //游戏没有结束的时候运行代码
  if (!gameover) {
    //整个游戏背景x轴移动的距离
    sky.x = sky.x - bird.speedx;
    game.style.backgroundpositionx = sky.x + "px";
    //小鸟下落时y轴的坐标
    bird.speedy = bird.speedy + g;
    //设置一个变量用来接收小鸟下落时y轴的坐标，用来设置小鸟下降时的速度
    var step = bird.speedy;
    bird.y = bird.y + step;
    //用一个变量来设定小鸟下落的最低高度，用来 判断游戏是否结束
    var overy = game.offsetheight - birdelement.offsetheight;
    //小鸟的y轴坐标大于最低高度，所以游戏停止
    if (bird.y > overy) {
      bird.y = overy;
      stop();
    }
    //小鸟的y轴坐标小于0，说明碰到顶部边框，所以游戏结束
    if (bird.y < 0) {
      bird.y = 0;
      stop();
    }
    //设置游戏开始时小鸟出现的位置
    bird.entity.style.top = bird.y + "px";
  }
}, 25);
//添加键盘事件，实现键盘上下键控制小鸟
document.onkeyup = function (e) {
  if (e.keycode === 38) {
    bird.speedy = -10;
  }
}

function pipe(positonx) {
  //管子的坐标
  this.x = positonx;
  this.uppipey = 0;
  this.width = 52;
  this.uppipeh = parseint(math.random() * 175 + 100);
  this.downpipey = this.uppipeh + 200;
  this.downpipeh = game.offsetheight - this.downpipey;
  // 动态添加管子
  var divup = document.createelement("div");
  divup.classname = "pipeu";
  divup.style.width = this.width + "px";
  divup.style.height = this.uppipeh + "px";
  divup.style.left = this.x + "px";
  divup.style.top = this.uppipey + "px";
  game.appendchild(divup);
  var divdown = document.createelement("div");
  divdown.classname = "piped";
  divdown.style.width = this.width + "px";
  divdown.style.height = this.downpipeh + "px";
  divdown.style.left = this.x + "px";
  divdown.style.top = this.downpipey + "px";
  game.appendchild(divdown);
  //因为定时器会混乱this的指向问题，所以提前保存this的指向，这里的this指向调用该方法的实例
  var that = this;
  // 设置定时器让管子向后移动
  this.timer=setinterval(function () {
    that.x = that.x - 1;
    //简单实现管子无缝滚动
    if (that.x < -52) {
      that.x = 800;
    }
    if (!gameover) {
      divup.style.left = that.x + "px";
      divdown.style.left = that.x + "px";
    }
    // 设置变量，进行游戏碰撞检测，并停止游戏
    var downcrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y + 25 > that.downpipey);
    var upcrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y < that.uppipeh);
    if (downcrash || upcrash) {
      //gameover = true;
      stop();
    }
  }, 10);
}
//执行上面的函数方法
var arr=[];
for (var i = 0; i < 4; i++) {
  arr[i]=new pipe(i * 200 + 400);
}
//封装一个用来停止游戏的方法，
function stop(){
  gameover=true;
  clearinterval(timer);
  for(var i=0;i<arr.length;i++){
    clearinterval(arr[i].timer);
  }
}