纯javascript实现的小游戏《Flappy Pig》实例

本文实例讲述了纯javascript实现的小游戏《Flappy Pig》。分享给大家供大家参考。具体如下：

Flappy Pig，是Pig，使用原生javascript写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天宝贵的周末，但是既然写出来，就拿出来和大家分享一下。

option.js如下：


var flappy = (function (self) {
  'use strict';
  //设置
  self.option = {
    //重力加速度，屏幕像素和实际物理上的米有差别，所以存在换算
    g: 400,
    //跳跃的初速度，控制猪的弹跳力
    v0: 400,
    //柱子移动速度
    vp: 2.5,
    //频率，控制动画帧数，默认20ms
    frequency: 20,
    //关卡数
    levels: 100,
    //开头的空白距离
    safeLift: 500,
    //地板高度（和图片有关）
    floorHeight: 64,
    //猪的宽度
    pigWidth: 33,
    //猪的高度
    pigHeight: 30,
    //猪当前高度
    pigY: 300,
    //猪距离左边的距离,
    pigLeft: 80,
    //柱子Html
    pillarHtml: '',
    //柱子宽度
    pillarWidth: 45,
    //柱子上下间隔高度
    pillarGapY: 108,
    //柱子左右间隔宽度
    pillarGapX: 250,
    //上柱子的基础定位值（就是top值，和css写法有关）
    pillarTop: -550,
    //下柱子的基础定位值
    pillarBottom: -500
  };
  return self;
})(flappy || {})

util.js如下：


var flappy = (function (self) {
  'use strict';
  //工具
  self.util = {
    preventDefaultEvent: function (event) {
      event = window.event || event;
      if (event) {
 if (event.preventDefault) {
   event.preventDefault();
 } else {
   event.returnValue = false;
 }
      }
    },
    $: function (id) {
      return document.getElementById(id);
    },
    getChilds: function (obj) {
      var childs = obj.children || obj.childNodes,
 childsArray = new Array();
      for (var i = 0, len = childs.length; i < len; i++) {
 if (childs[i].nodeType == 1) {
   childsArray.push(childs[i]);
 }
      }
      return childsArray;
    }
  };
  return self;
})(flappy || {})

pig.js如下：


var flappy = (function (self) {
  'use strict';
  var option = self.option,
    $ = self.util.$;
  //猪
  self.pig = {
    Y: 0, //猪当前高度（底边）
    init: function (overCallback, controller) {
      var t = this;
      t.s = 0, //位移
      t.time = 0, //时间
      t.$pig = $('pig');
      t.$pig.style.left = option.pigLeft + 'px';
      t._controller = controller;
      t._addListener(overCallback);
    },
    //添加监听
    _addListener: function (overCallback) {
      this._overCallback = overCallback;
    },
    //启动
    start: function () {
      var t = this,
 interval = option.frequency / 1000;
      t.s = option.v0 * t.time - t.time * t.time * option.g * 2; //竖直上抛运动公式
      t.Y = option.pigY + t.s;
      if (t.Y >= option.floorHeight) {
 t.$pig.style.bottom = t.Y + 'px';
      } else {
 t._dead();
      }
      t.time += interval;
    },
    //跳
    jump: function () {
      var t = this;
      option.pigY = parseInt(t.$pig.style.bottom);
      t.s = 0;
      t.time = 0;
    },
    //撞到地面时触发
    _dead: function () {
      this._overCallback.call(this._controller);
    },
    //撞到地面的处理
    fall: function () {
      var t = this;
      //摔到地上，修正高度
      t.Y = option.floorHeight;
      t.$pig.style.bottom = t.Y + 'px';
    },
    //撞到柱子的处理
    hit: function () {
      var t = this;
      //坠落
      var timer = setInterval(function () {
 t.$pig.style.bottom = t.Y + 'px';
 if (t.Y <= option.floorHeight) {
   clearInterval(timer);
 }
 t.Y -= 12;
      }, option.frequency);
    }
  };
  return self;
})(flappy || {})

pillar.js如下：


var flappy = (function (self) {
  'use strict';
  var option = self.option,
    util = self.util,
    $ = util.$;
  //柱子
  self.pillar = {
    currentId: -1, //当前柱子id
    init: function () {
      var t = this;
      //缓存上下柱子位置的换算因子
      t._factor = option.pillarBottom - option.pillarGapY + 450;
      //s表示一个位置，到达这个位置的柱子就是“当前的柱子”，就算是靠近猪了，开始计算猪有没有撞到这根柱子，10是提前量。
      t._s = option.pigLeft + option.pigWidth + 10;
      t._render();
    },
    //把柱子渲染到DOM树中
    _render: function () {
      var t = this,
 initleft = option.safeLift;
      t.left = 0;
      t.dom = document.createElement('div');
      t.dom.className = t.dom.id = 'pillarWrapper';
      for (var i = 0, j = option.levels; i < j; i++) {
 var el = document.createElement('div');
 el.innerHTML = option.pillarHtml;
 el.className = 'pillar';
 el.id = 'pillar-' + i;
 el.style.left = initleft + 'px';
 var childs = util.getChilds(el),
   topEl = childs[0],
   bottomEl = childs[1],
   pos = t._random(i);
 topEl.style.top = pos.top + 'px';
 bottomEl.style.bottom = pos.bottom + 'px';
 el.setAttribute('top', 600 + pos.top);
 el.setAttribute('bottom', 0 - pos.bottom);
 t.dom.appendChild(el);
 initleft += option.pillarGapX;
      }
      $('screen').appendChild(t.dom);
    },
    //计算柱子位置
    _random: function (i) {
      var t = this,
 x = Math.random(),
 h = Math.abs(Math.sin((i+1) * x)) * 290;
      return {
 top: option.pillarTop + h,
 bottom: t._factor - h
      }
    },
    //移动柱子
    move: function () {
      var t = this;
      t.dom.style.left = -t.left + 'px';
      t._find(t.left);
      t.left += option.vp;
    },
    //找到当前的柱子
    _find: function (l) {
      var t = this,
 x = (t._s + l - option.safeLift) / option.pillarGapX,
 intX = parseInt(x); //intX是当前柱子
      if (x > 0 && t.currentId != intX && Math.abs(x - intX) < 0.1) {
 t.currentId = intX;
      }
    }
  };
  return self;
})(flappy || {})

position.js如下：


var flappy = (function (self) {
  'use strict';
  var pig = self.pig,
    pillar = self.pillar,
    option = self.option,
    $ = self.util.$;
  //位置判断
  self.position = {
    init: function (overCallback, controller) {
      var t = this;
      t.pillarWrapper = $('pillarWrapper');
      t.pigX1 = option.pigLeft,
      t.pigX2 = option.pigLeft + option.pigWidth, //猪的左右位置，固定的
      t._controller = controller;
      t._addListener(overCallback);
    },
    //添加监听
    _addListener: function (overCallback) {
      this._overCallback = overCallback;
    },
    judge: function () {
      var t = this,
 currentPillar = $('pillar-' + pillar.currentId);
      if (pillar.currentId == -1) {
 return;
      }
      t.pigY2 = 600 - pig.Y;
      t.pigY1 = t.pigY2 - option.pigHeight; //猪的上下位置
      t.pY1 = currentPillar.getAttribute('top');
      t.pY2 = currentPillar.getAttribute('bottom');
      t.pX1 = parseInt(currentPillar.style.left) + parseInt(t.pillarWrapper.style.left);
      t.pX2 = t.pX1 + option.pillarWidth; //柱子的上下左右位置
      console.log(t.pillarWrapper.style.left);
      if (option.pigLeft + option.pigWidth >= t.pX1 && option.pigLeft <= t.pX2) {
 if (t.pigY1 < t.pY1 || t.pigY2 > t.pY2) {
   t._dead();
 }
      }
    },
    //撞到柱子时触发
    _dead: function () {
      this._overCallback.call(this._controller);
    },
  };
  return self;
})(flappy || {})

controller.js如下：


var flappy = (function (self) {
  'use strict';
  var pig = self.pig,
    pillar = self.pillar,
    pos = self.position,
    util = self.util,
    $ = util.$,
    option = self.option;
  //控制器
  self.controller = {
    init: function () {
      var t = this;
      t._isStart = false;
      t._timer = null;
      pig.init(t.fall, t);
      pillar.init();
      pos.init(t.hit, t);
      t.addKeyListener();
    },
    addKeyListener: function () {
      var t = this;
      document.onkeydown = function (e) {
 var e = e || event;
 var currKey = e.keyCode || e.which || e.charCode;
 if (currKey == 32) {
   t.jump();
   util.preventDefaultEvent(e);
 }
      }
    },
    jump: function () {
      var t = this;
      if (!t._isStart) {
 $('begin').style.display = 'none';
 t._createTimer(function () {
   pig.start();
   pillar.move();
   pos.judge();
   $('score').innerHTML = pillar.currentId + 1;
 });
 t._isStart = true;
      } else {
 pig.jump();
      }
    },
    hit: function () {
      var t = this;
      t.over();
      pig.hit();
    },
    fall: function () {
      var t = this;
      t.over();
      pig.fall();
    },
    over: function () {
      var t = this;
      clearInterval(t._timer);
      $('end').style.display = 'block';
    },
    _createTimer: function (fn) {
      var t = this;
      t._timer = setInterval(fn, option.frequency);
    }
  };
  return self;
})(flappy || {})

game.js如下：


var flappy = (function (self) {
  'use strict';
  var controller = self.controller,
    option = self.option,
    pig = self.pig,
    pillar = self.pillar,
    pos = self.position,
    util = self.util,
    $ = self.util.$;
  //主程序
  self.game = {
    init: function () {
      var t = this;
      t._isStart = false;
      t._isEnd = false;
      t._timer = null;
      pig.init(t.fall, t);
      pillar.init();
      pos.init(t.hit, t);
      t.addKeyListener();
    },
    addKeyListener: function () {
      var t = this;
      document.onkeydown = function (e) {
 var e = e || event;
 var currKey = e.keyCode || e.which || e.charCode;
 if (currKey == 32) {
   if (!t._isEnd) {
     t.jump();
   } else {
     window.location.reload();
   }
   util.preventDefaultEvent(e);
 }
      }
    },
    jump: function () {
      var t = this;
      if (!t._isStart) {
 $('start').style.display = 'none';
 t._createTimer(function () {
   pig.start();
   pillar.move();
   pos.judge();
   $('score').innerHTML = pillar.currentId + 1;
 });
 t._isStart = true;
      } else {
 pig.jump();
      }
    },
    hit: function () {
      var t = this;
      t.over();
      pig.hit();
    },
    fall: function () {
      var t = this;
      t.over();
      pig.fall();
    },
    over: function () {
      var t = this;
      clearInterval(t._timer);
      t._isEnd = true;
      $('end').style.display = 'block';
    },
    _createTimer: function (fn) {
      var t = this;
      t._timer = setInterval(fn, option.frequency);
    }
  };
  flappy.init = function () {
    self.game.init();
  }
  return self;
})(flappy || {})

希望本文所述对大家的javascript程序设计有所帮助。