前言：
《flappy bird》是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品，游戏于2013年5月24日上线，并在2014年2月突然暴红。2014年2月，《Flappy Bird》被开发者本人从苹果及谷歌应用商店撤下。2014年8月份正式回归APP STORE，正式加入Flappy迷们期待已久的多人对战模式。游戏中玩家必须控制一只小鸟，跨越由各种不同长度水管所组成的障碍。 正文：
接下来就是一步一步来实现它
步骤1：页面布局，这儿就不多说了，页面内容如下:
步骤2：如何让小鸟下落以及让小鸟跳起来
鸟下降：
给小鸟一个speed,初始值为0，通过计时器让speed每隔30ms加1，当speed超出最大值speedMax，即speed>8时，让速度保持最大值。
= speedMax) {
speed = speedMax;
}
bird.style.top = bird.offsetTop + speed + 'px';
floorText(); //落地检测
}
鸟上升：
上升，即小鸟的top值减小的过程。让speed减小即可。同时，在鸟上升时，关闭小鸟下降的计时器，以及上次起跳时的上升的计时器，并重新启动上升计时器。在这儿，有个isGameOver,为游戏开关，默认为ture,即当该值为false时，游戏未开始，小鸟无法起跳。
图片，并增加动画不断替换小鸟的背景图像，让小鸟翅膀动起来~
up_bgm.play()
if(speed <= 0) {
speed = 0;
clearInterval(upTimer);
DownTimer = setInterval(down,30);
}
bird.style.top = bird.offsetTop - speed + 'px';
}
//鸟跳动的方法；
function birdJump() {
speed = speedMax;
if(isGameOver) {
//每次向上跳时，先将向上、向下计时器清楚，防止叠加
clearInterval(upTimer);
clearInterval(DownTimer); //清除向下的定时器；
upTimer = setInterval(up,30);
}
}
//判断小鸟落地或者小鸟跳出上边界，此时游戏结束
function floorText() {
var t1 = bird.offsetTop;
if(t1 > 396) {
//游戏结束；
gameover();
}
if(t1 < 0) {
gameover();
}
}
步骤3：通过以上步骤，小鸟可以起跳啦。接下来就是管道的创建。玩过flappybird游戏的都知道，里面的管道的高度是随机的，但上下两个管道之间的距离是固定的。用Math.random()来产生随机数。
随机函数，用来随机产生钢管的高度
function rand(min,max) {
return parseInt(Math.random() * (max - min) + min);
}
//创建管道。在点击开始按钮后，通过计时器来创建
function create_pipe() {
var conduit_group = document.querySelector(".conduit_group");
var conduitItem = document.createElement("div");
//给创建的管道一个样式
conduitItem.className = 'conduitItem';
//将创建的管道放入外层div
conduit_group.appendChild(conduitItem);
var topHeight = rand(60,223);//管道里面 上管道的高度值
var bottomHeight = 373 - 100 - topHeight;//管道里面 下管道的高度值
//创建上下管道
conduitItem.innerHTML = ''
//获取最外层div的宽度，即为管道可以移动的最大值
var maxWidth = canvas.offsetWidth;
//让管道刚开始在canvas外面，一开始看不到
conduitItem.style.left = maxWidth + 'px';
//加分开关，每通过一个管道分数才能加1
conduitItem.AddToscore = true;
//管道移动方法，通过计时器不断使其的left值递减来实现管道移动。
conduitItem.movetimer = setInterval(function() {
maxWidth -= 3;//每30ms向左移动3个像素
conduitItem.style.left = maxWidth + 'px'
//在管道跑出去之后，清除使该管道移动的计时器，并将其移除。
if(maxWidth <= -70) {
clearInterval(conduitItem.movetimer);
conduit_group.removeChild(conduitItem);
}
//当管道的offsetLeft小于30时，即小鸟成功通过管道之后，分数加1
if(conduitItem.offsetLeft <= 30 && conduitItem.AddToscore == true) {
score++;
conduitItem.AddToscore = false;
scoreFn(score);
}
},30)
}
步骤4：通过以上步骤，移动的管道创建好了，小鸟也可以跳了。接下来就是进行碰撞检测，判断小鸟是否碰到管道。
l2 && l1 < r2 && b1 > t2 && t1 < b2) {
gameover();
}
}
function judge() {
//获取创造的在当前页面显示的所有管道，为一个数组
var conduitItem = document.querySelector('.conduit_group').querySelectorAll('.conduitItem');
//遍历显示的管道，为crashTest方法传递参数来进行判断。
for(var i = 0; i < conduitItem.length; i++) {
var top_conduit = conduitItem[i].querySelector('.top_conduit');
var bottom_conduit = conduitItem[i].querySelector('.bottom_conduit');
crashTest(top_conduit,conduitItem[i]);
crashTest(bottom_conduit,conduitItem[i]);
}
}
步骤5：游戏结束方法。当碰到管道，碰到上边界，落地，游戏结束，显示本局分数，并显示历史最高记录。
score = localStorage.getItem('maxscore');
//当历史记录不存在或者历史记录小于当前记录时，创建masscore.
if(historyscore == null || historyscore < score) {
localStorage.setItem('maxscore',score);
//刷新记录
historyscore = score;
}
//历史最高纪录
historyscore.innerHTML = historyscore;
//当前分数
thisscore.innerHTML = score;
//显示游戏结束画面
document.querySelector('.gameover').style.display = 'block';
}
步骤7：游戏开始方法。
页面刚开始显示的start创建点击事件，即开始按钮
start_btn.onclick = function() {
//点击之后，开始界面隐藏
gameStartDiv.style.display = 'none';
//小鸟显示出来
bird.style.display = 'block';
//使小鸟在中间显示
bird.style.top = '200px';
bgm.play();
//通过点击，来调用birdJump方法，来使小鸟上升
//开始创造管道
conduitTimer = setInterval(create_pipe,2000)
document.addEventListener('click',birdJump,false)
crashTestTimer = setInterval(judge,1000 / 60);
}
}
init();
步骤7：游戏重新开始方法
scoreDiv.innerHTML = null;
isGameOver = true;
speed = 0;
score=0;
speedMax = 8;
document.querySelector('.gameover').style.display = 'none';
gameStartDiv.style.display = 'block';
bird.style.display = 'none';
conduit_group.innerHTML = '';
}
这儿用到的clearTimer方法为清除所有记时器，代码如下：
这样游戏大致已经做好啦。
效果图如下：
下面附上源码下载地址,请在谷歌浏览器上进行试验。
以上所述是小编给大家介绍的纯JavaScript 实现flappy bird小游戏实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/45555.html