原生js实现Flappy Bird小游戏


Posted in Javascript onDecember 24, 2018

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习。

原生js实现Flappy Bird小游戏

html结构

<div id="game">
  <div id="bird"></div>
</div>

css样式

#game {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    background: url(images/sky.png);
    overflow: hidden;
    position: relative;
  }

  #game .pipeD {
    background: url(images/pipe1.png) top center;
    position: absolute;
  }

  #game .pipeU {
    background: url(images/pipe2.png) bottom center;
    position: absolute;
  }

  #bird {
    width: 34px;
    height: 25px;
    /*border-radius: 10px;*/
    /*background-color: red;*/
    position: absolute;
    top: 100px;
    left: 100px;
    background: url(images/birds.png) -8px -10px no-repeat;
  }

下面就是原生js代码了,这个小案例还运用了自己前期封装的一个小的动画方法

function animate(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var flag = true;
    for (var k in json) {
      if (k === "opacity") {
        var leader = getStyle(obj, k) * 100;
        var target = json[k] * 100;
        var step = (target - leader) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;
        obj.style[k] = leader / 100;
      } else if (k === "zIndex") {
        obj.style.zIndex = json[k];
      } else {
        var leader = parseInt(getStyle(obj, k)) || 0;
        var target = json[k];
        var step = (target - leader) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;
        obj.style[k] = leader + "px";
      }
      if (leader !== target) {
        flag = false;
      }
    }
    if (flag) {
      clearInterval(obj.timer);
      if (fn) {
        fn();
      }
    }
  }, 15);
}
function getStyle(obj, attr) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(obj)[attr];
  } else {
    return obj.currentStyle[attr];
  }
}

下面就是控制游戏的js代码了

var birdElement = document.getElementById("bird");
var game = document.getElementById("game");
var gameover = false;
var g = 1;
var i = 0;
var timer=null;
var bird = {
  x: birdElement.offsetLeft,
  y: birdElement.offsetTop,
  speedX: 5,
  speedY: 0,
  entity: birdElement
};
var sky = {
  x: 0
};

//var timer=setInterval(function(){
//  birdElement.style.backgroundPositionX=-52*i+"px";
//  i++;
//  if(i===3){
//    i=0;
//  }
//},100);

setInterval(function () {
  //游戏没有结束的时候运行代码
  if (!gameover) {
    //整个游戏背景x轴移动的距离
    sky.x = sky.x - bird.speedX;
    game.style.backgroundPositionX = sky.x + "px";
    //小鸟下落时y轴的坐标
    bird.speedY = bird.speedY + g;
    //设置一个变量用来接收小鸟下落时y轴的坐标,用来设置小鸟下降时的速度
    var step = bird.speedY;
    bird.y = bird.y + step;
    //用一个变量来设定小鸟下落的最低高度,用来 判断游戏是否结束
    var overY = game.offsetHeight - birdElement.offsetHeight;
    //小鸟的y轴坐标大于最低高度,所以游戏停止
    if (bird.y > overY) {
      bird.y = overY;
      stop();
    }
    //小鸟的y轴坐标小于0,说明碰到顶部边框,所以游戏结束
    if (bird.y < 0) {
      bird.y = 0;
      stop();
    }
    //设置游戏开始时小鸟出现的位置
    bird.entity.style.top = bird.y + "px";
  }
}, 25);
//添加键盘事件,实现键盘上下键控制小鸟
document.onkeyup = function (e) {
  if (e.keyCode === 38) {
    bird.speedY = -10;
  }
}

function Pipe(positonX) {
  //管子的坐标
  this.x = positonX;
  this.upPipeY = 0;
  this.width = 52;
  this.upPipeH = parseInt(Math.random() * 175 + 100);
  this.downPipeY = this.upPipeH + 200;
  this.downPipeH = game.offsetHeight - this.downPipeY;
  // 动态添加管子
  var divUp = document.createElement("div");
  divUp.className = "pipeU";
  divUp.style.width = this.width + "px";
  divUp.style.height = this.upPipeH + "px";
  divUp.style.left = this.x + "px";
  divUp.style.top = this.upPipeY + "px";
  game.appendChild(divUp);
  var divDown = document.createElement("div");
  divDown.className = "pipeD";
  divDown.style.width = this.width + "px";
  divDown.style.height = this.downPipeH + "px";
  divDown.style.left = this.x + "px";
  divDown.style.top = this.downPipeY + "px";
  game.appendChild(divDown);
  //因为定时器会混乱this的指向问题,所以提前保存this的指向,这里的this指向调用该方法的实例
  var that = this;
  // 设置定时器让管子向后移动
  this.timer=setInterval(function () {
    that.x = that.x - 1;
    //简单实现管子无缝滚动
    if (that.x < -52) {
      that.x = 800;
    }
    if (!gameover) {
      divUp.style.left = that.x + "px";
      divDown.style.left = that.x + "px";
    }
    // 设置变量,进行游戏碰撞检测,并停止游戏
    var downCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y + 25 > that.downPipeY);
    var upCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y < that.upPipeH);
    if (downCrash || upCrash) {
      //gameover = true;
      stop();
    }
  }, 10);
}
//执行上面的函数方法
var arr=[];
for (var i = 0; i < 4; i++) {
  arr[i]=new Pipe(i * 200 + 400);
}
//封装一个用来停止游戏的方法,
function stop(){
  gameover=true;
  clearInterval(timer);
  for(var i=0;i<arr.length;i++){
    clearInterval(arr[i].timer);
  }
}

注释都写在了了代码里,一个简单小游戏就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
javascript的push使用指南
Dec 05 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
node错误处理与日志记录的实现
Dec 24 #Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 #Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 #Javascript
微信小程序获取用户openid的实现
Dec 24 #Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 #Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 #Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php 特殊字符处理函数
2008/09/05 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
Bootstrap插件全集
2016/07/18 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python logging模块学习笔记
2014/05/24 Python
python之Socket网络编程详解
2016/09/29 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python3标准库总结
2019/02/19 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
大学自我评价
2014/02/12 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
《白鹅》教学反思
2014/04/13 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
毕业典礼致辞
2015/07/29 职场文书