原生javascript写的小游戏Flappy bird (Pig) 改自 keenwon

最新推荐文章于 2021-07-01 11:26:31 发布
最新推荐文章于 2021-07-01 11:26:31 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： flappy bird js javas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyforthy/article/details/22356215
版权
本代码基于原作者 keenwon的原始代码，在其上进行了修改。


改动处：

1、去掉pillarWrapper容器，去掉管道柱子数的限制，按需使用合适数量的管道（至少两个，本代码也恰是两个），管道柱子左出右进
2、pig碰到天花板，游戏结束

3、去掉pillarWrapper引起的小细节改动


改动后的代码点击下载





原生js 写的flappy brid 飞翔的小鸟
05-10
flappy brid js原生 代码 还有部分图片资源也有 ，飞翔的小鸟
用原生js+html+css写一个像素鸟小游戏
12-09
用原生js+html+css写一个像素鸟小游戏，按回车（enter）键开始/暂停游戏，按空格使小鸟向上飞，穿过钢管，获得胜利
用原生JS仿Flappy bird游戏
JackPen0306的博客
03-30 1326
首先明白，这个游戏的鸟是X轴固定不动的，变的只是Y轴。这个游戏最难的就是碰撞检测 预览图： 下面贴代码↓↓ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content=...
实战JavaScript：实现像素鸟小游戏
KaiSarH
03-06 1425
JavaScript实现像素鸟小游戏
JavaScript实现像素鸟
03-06
下载后可以在webstrom中打开运行。 1. underscore中random产生随机数、without从数组中移除数据 2. 在游戏开发的时候，应该始终用面向对象的思想来做。有一个游戏管控大类（Game）。 3. 用一个json文件，保存我们需要的图片数据，方便在内存中创建每一张图片对象。 4. canvas的宽度和高度不能固定，根据电脑动态设置。 5. 使用ES6语法创建类。 6. FPS （每秒传输帧数(Frames Per Second)） 刷新率FNO 记录当前走过总帧数 7. 在每一次canvas绘制之前，都要进行清屏操作。ctx.clearRect(0, 0, canvas.width, canvas.height); 8. 资源加载。通过AJAX加载资源。静态资源类StaticResourceUtil.js用来加载本地图片。 9. 图片绘制，背景类BackGround.js，用来绘制背景。 通过图片的移动实现游戏的移动。 图片的移动即不断改变图片的X坐标，不断绘制。 图片的无缝移动：绘制图片的两倍，当全部图片宽度走完的时候，将图片X重新改为0. 背景图的速度设置，事物离得越近速度越快，越远速度越慢。 10. 取整、字符串转数字：parseInt(txt); 11. 管道绘制，管道类Pipe.js，用来绘制管道。 管道的高度、位置要随机生成。 但要有最小高度与最大高度。 需要一个管道数组来保存所有的管道。 当管道移出画布，需要将管道从管道数组中移除。 12. 用gameEnd来标志游戏是否结束。 13. 鸟的绘制，鸟类bird.js，用来绘制鸟。 根据帧率不断煽动翅膀。 14. 模拟重力加速度，利用dY，不断更新鸟的y值。导致鸟的下落越来越快。 15. 鸟的旋转。利用save和restore保存和恢复画布的状态。 利用translate旋转画布的x、y轴，旋转鸟恢复。 16. 鼠标点击事件，在鸟的上升过程中，固定值模拟阻力。 17. 边界检测。上边界ycanvas.height - 地板高度 - 鸟高度 18. 碰撞检测。利用管道进行检测。首先判断鸟有没有进到管道竖着的区域，再判断鸟是在空白天空区域还是管道区域，从而进行检测。 19. 小鸟死亡，在死亡的地方绘制鲜血。鲜血撒完游戏结束。 20. 分数类。根据几位判断分数显示基准线。判断小鸟是否飞到管道竖着的部分，如果飞过，则分数加一。 21. 求一个数字有几位。num.toString().length 22. 游戏初始化。设置背景及图片，点击开始后div隐藏。
原生javascript写的小游戏Flappy bird Pig 改自 keenwon
03-28
原生javascript写的小游戏Flappy bird Pig 改自 keenwon
原生js实现Flappy Bird小游戏
10-17
主要为大家详细介绍了原生js实现Flappy Bird小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JavaScript打造入门级Flappy Bird小游戏
本文档介绍了一个用原生JavaScript实现的简单Flappy Bird小游戏，适合JavaScript初学者练习。整个项目基于HTML、CSS和JavaScript开发，主要涉及以下几个关键知识点： 1. **HTML结构**： 游戏的核心结构包含一个`...
FlappyBird_flappybird_python小游戏_python小游戏_Python游戏_
10-01
本压缩包提供了一个使用Python语言实现的FlappyBird小游戏，让我们来深入探讨一下这个项目中的相关知识点。 首先，Python是一种高级编程语言，它以其简洁明了的语法和丰富的库资源而受到开发者喜爱。在创建Flappy...
纯javascript实现的小游戏《Flappy Pig》实例
12-03
本文实例讲述了纯javascript实现的小游戏《Flappy Pig》。分享给大家供大家参考。具体如下： Flappy Pig，是Pig，使用原生javascript写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天...
前端小游戏像素鸟的实现
qq_38427709的博客
12-12 615
像素鸟游戏 像素鸟游戏是一款简单的H5+JS+CSS就可以实现的小游戏。 图片大小有限制截图了一部分 下面为大家贴上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
JavaScript像素鸟案例
北枫林
05-14 653
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
前端小项目-Flappy Bird(像素鸟)-html+css+js 含视频课程+全套代码
robertzsun
04-07 868
项目完成后效果： 项目视频链接：https://pan.baidu.com/s/1K8SmL4CcgsjlrQyurkmEIg 提取码：95ef 项目源码： 链接：https://pan.baidu.com/s/1ipEXPPWUT6iqtZB81rkljg 提取码：p5ev 自己修改调整过后的代码（增加了左上角的分数线是，游戏结束时的分数牌外加再来一次的button按钮）： https://g...
【教程】HTML5+JavaScript编写flappy bird
风小锐的专栏
04-27 6183
大学马上要毕业了，未来的公司为我们制定了在校学习计划，希望我们能在毕业之前掌握一些技术，其中有一项就是使用HTML5+JavaScript编写flappy bird这个小游戏。 相信大家和我一样，对这个小游戏还是非常熟悉的，控制小鸟跳过高矮不一的水管，并记录下每局得到的分数，对于亲手编写这个小游戏很感兴趣，马上开始着手开始编写。 学习JavaScript的时间并不久，看了《JavaScript
MFC实现像素鸟功能和一些改进
qq_45964801的博客
08-29 316
MFC实现像素鸟功能和一些改进 暑期实训要求用MFC来实现像素鸟功能和一些特别的功能（比如生命值加血道具之类的），经过5天的不懈努力终于完成了，写在这里留作纪念，供大家参考与学习。唯一的缺点就是代码没有封装，看起来代码很凌乱，要进行修改和改进的话特别麻烦，在后续我也会尝试的去封装后再上传。我现在写一些有用的东西，在最后附上文件。 我的代码在思路上借鉴了CSDN上这位博主的代码 链接：mfc编写的像素鸟flappy bird 小游戏-FP_Beta 一、 主要的思路就是： 1.设置定时器去刷新Onpaint(
原生JS实现flappy bird小游戏
02-26
原生JS实现flappy bird小游戏，游浏览器就可以运行
HTML期末大作业~棋牌游戏静态网站(6个页面) HTML+CSS+JavaScript
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-01 1万+
HTML期末大作业~棋牌游戏静态网站(6个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页 登录/注
使用CocosCreator+JS 完成Flappybrid(像素鸟)小游戏
从今天起换个昵称的博客
07-08 2103
使用CocosCreator+JS 完成Flappybrid(像素鸟)小游戏 前言 这是我在刚开始学Cocos做游戏时做的第一个小游戏。当时做了两个版本数学版和碰撞组件版。 环境 开发工具： CocosCreator VisualStudioCode 开发环境：win10 + Cocos Creator v2.3.1 开发语言：JavaScript 数学碰撞版 该版使用数学计算飞行中的小鸟是否碰撞到移动中的钢管。就是使用判断两个矩形是否相交。 游戏画面： 首先是拼接界面:以下为已经布置好的界面。 t
网页JavaScript特效之flappy bird（像素鸟）
01-01的博客
07-20 6541
今天用JavaScript做了一个小小的像素鸟 ，256行代码实现flappybird，虽然有很多bug，废话不多说，上源码 *{ padding: 0;margin: 0; } .main{ border: solid 1px black; width: 600px; height: 512px; background:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值