/** * 原生javascript实现的《Flappy Pig》v0.1.0 * ======================================= * @author keenwon * Full source at */ 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如下：
/** * 原生javascript实现的《Flappy Pig》v0.1.0 * ======================================= * @author keenwon * Full source at */ 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 */ 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程序设计有所帮助。
您可能感兴趣的文章: