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

前端之家收集整理的这篇文章主要介绍了纯javascript实现的小游戏《Flappy Pig》实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

option.js如下:

图片有关) 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如下:

pig.js如下:

= 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如下:

0 && t.currentId != intX && Math.abs(x - intX) < 0.1) { t.currentId = intX; } } }; return self; })(flappy || {})

position.js如下:

= 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如下:

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如下:

score').innerHTML = pillar.currentId + 1; }); t._isStart = true; } else { pig.jump(); } },over: function () { var t = this; clearInterval(t._timer); t._isEnd = true; $('end').style.display = 'block'; },option.frequency); } }; flappy.init = function () { self.game.init(); } return self; })(flappy || {})

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

猜你在找的JavaScript相关文章