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


Posted in Javascript onJuly 27, 2015

本文实例讲述了纯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,
    //频率,控制动画帧数,默认20ms
    frequency: 20,
    //关卡数
    levels: 100,
    //开头的空白距离
    safeLift: 500,
    //地板高度(和图片有关)
    floorHeight: 64,
    //猪的宽度
    pigWidth: 33,
    //猪的高度
    pigHeight: 30,
    //猪当前高度
    pigY: 300,
    //猪距离左边的距离,
    pigLeft: 80,
    //柱子Html
    pillarHtml: '<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, //当前柱子id
    init: 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程序设计有所帮助。

Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 #Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 #Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 #Javascript
JavaScript判断IE版本型号
Jul 27 #Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 #Javascript
readonly和disabled属性的区别
Jul 26 #Javascript
javascript实现继承的简单实例
Jul 26 #Javascript
You might like
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
Array对象方法参考
2006/10/03 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
JS中的phototype详解
2017/02/04 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python线程的两种编程方式
2015/04/14 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python中rc1什么意思
2020/06/19 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
大学校务公开实施方案
2014/03/31 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
考研英语复习计划
2015/01/19 职场文书
计生个人工作总结
2015/02/28 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS