fly bird

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

img{

vertical-align: top;

}

ul li{

list-style: none;

}

#game{

width: 343px;

height: 480px;

background:url(img/bg.jpg) no-repeat;

margin: 20px auto 0;

position: relative;

overflow: hidden;

}

/*标题部分*/

#head{

width: 236px;

height: 77px;

background:url(img/head.jpg) no-repeat;

position: absolute;

left: 50%;

margin-left:-118px ;

top: 100px;

}

#head>img{

position: absolute;

right: 0;

top: 50%;

margin-top: -13px;

/*关键帧动画*/

animation: birdFly 1.5s linear infinite;

}

@keyframes birdFly{

from{

top: 50%;

}

25%{

top:25% ;

}

50%{

top: 50%;

}

75%{

top: 75%;

}

to{

top: 50%;

}

#menu{

position: absolute;

top: 240px;

width: 100%;

text-align: center;

}

/*改变鼠标光标形状*/

#start{

cursor: pointer;

}

/*结束菜单*/

#end{

position: absolute;

top: 100px;

width: 100%;

text-align: center;

font-size:28px ;

display: none;

}

#currentScore{

position: absolute;

right: 80px;

top: 40px;

}

#bestScore{

position: absolute;

right: 80px;

top: 90px;

}

/*管道*/

#pipes{

height: 100%;

}

/*单个管道*/

.pipe{

width: 62px;

height: 423px;

position: absolute;

}

.pipe_top{

position: absolute;

top: 0;

width: 62px;

/*高度通过JS控制*/

/*height: 150px;*/

background: url(img/up_pipe.png) bottom no-repeat,url(img/up_mod.png) repeat-y;

}

.pipe_bottom{

position: absolute;

bottom: 0;

width: 62px;

/*高度通过JS控制*/

/*height: 150px;*/

background: url(img/down_pipe.png) top no-repeat,url(img/down_mod.png) repeat-y;

}

/*游戏中的鸟*/

#bird{

position: absolute;

left: 62px;

top: 200px;

display: none;

}

/*分数*/

#score{

position: absolute;

top: 0;

width: 100%;

text-align: center;

display: none;

}

</style>

</head>

<body>

</div>

</div>

</div>

<!--<li class="pipe">

</li>-->

</ul>

</div>

</div>

</body>

//获取页面元素

//开始按钮

var startBtn = document.getElementById('start');

//标题部分

var headDiv = document.getElementById('head');

//开始菜单

var menuDiv = document.getElementById('menu');

//管道

var pipesUL = document.getElementById('pipes');

//游戏中的小鸟

var birdImg = document.getElementById('bird');

//分数

var scoreDiv = document.getElementById('score');

//游戏界面

var gameDiv = document.getElementById('game');

//点击屏幕声音

var bulletMusic = document.getElementById('bulletMusic');

//游戏背景声音

var gameMusic = document.getElementById('gameMusic');

//游戏结束声音

var gameoverMusic = document.getElementById('gameOverMusic');

//结束菜单

var endmenu = document.getElementById('end');

//当前分数

var currentSpan = document.getElementById('currentScore');

//最好分数

var bestSpan = document.getElementById('bestScore');

var num = 0;

var speed = 0; // 记录小鸟的速度

//小鸟下降的计时器

var birdDownTimer;

//小鸟上升的计时器

var birdUpTimer;

//游戏开始

startBtn.onclick = function(e) {

//隐藏标题和菜单

headDiv.style.display = 'none';

menuDiv.style.display = 'none';

//播放背景音乐

gameMusic.loop = 'loop';

gameMusic.play();

//取消事件冒泡

var even = e || window.event;

even.stopPropagation();

even.cancelBubble = true; //ie

//显示小鸟

birdImg.style.display = 'block';

//显示分数

scoreDiv.style.display = 'block';

//生成管道

setInterval(creatPipe, 3000);

//小鸟下落

birdDownTimer = setInterval(birdDown, 30);

//给 gameDiv 添加点击方法(用于点击屏幕是的声音)

gameDiv.onclick = clickGame

//检测碰撞

setInterval(function() {

// 获取所有管道

var lis = document.querySelectorAll('li');

for(var i = 0; i < lis.length; i++) {

//判断上管道

collisionJC(lis[i].firstChild);

//判断下管道;

collisionJC(lis[i].lastChild);

}

}, 10);

}

//定义函数判断管道有没有与小鸟碰撞

function collisionJC(TBpipe) {

// 小鸟的位置

var topB = birdImg.offsetTop;

var bottomB = topB + birdImg.offsetHeight;

var leftB = birdImg.offsetLeft;

var rightB = leftB + birdImg.offsetWidth;

// 管道的位置

var topP = TBpipe.offsetTop;

var bottomP = topP + TBpipe.offsetHeight;

var leftP = TBpipe.offsetParent.offsetLeft;

var rightP = leftP + TBpipe.offsetWidth;

// 判断碰撞

if (!(bottomB < topP || leftB > rightP || topB > bottomP ||rightB < leftP)) {

// 死掉了

gameOver();

}

//定义函数创建管道

function creatPipe() {

//创建li

var li = document.createElement('li');

//配置属性

li.className = 'pipe';

li.style.left = pipesUL.clientWidth+'px';

//添加到父元素

pipesUL.appendChild(li);

var doorHeight = 113; //小鸟通过的高度

var minHeight = 60; //管道最小高度

//上管道高度

var topHeight = Math.floor(Math.random() * (li.clientHeight - doorHeight - minHeight - minHeight + 1) + minHeight);

//下管道高度

var bottomHeight = li.clientHeight - doorHeight - topHeight;

//创建topDiv

var topDiv = document.createElement('div')

topDiv.className = 'pipe_top';

topDiv.style.height = topHeight +'px';

li.appendChild(topDiv);

//创建bottomDiv

var bottomDiv = document.createElement('div')

bottomDiv.className = 'pipe_bottom';

bottomDiv.style.height = bottomHeight +'px';

li.appendChild(bottomDiv);

//让管道动

var L = pipesUL.clientWidth;

var pipeTimer = setInterval(function() {

L--;

li.style.left = L +'px';

if(L <= -li.clientWidth) {

clearInterval(pipeTimer);

pipesUL.removeChild(li);

}

if(L == 0) {

changeScore();

}

}, 10);

}

//定义函数改变分数

function changeScore() {

num++;

// 清除原来的图片

scoreDiv.innerHTML = '';

if(num < 10) {

var img = document.createElement('img');

img.src = 'img/' + num + '.jpg';

scoreDiv.appendChild(img);

} else if(num >= 10 && num < 100) {

// 十位

var img1 = document.createElement('img');

img1.src = 'img/' + Math.floor(num / 10) + '.jpg';

scoreDiv.appendChild(img1);

// 个位

var img2 = document.createElement('img');

img2.src = 'img/' + num % 10 + '.jpg';

scoreDiv.appendChild(img2);

} else if(num >= 100 && num < 1000) {

// 百位

// 十位

// 个位

} else if(num >= 1000 && num < 10000) {

}

//定义函数小鸟下落

function birdDown() {

// 修改图片

birdImg.src = 'img/down_bird.png';

// 修改速度

speed += 0.5;

// 设置最大速度

if (speed >= 8) {

speed = 8;

}

// 修改位置

birdImg.style.top = birdImg.offsetTop + speed + 'px';

// 判断是否碰到地面

if (birdImg.offsetTop + birdImg.clientHeight >= 423) {

// 死了

gameOver();

}

//定义函数小鸟上升

function birdUp() {

// 修改图片

birdImg.src = 'img/up_bird.png';

// 修改速度

speed -= 0.5;

// 当 speed 小于 0 时, 就会下落

if (speed < 0) {

// 清除小鸟上升的计时器

clearInterval(birdUpTimer);

// 小鸟下落

speed = 0;

birdDownTimer = setInterval(birdDown, 30);

}

// 修改位置

birdImg.style.top = birdImg.offsetTop - speed + 'px';

// 上升的极限

if (birdImg.offsetTop <= 0) {

// 死了

gameOver();

}

//点击屏幕的方法

function clickGame() {

// 播放音乐

bulletMusic.play();

// 清除计时器

clearInterval(birdDownTimer);

clearInterval(birdUpTimer);

// 小鸟上升

speed = 8;

birdUpTimer = setInterval(birdUp, 30);

}

// 游戏结束

function gameOver() {

// 播放音乐

gameOverMusic.play();

// 停止背景音乐

gameMusic.pause();

// 清除计时器

var end = setInterval(function() {}, 1);

for (var i = 1; i <= end; i++) {

clearInterval(i);

}

// 显示结束菜单

endmenu.style.display = 'block';

// 提升结束菜单的层级

endmenu.style.zIndex = 1;

gameDiv.onclick = null;

// 当前分数

currentSpan.innerHTML = num;

// 最高分

// localStorage 本地存储

if (localStorage.bestScroe) {

var maxScore = localStorage.bestScroe > num ? localStorage.bestScroe : num;

bestSpan.innerHTML = maxScore;

localStorage.bestScroe = maxScore;

} else {

bestSpan.innerHTML = num;

localStorage.bestScroe = num;

}

</script>

</html>

fly bird的更多相关文章

JavaScript实现Fly Bird小游戏
1.分析页面结构,理清需求和功能游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面. 1.1 开始界面 start.gif 游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟 start 按钮,点 ...
flappy bird游戏源代码揭秘和下载
转:http://blog.csdn.net/touchsnow/article/details/19071961 背景: 最近火爆全球的游戏flappy bird让笔者叹为观止,于是花了一天的时间山 ...
canvas小游戏——flappy bird
前言如果说学编程就是学逻辑的话,那锻炼逻辑能力的最好方法就莫过于写游戏了.最近看了一位大神的fly bird小游戏,感觉很有帮助.于是为了寻求进一步的提高,我花了两天时间自己写了一个canvas版本 ...
jQuery系列：五个模块总结
Query插件,以备并希望在前端方面有所长进.请批评指正. 一,类型判断全解 JQuery判断类型扩展方法:$.type() /*type: function( obj ) { if ( obj == ...
jdbc事务处理和连接池
JDBC: * JDBC概念:Java DataBase Connectivity(Java数据库连接) SUN公司提供的一组连接数据库API. * JDBC开发步骤: * 1.注册驱动. * 2.获 ...
第四章面向对象与IO操作
一.类(类中可以写字段.属性.方法.构造函数)1.定义一个类用关键字class,后面加类名,类名第一个字母用大写,可用private或public修饰符定义访问级别,类可定义在同一命名空间中,也可定义 ...
[技术学习]js接口继承
js是面向对象语言,但是js又缺乏了面向对象的诸多特性,比如继承,没有接口继承也没有父类继承,因此有时候需要人工来实现继承. 一.首先看下java中面向对象的继承: //定义类鸟类的飞行动作 inte ...
多态.xml
pre{ line-height:1; color:#1e1e1e; background-color:#f0f0f0; font-size:16px;}.sysFunc{color:#627cf6; ...
Python 中的引用和类属性的初步理解
最近对Python 的对象引用机制稍微研究了一下,留下笔记,以供查阅. 首先有一点是明确的:「Python 中一切皆对象」. 那么,这到底意味着什么呢? 如下代码: #!/usr/bin/env py ...

随机推荐

windows7设置开机启动方式
打开计算机(资源管理器)(快捷键win+e),输入 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 将需要开机启动的软件的快捷 ...
C# HttpWebReqeust和HttpWebResponse发送请求
var request = (HttpWebRequest)WebRequest.Create("URL"); var data = Encoding.UTF8.GetBytes( ...
VMware ubuntu中执行python文件的操作小结
angularjs $scope.$apply 方法详解
myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...
asp:Repeater实例备忘
1.前置部分 <asp:Repeater ID="rptPlanNo" runat="server" OnItemDataBound="rptP ...
c语言内存原理
1.内存寻址由大到小,优先分配内存地址比较大得字节给变量 2.变量越先定义,内存地址就越大 3.取得变量的地址:&变量名 4.输出地址 %p
【mongo】mongoVUE使用
1.查询存在字段"test"的项 {"test":{$exists:true}} 2.在表中插入字段 {$set:{"}} 3.正则匹配 {" ...
seo优化urlrewrite伪静态技术
1.下载urlrewrite-3.2.0.jar 2.在WEB-INF下增加urlrewrite.xml <?xml version="1.0" encoding=" ...
StringBuffer与StringBuilder的简单理解
联系:两者都适用于字符串的操作,都可以随便对字符串的内容进行变更操作,都继承至AbstractStringBuilder. 区别:StringBuffer是线程安全的,方法都加了synchronize ...
iOS JSON、NSDictionary互转
#import "myCode.h" @implementation myCode /*! * @brief 把格式化的JSON格式的字符串转换成字典 * @param jsonS ...

fly bird

fly bird的更多相关文章

随机推荐

热门专题