飞扬的鸟小游戏实例代码纯Javaｓｃｒｉｐｔ实现

前言：uff1a

Flappy Bird是一个工作开发的Dong Nguyen，一个来自越南的独立游戏开发者。游戏在2013年5月24日推出，并在2014年2月突然红。2014年2月，Flappy Bird撤出由开发商自己和谷歌应用商店的苹果。2014年8月，它被正式重返App Store正式加入飞扬的球迷期待已久的多人作战模式。在游戏中，玩家要控制一只鸟，跨越障碍，是由各种不同长度的管。

文本：

下一步是分步实施。

步骤1：页面布局，这里没有什么要说的，页面内容如下：
步骤2：如何让鸟落下来，让鸟跳起来

鸟下降：

给一只鸟的速度，初始值为0，而速度是由定时器每一次增加到30ms。当速度超过该最大值，即速度> 8，让速度保持最大。
得到一个小鸟/ div
VaR鸟= document.getelementbyid（飞鸟）；
鸟落
函数向下（）{
速度= 1；
bird.id = 'flybird_down；
（up_bgm。停顿）； / /关闭鸟的音乐；
当鸟/下降速度达到最大值时的转速保持不变
如果（速度=该）{
速度=转速；
}
bird.style.top = bird.offsettop +速度+ 'px；
（floortext） / /着陆探测；
}
鸟上升：

上升，即鸟的最高值降低。让速度下降。同时，当鸟儿升起，它关闭掉鸟的定时器，和最后一跳的兴起的定时器，并重新启动上升的计时器。在这里，有一个isgameover，游戏开关，默认的实现，即，当该值为false时，比赛还没开始，这只鸟不能跳。
鸟{升}
函数向上（）{
速度= 0.8；
bird.id = 'flybird_up ' / /。这个ID下的样式是鸟落的背景图片，并添加动画来不断替换鸟的背景图像，这样鸟的翅膀就会移动。
up_bgm.play（）
如果（速度< = 0）{
速度= 0；
ClearInterval（uptimer）；
downtimer = setInterval（下，30）；
}
bird.style.top = bird.offsettop速度+ 'px；
}
鸟的节拍{方法}；
功能birdjump（）{
速度=转速；
如果（isgameover）{
每次跳转时，上下定时器清除，防止叠加。
ClearInterval（uptimer）；
ClearInterval（downtimer）； / /清晰的倒计时；
uptimer = setInterval（上，30）；
}
}
着陆的鸟或鸟/边界上的判断，比赛的结束
功能floortext（）{
VaR T1 = bird.offsettop；
如果（t1 = 396）{
游戏结束；
Gameover（）；
}
如果（t1＜0）{
Gameover（）；
}
}
步骤3：通过以上步骤，鸟可以起飞。其次是管道的创造。所有FlappyBird游戏知道管内的高度是随机的，但两管之间的距离是fixed.math.random（）是用来产生随机数。
随机管道高度的随机函数
函数（最小，最大）{
返回parseInt（Math.random（）*（最大值-最小）+分钟）；
}
创建管道。单击开始按钮后，由计时器创建。
功能create_pipe（）{
无功conduit_group = document.queryselector（。conduit_group ）；
无功conduititem = document.createelement（div）；
创建管道/样式
conduititem.classname = 'conduititem；
将在div的外层创建管道
conduit_group.appendchild（conduititem）；
无功topheight = rand（60, 223）； / /管管道内的高度值
无功bottomheight = 373 - 100 - topheight； / /管道内高价值
在管道上创建
conduititem.innerhtml =
获取最外层的宽度是可以移动的管道的最大值。
VaR最大= canvas.offsetwidth；
管道开始在画布上/开始向外看。
conduititem.style.left =最大+ 'px；
加上开关，每个通过管道添加1个点。
conduititem.addtoscore =真；
管道移动方法，通过定时器继续向左移动，实现流水线的递减值。
conduititem.movetimer = setInterval（）{（）函数（
最大= 3； / / 30ms每向左移动3个像素
conduititem.style.left =最大+ 'px
用完管道后，管道清洗移动计时器，并将其清除。
如果（最大70）{
ClearInterval（conduititem。movetimer）；
conduit_group.removechild（conduititem）；
}
当管道 / / offsetleft小于30，鸟成功通过管道，加1分
如果（conduititem.offsetleft <= 30 conduititem.addtoscore = = true）{
分数+；
conduititem.addtoscore = false；
scorefn（评分）；
}
}，30）
}
步骤4：通过以上步骤，移动管道被创建，鸟可以跳。接下来是碰撞检测，以确定鸟是否符合管道。
/ /鸟和管线的碰撞检测，因为鸟儿obj1，obj2的下管道的一个超集
/ /直接进入向上和向下的管道，offsetleft是0，所以让他父亲集；
函数的碰撞试验（obj1，obj2）{
相关金额{鸟}
VaR L1 = bird.offsetleft；
console.log（L1）
VaR R1 = L1 + bird.offsetwidth；
VaR T1 = bird.offsettop；
VaR B1 = T1 + bird.offsetheight
管道的相关数量
VaR的L2 = obj2.offsetleft；
VaR R2 = L2 + obj2.offsetwidth；
VaR T2 = obj1.offsettop；
VaR B2 = T2 + obj1.offsetheight；
条件
如果（R1，L2，L1，T2，t1，B2）{
Gameover（）；
}
}
函数判断（）{
将当前页中的创建显示为管道，作为数组
无功conduititem = document.queryselector（'。conduit_group）。QuerySelectorAll（'。conduititem）；
显示/管道，通过参数来判断的碰撞试验方法。
对于（var i = 0；i < conduititem.length；i++）{
无功top_conduit = conduititem {我}。queryselector（'。top_conduit）；
无功bottom_conduit = conduititem {我}。queryselector（'。bottom_conduit）；
碰撞试验（top_conduit，conduititem {我}）；
碰撞试验（bottom_conduit，conduititem {我}）；
}
}
第5步：游戏结束。遇到管道，上边界，登陆，游戏结束，显示分数，显示最高历史记录。
/ /结束的游戏
功能GAMEOVER（）{
游戏结束时背景音乐/打开
gameover_bgm.play（）；
isgameover = false；
结尾/音乐
Bgm.pause（）；
ClearTimer（）；
以换取原来的风格{鸟}
bird.id = 'flybird
bird.classname = 'birddown
bird.style.top = '392px；
存储记录
无功historyscore = localstorage.getitem（'maxscore）；
当 / /历史不存在或历史记录比目前的纪录，创造masscore。
如果（historyscore = = null | | historyscore <评分）{
localstorage.setitem（'maxscore，评分）；
记录
historyscore =得分；
}
记录
historyscore.innerhtml = historyscore；
当前的分数
thisscore.innerhtml =得分；
在屏幕上显示/游戏
document.queryselector（'。GAMEOVER）。Style.display =阻止；
}
步骤7：游戏开始方法。
初始化游戏
函数init（）{
/ / start_btn，页面刚开始显示开始创建单击事件，启动按钮，
start_btn.onclick =函数（）{
在启动屏幕隐藏后单击
gamestartdiv.style.display =不关；
鸟类展览
bird.style.display =阻止；
节目中间的鸟
bird.style.top = '200px；
Bgm.play（）；
/ /点击呼叫birdjump方法弥补鸟，
创建管道
conduittimer = setInterval（create_pipe，2000）
Document.addEventListener（听到咔哒声，birdjump，假）
crashtesttimer = setInterval（判断，1000 / 60）；
}
}
init（）；
步骤7：游戏重启方法
启动
无功game_restart = document.queryselector（。game_restart ）
game_restart.onclick =重启；
无功conduit_group = document.queryselector（。conduit_group ）
返回到第一个接口
函数重新启动（）{
bird.classname =‘'
ClearTimer（）；
scorediv.innerhtml = null；
isgameover =真；
速度= 0；
得分= 0；
该= 8；
document.queryselector（'。GAMEOVER）。Style.display =不关；
gamestartdiv.style.display =阻止；
bird.style.display =不关；
conduit_group.innerhtml =；
}
这里使用的cleartimer方法去除所有的定时器代码如下：

功能cleartimer（）{
VaR定时器= setInterval（功能）{ }，（30）；
对于（i = 0；i <定时器；i + +）{
ClearInterval（我）；
}
}
这场比赛即将结束。

结果如下：
在源下载地址旁边，请测试谷歌浏览器。

源代码下载地址

以上是一个小的Javaｓｃｒｉｐｔ Flappy Bird小游戏实例代码，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。