位置: IT常识 - 正文

原生JS实现FlappyBird游戏超详细解析快来做一个自己玩吧(原生js实现promise.all)

编辑：rootadmin

原生JS实现FlappyBird游戏超详细解析快来做一个自己玩吧

1.适配设备🐾

2.背景滚动💐

3.管道的创建与移动🌸

4.小鸟操作🌷

5.碰撞检测🍀

6.触屏事件🌹

7.制作开始与结束面板🌻

8.得分统计🌺

推荐整理分享原生JS实现FlappyBird游戏超详细解析快来做一个自己玩吧(原生js实现promise.all)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:原生js实现表头不动,内容滚动,js原生方法大全,原生js项目怎么运行,原生js实现promise,原生js实现promise,原生js实现表头不动,内容滚动,原生js实现表头不动,内容滚动,原生js实现promise.all,内容如对您有帮助，希望把文章链接给更多的朋友！

我们先来看看接下来我们要做的效果：🙋🙋🙋

有需要源码和素材的同学，在文章末尾有链接。

1.适配设备💨

PC端下背景320px*568px（游戏背景图片大小），移动端下占满窗口

新建一个public.js文件，这个文件放一些我们公共的方法，下面我们先定义一个isPhone方法来判断是否是移动端设备

function isPhone() { var arr = ["iPhone","iPad","Android"] var is = false; for(var i = 0;i<arr.length;i++) { if(navigator.userAgent.indexOf(arr[i])!=-1) { is = true; } } return is;}

在isPhone方法里我们定义了一个数组arr用来存储移动端的设备名，UserAgent是HTTP请求中的用户标识，一般发送一个能够代表客户端类型的字符串，indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果要检索的字符串值没有出现，则该方法返回 -1

我们默认是PC端，如果indexOf不返回-1说明与数组中的元素匹配，代表是移动端设备，那么我们的isPhone方法就返回true。

这个判断移动端的方法大家可以保存下来，以后很多的项目我们也用的到

因为我们规定移动端下背景图片要占满屏幕，所以需要一个if语句进行判断，如果isPhone返回的是true，说明当前在移动端，我们需要修改背景图片的宽高：

sw和sh是在在外面定义的全局变量，默认情况下sw=320,sh=568，因为在后面我们还会用到sw,sh，所以如果设备是移动端的话，需要对它们进行重新赋值。

if (isPhone()) { var bg = document.querySelector('.contain'); sw = document.documentElement.clientWidth + 'px'; sh = document.documentElement.clientHeight + 'px'; bg.style.width = sw; bg.style.height = sh;}

document.documentElement.clientWidth 就是当前设备的屏幕宽度，注意加符号

我们可以在chrome浏览器下模拟移动端不同设备下是否占满全屏，每次换完设备时要刷新页面：

这样的话我们适配设备的效果就完成了，成功做到了可以在移动端下占满全屏，下面就开始制作我们的flappybird游戏吧！

2.背景滚动💨

在下面的代码中bg是我们获取的最外层装背景图片的盒子，背景图片是在x轴平铺的，所以我们只需要一个定时器不断调用背景移动函数就行，背景移动函数里我们每次调用背景的位置就向左移动5像素

var timer = setInterval(function(){ bgMove();},30)function bgMove() { var bg = document.querySelector('.contain'); bgDis -= 5; bg.style.backgroundPosition = `${bgDis}px 0`;}

在我们制作的这个游戏中，不论是背景移动还是待会要做的管道的移动，小鸟的移动，最后封装的函数都需要在这个定时器里调用，这样才会有我们看到的那种动画一样的效果。

3.管道的创建与移动💨 原生JS实现FlappyBird游戏超详细解析快来做一个自己玩吧(原生js实现promise.all)

在实现管道的移动之前我们先需要创建管道，因为我们要让生成的管道高度不一致，所以需要先写一个随机数函数，我们就在public.js里完成：

function rand(min, max) { return Math.round(Math.random() * (max-min) + min);}

我们先整理一下创建管道的思路：

先写管道的样式，html与css部分的代码在文章最后都有，大家在看解析的时候要先看一眼html结构和css样式。规定上下管道间隔120px，通过定义好的rand随机函数实现上管道高度随机，背景图片高度减去间隔减去上管道高度就是下管道高度，这里下管道高度不要给随机。通过insertAdjacentHTML将生成管道的代码添加到ul里

因为管道也是不断生成的，我们需要在timer定时器里调用管道移动函数pipeMove():

var timer = setInterval(function(){ bgMove(); pipeMove();},30)我们在外面定义这个pipeMove方法，在pipeMove里完成管道的创建与移动function pipeMove() { //1.创建管道 createPipe(); //2.管道移动}

下面先来根据在开头写的思路来完善管道创建函数createPipe：

运行代码看一看管道有没有被创建出来：

很明显管道数量太多了啊，因为定时器每隔三十毫秒就会调用管道创建函数，所以管道生成的就非常多，我们定义一些全局变量进行限制：

var space = 100; //创建管道的间隔var count = 0; //管道的计数

修改一下createPipe函数，当计数达到创建管道的间隔100时才执行下面创建管道的代码，否则不执行，这样就对生成管道的数量进行了限制

现在管道可以在背景的右面不断的生成，这样管道的创建就全部完成了，下面在pipeMove方法里继续完善管道移动的部分：

function pipeMove() { //1.创建管道 createPipe(); //2.管道移动 var li = document.querySelectorAll('li'); li.forEach(function(value,index,arr){ arr[index].style.left = arr[index].offsetLeft-2+'px'; }) }

我们先获取创建的所有管道，然后通过foreach循环每次调用都让管道左移两像素，管道就能成功移动起来了。

注意：直接通过obj.style.left和obj.style.top可以获取位置，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。所以这里用offsetleft获取

然后我们再给管道加一个边界，让他超出背景时就在ul里删除这个元素：

li.forEach(function(value,index,arr){ arr[index].style.left = arr[index].offsetLeft-5+'px'; if(arr[index].offsetLeft<=-62) { ul.removeChild(arr[index]); }})

我们运行代码看一看效果：

这样管道的创建与运动就基本上完成了，下面我们开始小鸟的操作。

4.小鸟操作💨

首先我们先把小鸟的html结构和css样式搭建好，下一步就是让小鸟“动起来”。

同样我们需要在定时器中调用小鸟移动函数birdMov

var timer = setInterval(function(){ bgMove(); pipeMove(); birdMove(); },30)

因为游戏开始的时候小鸟要向下掉落所以先写一个小鸟的移动函数：

function birdMove() { var bird = document.querySelector('#bird'); bird.style.top = bird.offsetTop +5 + 'px';}

这样的话，小鸟就实现了一直匀速下落的效果，但是游戏中我们的小鸟并不是匀速的所以我们还需要定义一个全局变量speed，初始化它的值为0，来控制小鸟的速度。

因为我们在游戏中单击屏幕时小鸟会向上飞而且向上飞的速度和向下的速度不相同，所以我们在全局

本文链接地址:https://www.jiuchutong.com/zhishi/296119.html 转载请保留说明！

上一篇：支付宝手机网站H5支付(支付宝手机网站支付不风控)