本文实例讲述了纯javascript实现的小游戏《flappy pig》。分享给大家供大家参考。具体如下：
flappy pig，是pig，使用原生javascript写的网页版“flappy bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天宝贵的周末，但是既然写出来，就拿出来和大家分享一下。
option.js如下：
/** * 原生javascript实现的《flappy pig》v0.1.0 * ======================================= * @author keenwon * full source at http://keenwon.com */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如下：
/** * 原生javascript实现的《flappy pig》v0.1.0 * ======================================= * @author keenwon * full source at http://keenwon.com */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 = 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如下：
/** * 原生javascript实现的《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.$; //柱子 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 0 && t.currentid != intx && math.abs(x - intx) = t.px1 && option.pigleft <= t.px2) { if (t.pigy1 t.py2) { t._dead(); } } }, //撞到柱子时触发 _dead: function () { this._overcallback.call(this._controller); }, }; return self;})(flappy || {})
controller.js如下：
/** * 原生javascript实现的《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; //控制器 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如下：
/** * 原生javascript实现的《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.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程序设计有所帮助。