纯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 相关文章推荐
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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 网页过期时间的控制代码
2009/06/29 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python的单元测试
2015/04/28 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python实现Decorator模式实例代码
2018/02/09 Python
对python生成业务报表的实例详解
2019/02/03 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
公益活动策划方案
2014/01/09 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python