纯JavaScript 实现flappy bird小游戏实例代码


Posted in Javascript onSeptember 27, 2016

前言:

《flappy bird》是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红。2014年2月,《Flappy Bird》被开发者本人从苹果及谷歌应用商店撤下。2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式。游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍。
正文:

接下来就是一步一步来实现它

步骤1:页面布局,这儿就不多说了,页面内容如下:

纯JavaScript 实现flappy bird小游戏实例代码

步骤2:如何让小鸟下落以及让小鸟跳起来

鸟下降:

给小鸟一个speed,初始值为0,通过计时器让speed每隔30ms加1,当speed超出最大值speedMax,即speed>8时,让速度保持最大值。

//获取鸟div
var bird = document.getElementById("flybird");
//鸟下降
function down() {
speed += 1;
bird.id = 'flybird_down';
up_bgm.pause();//关闭小鸟上升音乐;
//当鸟下落速度达到最大值speedMax时,保持不变
if(speed >= speedMax) {
speed = speedMax;
}
bird.style.top = bird.offsetTop + speed + 'px';
floorText(); //落地检测
}

鸟上升:

上升,即小鸟的top值减小的过程。让speed减小即可。同时,在鸟上升时,关闭小鸟下降的计时器,以及上次起跳时的上升的计时器,并重新启动上升计时器。在这儿,有个isGameOver,为游戏开关,默认为ture,即当该值为false时,游戏未开始,小鸟无法起跳。

//小鸟上升
function up() {
speed -= 0.8;
bird.id = 'flybird_up'//该id下的样式为小鸟下降的背景图片,并增加动画不断替换小鸟的背景图像,让小鸟翅膀动起来~
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 class="top_conduit"><div style="height:' + topHeight + 'px"></div></div><div class="bottom_conduit"><div style="height:' + bottomHeight + 'px"></div></div>'
//获取最外层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:通过以上步骤,移动的管道创建好了,小鸟也可以跳了。接下来就是进行碰撞检测,判断小鸟是否碰到管道。

//鸟和管道碰撞检测,obj1为小鸟,obj2为上下管道的父集
//直接获取上下管道,offsetLeft为0,因此要获取其父集;
function crashTest(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;
//判断条件
if(r1 > 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:游戏结束方法。当碰到管道,碰到上边界,落地,游戏结束,显示本局分数,并显示历史最高记录。

//游戏结束
function gameover() {
//游戏结束背景音乐打开
gameover_bgm.play();
isGameOver = false;
//结束音乐
bgm.pause();
clearTimer();
//小鸟换回原来的样式
bird.id = 'flybird'
bird.className = 'birddown'
bird.style.top = '392px';
//存储最高纪录
var historyscore = 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:游戏开始方法。

//游戏初始化
function init() {
//为start_btn,即页面刚开始显示的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:游戏重新开始方法

//重新开始
var game_restart = document.querySelector(".game_restart")
game_restart.onclick = restart;
var conduit_group = document.querySelector(".conduit_group")
//回到刚开始的界面
function restart() {
bird.className = 'bird'
clearTimer();
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方法为清除所有记时器,代码如下:

function clearTimer() {
var timer = setInterval(function() {}, 30);
for(i = 0; i < timer; i++) {
clearInterval(i);
}
}

这样游戏大致已经做好啦。

效果图如下:

纯JavaScript 实现flappy bird小游戏实例代码

下面附上源码下载地址,请在谷歌浏览器上进行试验。

源码下载地址

以上所述是小编给大家介绍的纯JavaScript 实现flappy bird小游戏实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 #Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 #Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 #Javascript
javascript动画之模拟拖拽效果篇
Sep 26 #Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 #Javascript
微信小程序 框架详解及实例应用
Sep 26 #Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 #Javascript
You might like
php中unserialize返回false的解决方法
2014/09/22 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php HTML无刷新提交表单
2016/04/05 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
Python实现telnet服务器的方法
2015/07/10 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python列表list保留顺序去重的实例
2018/12/14 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python画图高斯分布的示例
2019/07/10 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
运动会开幕式邀请函
2014/01/22 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Python中time标准库的使用教程
2022/04/13 Python