位置: 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: 

function createPipe() { var pipeheight = rand(100,300); var ul = document.querySelector('ul'); var str = `<li class="top" style="height:${pipeheight+'px'};left:${sw+'px'}"><div></div></li><li class="bottom" style="height:${sh-pipeheight-120+'px'};left:${sw+'px'}"><div></div></li>`; ul.insertAdjacentHTML('beforeend',str);}

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

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

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

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

function createPipe() { count ++; if (count != space) { return ; } count = 0; var pipeheight = rand(100,300); var ul = document.querySelector('ul'); var str = `<li class="top" able="0" style="height:${pipeheight+'px'};left:${sw+'px'}"><div></div></li><li class="bottom" style="height:${sh-pipeheight-120+'px'};left:${sw+'px'}"><div></div></li>`; ul.insertAdjacentHTML('beforeend',str);}

现在管道可以在背景的右面不断的生成,这样管道的创建就全部完成了,下面在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支付(支付宝手机网站支付不风控)

下一篇:[3D检测系列-PointRCNN]复现PointRCNN代码,并实现PointRCNN3D目标检测可视化,包含预训练权重下载链接(从0开始以及各种报错的解决方法)(3d检测软件)

  • 怎么解除微信未成年限制(怎么解除微信未成年玩家)

    怎么解除微信未成年限制(怎么解除微信未成年玩家)

  • 一个手机号可以有几个支付宝(一个手机号可以绑定几个快手账号)

    一个手机号可以有几个支付宝(一个手机号可以绑定几个快手账号)

  • 美团和摩拜单车通用吗(美团和摩拜单车是什么关系)

    美团和摩拜单车通用吗(美团和摩拜单车是什么关系)

  • 电脑分号怎么打(电脑分号怎么打出来)

    电脑分号怎么打(电脑分号怎么打出来)

  • 怎么改图片格式为jpg(word怎么改图片格式)

    怎么改图片格式为jpg(word怎么改图片格式)

  • 苹果勿扰模式微信怎么还有提示(苹果勿扰模式微信电话还能打过来)

    苹果勿扰模式微信怎么还有提示(苹果勿扰模式微信电话还能打过来)

  • 激光打印机能打照片吗(激光打印机能打多少张)

    激光打印机能打照片吗(激光打印机能打多少张)

  • word自动生成目录的步骤(word自动生成目录右边不对齐)

    word自动生成目录的步骤(word自动生成目录右边不对齐)

  • r15的录屏消失了(r17录屏功能没了)

    r15的录屏消失了(r17录屏功能没了)

  • 新买的手机卡被别人注册了怎么办(新买的手机卡被别人绑定了银行卡)

    新买的手机卡被别人注册了怎么办(新买的手机卡被别人绑定了银行卡)

  • 天眼查存续是正常的吗(天眼查的信息是实时更新吗)

    天眼查存续是正常的吗(天眼查的信息是实时更新吗)

  • airpods打电话对方听不清楚(Airpods打电话对面听不见)

    airpods打电话对方听不清楚(Airpods打电话对面听不见)

  • excel文档主要功能包括(excel的主要功能和特点是什么)

    excel文档主要功能包括(excel的主要功能和特点是什么)

  • 华为riotl00是什么型号(华为rioul00是啥型号)

    华为riotl00是什么型号(华为rioul00是啥型号)

  • 抖音主播pk什么意思(抖音主播pk是干什么)

    抖音主播pk什么意思(抖音主播pk是干什么)

  • 笔记本显卡和台式机显卡区别(笔记本显卡和台式机显卡性能对比)

    笔记本显卡和台式机显卡区别(笔记本显卡和台式机显卡性能对比)

  • 小米note3外屏能单换吗(小米note3内外屏幕多少钱)

    小米note3外屏能单换吗(小米note3内外屏幕多少钱)

  • 抖音禁止播放需要几天(抖音现已做禁止播放处理)

    抖音禁止播放需要几天(抖音现已做禁止播放处理)

  • 华为mate30音量键在哪里(华为mate30音量键在哪)

    华为mate30音量键在哪里(华为mate30音量键在哪)

  • vivo锁屏时钟怎么设置(vivo锁屏时钟怎么关闭)

    vivo锁屏时钟怎么设置(vivo锁屏时钟怎么关闭)

  • 如何画3d立体画(如何画3d立体画教程)

    如何画3d立体画(如何画3d立体画教程)

  • 小锅卫星电视怎么搜台(小锅卫星电视怎么调频道顺序)

    小锅卫星电视怎么搜台(小锅卫星电视怎么调频道顺序)

  • 手机充电时充电器和手机发热是为什么(手机充电时充电线烧了)

    手机充电时充电器和手机发热是为什么(手机充电时充电线烧了)

  • 手机支付宝账号怎么看(手机支付宝账号怎么改成邮箱)

    手机支付宝账号怎么看(手机支付宝账号怎么改成邮箱)

  • 笔记本电脑的顿号是哪个键(笔记本电脑的顿号打不出来)

    笔记本电脑的顿号是哪个键(笔记本电脑的顿号打不出来)

  • ps调整边缘(ps调整边缘在哪里快捷键)

    ps调整边缘(ps调整边缘在哪里快捷键)

  • 建筑业项目在外地在哪里交增值税
  • 增值税一般纳税人税率
  • 清税证明是什么要钱吗
  • 经济利益的流入一定是收入吗
  • 如何判断会计政策变动
  • 政府预算年度
  • 公司茶水间有什么
  • 个人缴纳印花税减半吗?
  • 微企怎么申请补贴
  • 企业所得税季报可以更正吗
  • 企业如何加强应收账款的管理
  • 虚假会计凭证的处罚
  • 融资租赁的长期投资包括
  • 汇票 到期
  • 事业单位的股东是什么
  • 取得投资收益会导致经营现金流量小于
  • 个人去税务局开劳务票 税点是多少
  • 小规模纳税人未开票收入填在哪里
  • 企业销售货物后,若发生销货退回或销售折让
  • 销售人员发生的业务招待费
  • 纳税人如何办理纳税申报
  • 计算机著作权登记证书
  • 进项大于销项下月可不可以抵扣
  • 非营利组织怎么申请
  • 如何网签三方协议合同
  • 如何防止程序被关闭
  • 开具的服务费怎么做分录
  • win10默认网关自动清空
  • 电脑文件删除怎么恢复找回
  • Yosemite使用技巧 如何使用Yosemite mac信息功能共享电脑屏幕教程
  • win10开始菜单磁贴设置
  • 摊余成本计量的金融资产账面价值
  • 存货分类账目录填写样本图片
  • 最大交易笔数什么意思
  • 出口退税登记证在哪办
  • 代销商品受托方怎么做账
  • 圣三一教堂英文
  • 基建 技改
  • php取二维数组的一组内容
  • yolov5配置
  • 可视化思考
  • 利息收入做红字
  • 阿里规则官方头条
  • 暂估入库成本的会计分录
  • wordpress 批量添加标签
  • 用vue-cli搭建项目
  • 所得税汇算清缴怎么操作
  • 非营利企业的劳动力需求有哪些特点
  • sql server简单查询
  • 实收资本为零的风险 债权人
  • 其他所得
  • 研发费用加计扣除的条件
  • 技术服务行业增值税税负率
  • 小企业无形资产取得的账务处理
  • 给员工单独买的西装会计分录
  • 老项目简易征收税率
  • sql server 3417错误
  • sql语句版本
  • mysql隐式类型转换规则
  • win 7操作系统安装
  • win10系统任务栏卡顿
  • win10怎么关闭防火系统
  • centos fio
  • win8命令提示符怎么运行命令
  • win7无法识别usb设备怎么办 五大方法来解决
  • win7系统电脑怎么开热点
  • win10安装vc++6.0
  • 微信小程序实现人脸识别
  • cocos3.0
  • javascript table
  • Node.js中的全局对象有
  • javascript的应用
  • jquery java
  • javascript概述
  • Unity GameObject.activeSelf, GameObject.activeInHierarchy,GameObject.SetActive和SetActiveRecursively
  • 出租车开的发票如何查询校验码?
  • 中国税务报优秀文学作品年度评选
  • 浙江省工伤停工留薪期分类目录
  • 地税网上申报密码
  • 购买材料如何计入成本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设