Pure JavaScript implementation of small games "Flappy Pig" example _javascript skills

This article describes the pure JavaScript implementation of the small game "Flappy Pig". Share to everyone for your reference. Specifically as follows:

Flappy Pig, the Pig, uses native JavaScript to write a web version of "Flappy Bird." I'm a freak, too. Why did this thing come out, but also spent a day of valuable weekend, but since write it out and share it with you.

Option.js is as follows:

/** * native JavaScript implementation Flappy Pig * v0.1.0 * =======================================
  Uthor Keenwon * Full source at Http://keenwon.com */var flappy = (function (self) {' Use strict '; Set self.option = {//acceleration of gravity, screen pixels and actual physical meters are different, so there is a conversion g:400,//jump at the initial speed, control the pig Bounce Force v0:400,//column moving speed V p:2.5,//frequency, control animation frame number, default 20ms frequency:20,//level number levels:100,//opening blank distance safelift:500,//floor height (and Pictures about) floorheight:64,//Pig width pigwidth:33,//Pig height pigheight:30,//pig Current height pigy:300,//pig distance Distance to the left, pigleft:80,//pillar HTML pillarhtml: ' <div class= "top" ></div><div class= "Bottom" ></di V> ',//pillar width pillarwidth:45,//Column height pillargapy:108,//pillar spacing width pillargapx:250,//Top pillar
  The underlying positioning value (that is, the top value, and the CSS notation) pillartop:-550,//lower pillar base positioning value Pillarbottom:-500};
return self; }) (Flappy | | {})

Util.js is as follows:

/**
 * Native JavaScript implementation of "Flappy Pig" v0.1.0
 * =======================================
 * @author Keenwon
 * Full source at http://keenwon.com
 *
/var flappy = (function (self) {
  ' use strict ';
  Tool
  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 is as follows:

/** * Native JavaScript implementation of "Flappy Pig" v0.1.0 * ======================================= * @author Keenwon * Full source at
  Http://keenwon.com */var flappy = (function (self) {' Use strict ';
  var option = self.option, $ = self.util.$;
      Pig Self.pig = {y:0,//pig current height (bottom) init:function (Overcallback, Controller) {var t = this;
      T.S = 0,//Displacement T.time = 0,//time t. $pig = $ (' pig ');
      T. $pig. style.left = option.pigleft + ' px ';
      T._controller = Controller;
    T._addlistener (Overcallback);
    },//Add Listener _addlistener:function (overcallback) {this._overcallback = Overcallback;
      },//Start start:function () {var t = this, interval = option.frequency/1000; T.S = option.v0 * T.time-t.time * t.time * OPTION.G * 2;
      Vertical Upper Parabolic motion Formula T.Y = Option.pigy + t.s;
      if (T.y >= option.floorheight) {T. $pig. Style.bottom = t.y + ' px ';
      else {t._dead (); } T.time + = inTerval;
      },//Hop 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) is triggered when hitting the ground;
      },//Hit ground processing fall:function () {var t = this;
      Fall to the ground, correction height t.y = option.floorheight;
    T. $pig. Style.bottom = t.y + ' px ';
      Hit:function () {var t = this;
        Fall 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 | |

 {})

The

Pillar.js is as follows:

/** * Native JavaScript implementation of "Flappy Pig" v0.1.0 * ======================================= * @author Keenwon * Full source at
  Http://keenwon.com */var flappy = (function (self) {' Use strict ';
  var option = self.option, util = self.util, $ = util.$;
      Pillar Self.pillar = {currentid:-1,//current pillar ID init:function () {var t = this;
      The conversion factor T._factor = Option.pillarbottom-option.pillargapy + 450 for the position of the cache upper and lower pillars;
      s represents a position where the pillar is the "current pillar", and even if it is close to the pig, it begins to calculate whether the pig has hit the pillar, 10 is the advance amount.
      t._s = option.pigleft + option.pigwidth + 10;
    T._render ();
      _render:function () {var t = this, Initleft = option.safelift The column in the DOM tree.
      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 ', + pos.top);
        El.setattribute (' Bottom ', 0-pos.bottom);
        T.dom.appendchild (EL);
      Initleft + = OPTION.PILLARGAPX;
    } $ (' Screen '). appendchild (T.dom); },//calculate pillar position _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 pillar move:function ()
      {var t = this;
      T.dom.style.left =-t.left + ' px ';
      T._find (T.left);
    T.left + = OPTION.VP; },//Find current pillar _find:function (l) {var t = this, x = (t._s + l-option.safelift)/Option.piLLARGAPX, IntX = parseint (x); IntX is current column if (x > 0 && t.currentid!= intX && math.abs (X-INTX) < 0.1) {T.currenti
      D = IntX;
  }
    }
  };
return self; }) (Flappy | |

 {})

The

Position.js is as follows:

/** * Native JavaScript implementation of "Flappy Pig" v0.1.0 * ======================================= * @author Keenwon * Full source at
  Http://keenwon.com */var flappy = (function (self) {' Use strict ';
  var pig = Self.pig, pillar = self.pillar, option = self.option, $ = self.util.$;
      Position Judge Self.position = {init:function (overcallback, Controller) {var t = this;
      T.pillarwrapper = $ (' pillarwrapper '); 
      t.pigx1 = option.pigleft, t.pigx2 = Option.pigleft + option.pigwidth,//The pig's left and right position, fixed t._controller = controller;
    T._addlistener (Overcallback);
    },//Add Listener _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;
  Pig's upper and lower position 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;
      The top and bottom position of the Pillar 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 ();
    The _dead:function () {This._overcallback.call (This._controller) is triggered when the column is hit;
  },
  };
return self; }) (Flappy | |

 {})

The

Controller.js is as follows:

/** * Native JavaScript implementation of "Flappy Pig" v0.1.0 * ======================================= * @author Keenwon * Full source at
  Http://keenwon.com */var flappy = (function (self) {' Use strict '; var pig = Self.pig, pillar = self.pillar, pos = self.position, util = self.util, $ = util.$, option =
  Self.option;
      Controller 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 = =) {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 | |

 {})

The

Game.js is as follows:

/** * Native JavaScript implementation of "Flappy Pig" v0.1.0 * ======================================= * @author Keenwon * Full source at
  Http://keenwon.com */var flappy = (function (self) {' Use strict '; var controller = self.controller, option = self.option, pig = self.pig, pillar = self.pillar, pos = SELF.P
  osition, Util = self.util, $ = self.util.$;
      Main program 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 = =) {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 | |

 {})

The

wants this article to help you with your JavaScript programming.