用纯JavaScript实现flappy bird游戏的示例代码

前言：

《flappy bird》是越南独立游戏开发商Dong Nguyen开发的作品。游戏于2013年5月24日上线，2014年2月突然走红。2014年2月，《Flappy Bird》被开发者本人从苹果和谷歌App Store移除。2014年8月，他正式回归APP STORE，正式加入Flappy粉丝期待已久的多人对战模式。在游戏中，玩家必须控制一只鸟，越过由不同长度的各种水管组成的障碍物。文本：

下一步是逐步实现它

第一步：页面布局，这里就不多说了，页面内容如下：

第二步：如何让鸟掉下来，让鸟跳起来

鸟类下降：

给鸟一个初值为0的速度，通过定时器每30毫秒增加一次速度，当速度超过最大speedMax时保持在最大，即speed8。

//获取bird div varbird=document . getelementbyid(' fly bird ')；//鸟类下降功能down(){ speed=1；bird.id=' flybird _ downup _ bgm . pause()；//关闭升鸟音乐；//当鸟的下落速度达到最大speedMax时，如果(speed=speedmax) {speed=speedmax，则保持不变；}bird.style.top=bird.offsetTop速度' px '；floor text()；//着陆检测}鸟类上升：

上升，也就是鸟类顶值下降的过程。只是让速度降低。同时，当鸟上升时，关闭鸟下降的计时器和最后一跳的计时器，重新启动上升的计时器。这里有一个isGameOver，是一个游戏开关，默认值为true，即当值为false时，游戏不启动，小鸟无法起飞。

//小鸟上升功能up(){ speed-=0.8；Bird.id='flybird_up'/这个id下的样式是鸟下降的背景图，并加入动画不断替换鸟的背景图像，让鸟的翅膀动起来~ up _ bgm。播放()if(速度=0){速度=0；clearInterval(up timer)；DownTimer=setInterval(down，30)；} bird . style . top=bird . offsettop-speed ' px '；}//打鸟的方法；函数bird jump(){ speed=SpeedMax；if(isgamepover){//每次向上跳，清除上下定时器，防止clearInterval(upTimer)重叠；clearInterval(down timer)；//清除向下计时器；upTimer=setInterval(向上，30)；} }//判断鸟已经落地或跳出上界，游戏结束。Function Floortext () {vart1=bird。偏移；If(t1 396) {//游戏结束；game over()；} if(t1 ^ 0){ game over()；}}第三步：通过以上步骤，小鸟可以起飞了。下一步是创建管道。玩过flappybird的人都知道里面管子的高度是随机的，但是上下管子的距离是固定的。使用Math.random()生成随机数。

//你好，范思哲，范思哲，范思哲函数边界（最小值、最大值){返回parse int(数学)。random()*(max-min))；}//嘿嘿嘿嘿嘿嘿。哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，贺盛德贺盛德函数create _ pipe(){ var conduct _ group=document。查询选择器(“”).conduct _ group '；var conduititem=document。创建元素(' div ')；//范龙佩范龙佩范龙佩conduititem。类名=' conduititem//范龙佩范龙佩范龙佩divconduit _ group。appendchild(导管项目)；var顶部高度=兰特(60.223)://范仲淹你说什么变化底部高度=373-100-顶部高度；//范仲淹韩大夫，韩大夫//哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼传导性。intratml=' div class=top _ conduct ' div style=' height 3360 '顶部高度' px '/div/div class=' bottom _ conduct ' div style=' height 3360 '瓶子高度' px '/div/div '/哎哎哎哎div(消歧义)云娥，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不var maxWidth=画布。offset with://范仲淹！范仲淹-肉桂哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，喂喂喂传导性。风格。left=最大宽度“px”；//哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，范文范文范文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文阿文一行车物料addtoscore=true//韩世宁（音译),你是谁左！左菲兰达菲兰达。传导性。move timer=set interval(function(){ max width-=3)；//何如30毫秒你好3云娥传导性。风格。左侧=最大宽度' px '//哎哎哎哎哎哎哎，范思哲范思哲，1825年。if(最大宽度=-70){清除间隔(conductitem。移动计时器)；行为_组。移除子(行为项目)；}//-什么offsetLeft(偏移左)阿俊哥30-什么，你好你好，哎哎哎1 if(导管项目。offsetleft=30导管项目).addtoscore==true){ 0分数；线管项目addtoscore=falsescoreFn(分数):},30)}何如四个：贺盛瑞？贺盛瑞，我的天啊，是范仲淹。范思哲范思哲范思哲，你好你好。

//范龙佩范龙佩，obj1阿云，obj2吴亚玲？吴亚玲//范思哲？范思哲，offsetLeft吾曰0个，-你好-你好；函数崩溃测试(obj1，obj2) {//是霍芬根吗L1=鸟。向左偏移；控制台。原木(L1)var R1=L1鸟。偏移宽度；var t1=鸟。偏移；var B1=t1 bird.offsetHeight//范仲淹，范仲淹var L2=obj 2 .偏左；var R2=L2 obj 2 .偏移宽度；T2=obj 1 . offset top；var B2=T2 obj 1 .偏移高度；//你好if(R1 L2 L1 R2 B1 T2 t1 B2){ game over()；} }函数法官(){//我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊！我的天啊，魏冄var conduititem=document。查询选择器(“”).导管组').querySelectorAll(').导管项目'；//吕惠卿（音译),吾曰撞上了高丽高丽高丽高丽高丽。for(var I=0)；我有一个项目。长度){ var top _ conduct=传导项[I].querySelector(“”).top _ conduct '；var bottom _ conduct=传导项[I].querySelector(“”).bottom _ conduct '；顶_管路、管路项目[i]:底部_导管，导管项目[i]).}}何如5个：吴亚玲，吴亚玲。何如，何如，大和，吴亚玲，1741年，1821年。

//吴亚玲播放结束()函数{//吴亚玲吴亚玲吴亚玲gamover _ bgm。play()；isgameover=false//阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏bgm。pause()；clear timer()；//范思哲范思哲小鸟。id=' flybird '鸟。类名='鸟下来'鸟。风格。top=' 392 px//你是谁var historycore=本地存储。getitem('最大分数')；//嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨，哼哼哼masscore。if(history core==null | | history core score){本地存储。setitem('最大分数'，score)；//唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟historyscore=分数：}//喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂历史中心。intra tml=history core://哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟这个分数。innerhtml=score://1740年document.querySelector(').游戏结束风格。显示=' block}何如第七：吴登盛吴登盛。

//游戏初始化函数init() {//为start_btn创建一个点击事件，即start按钮start _ BTN . onclick=function(){//点击后，开始界面隐藏gamestartdiv . style . display=' none '；//小鸟显示bird . style . display=' block '；//使鸟在中间显示bird . style . top=' 200 px '；bgm . play()；//点击调用birdJump方法，使鸟上升。//开始创建管道导管计时器=setinterval (create _ pipe，2000)document . addeventlistener(' click '，birdjump，false)crash test timer=set interval(judge，1000/60)；} } init()；第七步：游戏重启方法

//restart vargame _ restart=document . queryselector('。game _ restart ')game _ restart . onclick=restart；Var conduit _ group=文档。queryselector('。conduit _ group ')//回到界面函数restart () {bird。class name=' bird ' clear timer()；scoreDiv.innerHTML=nullisGameOver=true速度=0；得分=0；speedMax=8；document.querySelector('。game over '). style . display=' none '；gamestartdiv . style . display=' block '；bird . style . display=' none '；conduit _ group.innerHTML=}这里使用的clearTimer方法是清除所有定时器，代码如下：

函数clearTimer(){ var timer=setInterval(function(){ }，30)；for(I=0；I定时器；I){ ClearInterval(I)；}}这个游戏已经大致做好了。

效果图如下：

源代码下载地址附后。请在谷歌浏览器上试试。

源代码下载地址

以上是边肖介绍的用纯JavaScript实现flappy bird游戏的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！