原生JS写《像素鸟》的小游戏（下落的小鸟）

最新推荐文章于 2023-02-04 04:18:06 发布
置顶 最新推荐文章于 2023-02-04 04:18:06 发布
阅读量1w 收藏 23
点赞数 6
分类专栏： 原生JS学习笔记 文章标签： javas 像素鸟 下落的小鸟 飞翔的小鸟 李帅醒
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wcslb/article/details/53240662
版权
这篇博客将教你如何利用原生JavaScript编写经典游戏《像素鸟》（下落的小鸟）。内容涵盖小鸟的运动机制、背景水管的生成与移动、碰撞检测以及计分系统的实现。想要自由调整游戏难度？跟着教程来吧！

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

相信大家都玩过《像素鸟》（又名《下落的小鸟》），今天就教大家用原生JaveScript 实现像素鸟的游戏。微笑还在为得不到高分而苦恼吗？今天学会了，游戏难易自己控制！！！

首先明白：1.需要运动的小鸟（速度）；

2.背景（水管）；水管：运动速度 创建速度 水管随机高度

3.编写碰撞判断；

4.计分板;

需要的图片代码素材：http://download.youkuaiyun.com/detail/wcslb/9687998

最低0.47元/天 解锁文章
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隐藏。
【四、像素鸟】
weixin_54597744的博客
03-28 888
在进入更复杂的学习之前，我们最后实现一个小游戏——像素鸟。 文章目录下落的小鸟显示障碍物判定碰撞循环障碍物小结 下落的小鸟 首先我们写好游戏代码框架并实现小鸟下落和上升（按空格）的功能： #include <stdio.h> #include <stdlib.h> #include <conio.h> #include <cwindow.h> //全局变量 int high,width; //画面尺寸 int bird_x,bird_y; //小鸟坐标 in
前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）
热门推荐
商务合作 | 共同学习 | 携手共进
03-30 10万+
原生 js+dom 操作实现像素鸟小游戏，代码完整，素材完整。
像素鸟html与js源码(4节课勉强做完)
红目香薰
02-04 1946
像素鸟html与js源码(4节课勉强做完)
原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）
小安驾到的博客
09-16 1万+
100行代码带你实现经典小游戏【像素鸟】，附有项目全部素材文件和完整代码
用原生js+html+css写一个像素鸟小游戏
12-09
像素鸟小游戏是一款经典的休闲游戏，它的核心玩法是控制一只小鸟穿越不断出现的钢管障碍物。在本项目中，我们将使用原生JavaScript、HTML和CSS来实现这个游戏。下面将详细介绍如何运用这些技术构建像素鸟。 首先，...
原生js写的飞翔小鸟小游戏
12-19
【飞翔小鸟小游戏】是一款使用原生JavaScript编写的网页游戏，其核心原理是通过JavaScript实现游戏逻辑，CSS负责样式布局，HTML构建游戏界面。这款游戏的玩法简单，玩家通过点击屏幕使小鸟飞行，避免碰到障碍物。 ...
基于原生js实现的飞翔的小鸟简单小游戏
最新发布
06-28
【作品名称】：基于原生js实现的飞翔的小鸟简单小游戏 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：基于原生js实现...
原生JS实现像素鸟.zip
05-15
在本项目"原生JS实现像素鸟.zip"中，我们可以深入了解使用原生JavaScript开发像素鸟游戏的过程。像素鸟，又称为Flappy Bird，是一款非常受欢迎的休闲游戏，它以其简单的操作和高难度著称。通过这个项目，我们可以...
原生js写的一个华容道小游戏
09-22
《原生JS实现的华容道小游戏详解》 华容道，源于中国古代的棋盘游戏，是一种极具挑战性的智力玩具，玩家需要通过移动棋子，让特定棋子（通常是曹操）从设定的起点到达终点。在数字化的时代，利用原生JavaScript技术...
像素鸟源码
05-10
里面包含详细的注释，在Unity5.6上面开发的
像素鸟源代码
08-11
这是像素鸟游戏的源代码，包括Untiy版本和cocos2dx版本
实战JavaScript：实现像素鸟小游戏
KaiSarH
03-06 1450
JavaScript实现像素鸟小游戏
Docker--docker ps 命令与结果解析
Tech Station
10-13 2万+
命令详解 意义：列出容器相关信息 格式：docker ps [options] 参数列表： 参数 解释 无参 默认显示正在运行的容器 -a 显示所有的容器，包括未运行的 -f 根据条件过滤.........
2020-08-12 html的页面多语言 + css的css加载 + JS的js阻塞 + 软技能的像素追踪
在下魔王ii的博客
09-08 258
2020-08-12 题目来源：http://www.h-camel.com/index.html [html] 页面需要支持多语言，如果是你该怎么做？ 统一采用utf-8的方式进行编码 实现方案看这里： https://blog.youkuaiyun.com/xujie_0311/article/details/42047407 [css] css加载会阻塞DOM树解析吗？ css被视为阻塞渲染的资源。 css的加载不会阻塞DOM树的解析，但会阻塞DOM树的渲染； 不会阻塞js的下载，但会阻塞js的执行。
js练习题
Michael_Hzs的博客
01-25 1万+
一，单选题： 有以下ES6代码 function * gen(){ yield 1; yield 2; yield 3; } ​ 下面选项描述正确的是： ​ A：gen()执行后返回2 ​ B：gen()执行后返回一个undefined ​ C：gen()执行后返回一个Generator对象 ​ D：gen()执行后返回1 ​ 解答：C、这是ES6的新feature（特性），function后面带*号的叫做gen
2020-07-13 html的p标签嵌套img + css的3大特性 + JS的客户端服务端时间不对称 + http与https切换时共用cookie和localStorage
在下魔王ii的博客
07-14 510
2020-07-13 题目来源：http://www.h-camel.com/index.html [html] p标签里面嵌套img标签会出现向上高3像素是什么原因？如何处理？ <p style="border: 1px solid red;"><img src="./img/paint-5.png" style="border: 1px solid green;"></p> 现象：在 img 标签的底部产生3-5px的间隙； 原因： img属于行内块元素
原生js像素鸟游戏
qq_40566547的博客
11-14 2646
明年转前端，看了一下渡一教育像素鸟游戏，之后自己写了一遍，算是回顾这节课 文件目录如下： html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
原生js实现的像素鸟小游戏开发教程
资源摘要信息:"利用原生JavaScript、HTML和CSS来编写一个像素风格的小鸟游戏，游戏可以通过键盘的回车键控制开始或暂停，空格键使小鸟向上飞行，目标是让小鸟穿过移动的钢管，以此来获得游戏的胜利。" 知识点详细...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值