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 ...

随机推荐

android onCreate中获取view宽高为0的解决方法
view.post(runnable) 通过post可以将一个runnable投递到消息队列的尾部,然后等待UI线程Looper调用此runnable的时候,view也已经初始化好了. view.po ...
WebService -- Java 实现之 CXF ( 使用：Spring+CXF+Tomcat发布webService）
1. 新建一个Maven项目,选择webapp模板,命名为WS_Spring_CXF_Tomcat 2. 在POM.xml中添加Spring和CXF的依赖 <!-- 添加 Spring depe ...
mysql 5.7 的安装配置与 navicat premium for mysql 11 的破解使用
再安装mysql5.7 或以上的版本出现了一些问题,现在总结下,希望能给初入学习mysql的人一下帮助,大牛就不要来嘲笑小弟我了首先准备如下: 1.下载mysql 5.7,下载地址:https:// ...
java性能调优及问题追踪--Btrace的使用
在生产环境中经常遇到格式各样的问题,如OOM或者莫名其妙的进程死掉.一般情况下是通过修改程序,添加打印日志:然后重新发布程序来完成.然而,这不仅麻烦,而且带来很多不可控的因素.有没有一种方式,在不修改 ...
ZOJ 3871 Convex Hull（计算几何、凸包）
题意:给n个点,|x[i]|,|y[i]| <= 1e9.求在所有情况下的子集下(子集点数>=3),凸包的面积和. 这题主要有几个方面,一个是凸包的面积,可以直接用线段的有向面积和求得,这 ...
maven项目断点依赖maven插件
CString转换为string
string CStringToString(CString strMFC) { CStringA strA; strA = strMFC.GetBuffer(); strMFC.ReleaseBuf ...
Object-c 内存管理
内存管理主要内容 1.内存管理的概念 2.引用计数 3.如何持有对象所有权 4.自动释放池 5.@property的使用什么是内存管理内存管理是关于如何管理对象生 ...
.net中的反射（转载）
原文地址:http://www.cnblogs.com/Stephenchao/p/4481995.html 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的 ...
了解一下OOP的反射API
PHP5的类和对象函数并没有告诉我们类内部的所有一切,而只是报告了它们的公共成员.要充分了解一个类,需要知道其私有成员和保护成员,还要知道其方法所期望的参数 .对此,使用反射API. 1 查看自定义类 ...

fly bird

fly bird的更多相关文章

随机推荐

热门专题