本文实例讲述了纯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程序设计有所帮助。
原文链接：https://www.f2er.com/js/53273.html