javascript实现flappybird 解析

很早之前写了这个小鸟的代码不是很难一起看看吧~

html和css代码

引入图片和游戏框居中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin: 0;padding: 0;}</style></head><body><div id="background" style="overflow: hidden;width: 800px;height: 600px;background: url(img/sky.png) repeat-x;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"><div id="bird" style="background: url(img/birds.png);width: 52px;height:45px;position: absolute;top: 40%;left:33%;"></div></div></body><script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
</html>

js代码

onload = function() {background = document.querySelector('#background');background.x = 0;bird = document.querySelector('#bird');bird.fly = 0;var speed = 1;var play = true; //游戏运行变量bird.y = bird.offsetTop;document.onclick = function() {speed = -4; //小鸟每次点击后跳起的高度(不完全是跳起的高度 是跳起时的速度 速度会减小 因为有'重力加速度'这种东西)}var mark = new Array();var timerId = new Array();var k = 0;var j = 0; //记录通过柱子个数mark[k] = createPipe(k); //先创建第一个对象(因为计时器在0时不执行)setInterval(function() {if (play)createPipe(++k);}, 3000); //创建管道 储存入数组function createPipe(m) {var pipe = new Object();var long = Math.random() * 300; //柱子随机高度的基础pipe.top = document.createElement('div');pipe.bottom = document.createElement('div');pipe.x = 0;pipe.top.style.background = 'url(img/pipe2.png) no-repeat';pipe.top.style.width = '52px';pipe.top.style.height = '420px';pipe.top.style.position = 'absolute';pipe.top.style.top = -320 + long + 'px';pipe.top.style.right = 0 + 'px';pipe.bottom.style.background = 'url(img/pipe1.png) no-repeat'pipe.bottom.style.width = '52px';pipe.bottom.style.height = '420px';pipe.bottom.style.position = 'absolute';pipe.bottom.style.top = 220 + long + 'px'; //设定管子固定的间隔是100px 计算不详解pipe.bottom.style.right = 0 + 'px';background.appendChild(pipe.top);background.appendChild(pipe.bottom);timerId[m] = setInterval(function() {if (play) {pipe.x += 2;pipe.top.style.right = pipe.x + 'px';pipe.bottom.style.right = pipe.x + 'px'; //移动柱子if (pipe.top.offsetLeft <= (bird.offsetLeft + bird.offsetWidth - 15) && pipe.top.offsetLeft >= (bird.offsetLeft -pipe.top.offsetWidth + 15)) {//判断当柱子移动到某个区间时 小鸟的高度是否触碰到柱子 计算不详解 15是因为小鸟图左右各有15的距离是空的if (bird.offsetTop <= 85 + long || bird.offsetTop + bird.offsetWidth >= pipe.bottom.offsetTop + 15) //判断如果触碰到柱子 游戏执行变量会等于false;{play = false;j = m; //记录当前通过的个数}}if (pipe.bottom.offsetLeft + pipe.bottom.offsetWidth <= 0) {//如果柱子移出屏幕了clearInterval(timerId[m]);pipe.top.parentNode.removeChild(pipe.bottom);pipe.top.parentNode.removeChild(pipe.top);delete pipe.bottom;delete pipe.top;delete pipe; //删除节点删除元素 防止占内存太多}}}, 30);return pipe;}var time = setInterval(function() {if (play) {background.x -= 2;background.style.backgroundPositionX = background.x + 'px'; //背景移动bird.fly++;bird.style.backgroundPositionX = (bird.fly % 3) * bird.offsetWidth + 'px'; //小鸟翅膀扇动 实际上是一个精灵图不断变换位置} else {alert('通过' + j + '个柱子!'); //游戏结束的提示clearInterval(time);}}, 10);setInterval(function() {if (play) {bird.y += speed;speed += 0.12; //加速度设置 速度如同一个等加数列bird.style.top = bird.y + 'px';if (bird.y >= background.offsetHeight - bird.offsetHeight + 15)play = false; //小鸟触碰到底部 执行变量变为false}}, 10)
}

背景小鸟柱子三个主体对象

背景

背景的移动，背景无限向左移动模拟了向前的的感觉实际上小鸟是不动的

注意：元素背景图片要设置为repeat-x这样子x方向就是无限的可以无限向右移动达到动画效果（下面小鸟的飞翔也同理）

小鸟

使用精灵图无限向左（右，可以模拟小鸟煽动翅膀的效果）

bird.style.backgroundPositionX = (bird.fly % 3) * bird.offsetWidth + 'px'; //小鸟翅膀扇动 实际上是一个精灵图不断变换位置

小鸟会往下掉而且掉的速度会不断增大（加速度）

bird.y += speed;
speed += 0.12; //加速度设置 速度如同一个等加数列

当点击时改变speed为负数小鸟就跳起来了

speed = -4; //小鸟每次点击后跳起的高度(不完全是跳起的高度 是跳起时的速度 速度会减小 类似'重力加速度')

柱子

写一个工厂函数隔几秒就创建柱子对象

一个竖直上我用top和bottom 分上下

柱子有最高和最低点距离固定为100px 具体实现是这样子

var long = Math.random() * 300; //柱子随机高度
pipe.top.style.top = -320 + long + 'px';
pipe.bottom.style.top = 220 + long + 'px';//需要配合游戏界面高度计算

这个是一个具体而简单的加减数学问题大家可以分析一下

每个竖直关卡都会有一个定时器使他向左移动

游戏逻辑

over逻辑

设定一个标志play 为false 即游戏结束

两种情况游戏结束：掉地上和碰到柱子了

掉到地上：即offsettop 为游戏界面高度，play=false，但是小鸟图会有一边框需要慢慢测试处理细节（同下

碰到柱子：即柱子到达小鸟位置时需要判断小鸟位置与这个柱子有没有碰触同样是简单数学问题

游戏大概是这样子

因为游戏是一个月半前写的其实还有很多很多优化的地方比如所有柱子共用一个定时器向前移动小鸟碰触柱子时判断简化等等…而且也不是面向对象的写法写得很乱不过还是可以跑得起来的~

js实现flappybird解析相关推荐

一段代码看出JS的的解析到执行的顺序规则
一段代码看出JS的的解析到执行的顺序规则代码 function bar(a, b) {b = 3;var b;function b(){}console.log(a); // 打印出:10conso ...
狼叔直播 Reaction《学习指北：Node.js 2022 全解析》
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan02 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
js使用eval解析json(js中使用json)
eval的用法eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句,下面给出eval解析json的示例先来说eval的用法,内容比较简单,熟悉的可以跳过 eval函数接收一个参 ...
xss编码绕过详解（更像是在介绍实体编码和JS编码的解析过程）
xss编码绕过详解(更像是在介绍实体编码和JS编码的解析过程) 注:本文通过研究各种情况下实体编码和JS编码是否生效,进而总结了哪些情况下能够进行编码后,javascript代码依然能够正常执行. 解 ...
php 读取 js json格式数据,js读取和解析JSON数据的方法
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
js简单遍历解析json字符串
js简单遍历解析json字符串前两天接触到前台的json字符串遍历拼接于是就翻了一些资料总结了一下遍历取值的方法,如有不对请指正,感谢阅读!! 先上json串 { "list": ...
JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解现在JSON格式在web开发中非常重要,特别是在使用 ...
用Js的eval解析JSON中的注意点
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
如何将文件地址转为url_Node.js 源码解析 util.promisify 如何将 Callback 转为 Promise
Nodejs util 模块提供了很多工具函数.为了解决回调地狱问题,Nodejs v8.0.0 提供了 promisify 方法可以将 Callback 转为 Promise 对象. 工作中对于一些 ...

js实现flappybird解析