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

本文实例讲述了纯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,//频率，控制动画帧数，默认20msfrequency: 20,//关卡数levels: 100,//开头的空白距离safeLift: 500,//地板高度（和图片有关）floorHeight: 64,//猪的宽度pigWidth: 33,//猪的高度pigHeight: 30,//猪当前高度pigY: 300,//猪距离左边的距离,pigLeft: 80,//柱子HtmlpillarHtml: "<div class="top"></div><div class="bottom"></div>",//柱子宽度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 < len; i++） {if （childs[i].nodeType == 1） {childsArray.push（childs[i]）;}}return childsArray;}};return self;}）（flappy || {}）

pig.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,$ = self.util.$;//猪self.pig = {Y: 0, //猪当前高度（底边）init: function （overCallback, controller） {var t = this;t.s = 0, //位移t.time = 0, //时间t.$pig = $（"pig"）;t.$pig.style.left = option.pigLeft + "px";t._controller = controller;t._addListener（overCallback）;},//添加监听_addListener: function （overCallback） {this._overCallback = overCallback;},//启动start: function （） {var t = this,interval = option.frequency / 1000;t.s = option.v0 * t.time - t.time * t.time * option.g * 2; //竖直上抛运动公式t.Y = option.pigY + t.s;if （t.Y >= 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, //当前柱子idinit: 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 < 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", 600 + pos.top）;el.setAttribute（"bottom", 0 - pos.bottom）;t.dom.appendChild（el）;initleft += option.pillarGapX;}$（"screen"）.appendChild（t.dom）;},//计算柱子位置_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: function （） {var t = this;t.dom.style.left = -t.left + "px";t._find（t.left）;t.left += option.vp;},//找到当前的柱子_find: function （l） {var t = this,x = （t._s + l - option.safeLift） / option.pillarGapX,intX = parseInt（x）; //intX是当前柱子if （x > 0 && t.currentId ！= intX && Math.abs（x - intX） < 0.1） {t.currentId = intX;}}};return self;}）（flappy || {}）

position.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,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 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程序设计有所帮助。