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

时间: 作者:admin 点击数:

[javascript,小游戏,Flappy,Pig]纯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  */  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  */  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  */  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  */  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();  },  //把柱子3D渲染到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 
(责任编辑:admin)

本文地址:http://www.hxl18.com/app/42.html

上一篇 : 很抱歉没有了

下一篇 : 恒越注册登录:js 在定义的时候立即执行的函数表达式(function)写法

最新文章Related

Spring MVC中Ajax实现二级联动的简单实例

JavaScript完成打字效果的方法

jquery判断小数点俩位和全自动删除小数俩位后的数字

恒越注册登录:js 在定义的时候立即执行的函数表达式(function)写法

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

热门文章Related

查看更多关于APP模块的热门文章

首页 | 编程动态 | 常用代码 | APP模块

Copyright © 2017-2023 @恒越娱乐 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | 恒越娱乐