<!DOCTYPE html>
<html>
<head>
<title>飞鸟</title>
<style type="text/css">
/* 不同内核*/
@-webkit-keyframes fly{
0%{
transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
100%{
transform: translate3d(0,30px,0);
-o-transform: translate3d(0,30px,0);
-ms-transform: translate3d(0,30px,0);
-moz-transform: translate3d(0,30px,0);
-webkit-transform: translate3d(0,30px,0);
}
}
@keyframes fly{
0%{
transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
100%{
transform: translate3d(0,30px,0);
-o-transform: translate3d(0,30px,0);
-ms-transform: translate3d(0,30px,0);
-moz-transform: translate3d(0,30px,0);
-webkit-transform: translate3d(0,30px,0);
}
}
@keyframes birdMove{
0%{
background: url("./img/bird2_2.png");
}
50%{
background: url("./img/bird2_1.png");
}
100%{
background: url("./img/bird2_0.png");
}
}
@keyframes banner{
0%{
transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
100%{
transform: translate3d(-288px,0,0);
-o-transform: translate3d(-288px,0,0);
-ms-transform: translate3d(-288px,0,0);
-moz-transform: translate3d(-288px,0,0);
-webkit-transform: translate3d(-288px,0,0);
}
}
#wrap{
width: 288px;
height: 512px;
background: url("./img/bg_day.png");
margin:0 auto;
overflow: hidden;
position: relative;
}
#beginScore{
width: 24px;
height: 44px;
background: url("./img/0.png");
margin: 35px auto;
}
#title {
width: 178px;
height: 48px;
margin: 0 auto;
position: relative;
-o-animation: fly 1s infinite alternate;
-ms-animation: fly 1s infinite alternate;
-moz-animation: fly 1s infinite alternate;
-webkit-animation: fly 1s infinite alternate;
}
#beginBird{
width: 34px;
height: 25px;
background: url("./img/bird2_2.png");
position: absolute;
left: 50%;
transform: translate3d(-50%,0,0);
animation: birdMove 1s infinite alternate;
-o-animation: birdMove 1s infinite alternate;
-ms-animation: birdMove 1s infinite alternate;
-moz-animation: birdMove 1s infinite alternate;
-webkit-animation: birdMove 1s infinite alternate;
}
#beginBtn{
width: 116px;
height: 70px;
background: url("./img/button_play.png");
position: absolute;
left: 50%;
transform: translate3d(-50%,0,0);
top: 320px;
}
#banner{
background: url("./img/land.png");
width: 576px;
height: 90px;
position: absolute;
bottom: 0px;
animation: banner 3s linear infinite ;
-webkit-animation: banner 3s linear infinite ;
}
#bird{
width: 33px;
height: 25px;
/*background: url("./img/bird2_0.png");*/
position: absolute;
left: 30px;
top: 200px;
display: none;
}
.birdup{
background: url("./img/bird2_1.png");
}
.birddown{
background: url("./img/bird2_2.png");
}
.duct {
width: 52px;
height: 422px;
overflow: hidden;
/*border: 1px solid black;*/
position: absolute;
left: 288px;
}
.upduct{
width: 62px;
height: 320px;
background: url("./img/pipe_up.png") no-repeat;
position: absolute;
bottom: -100px;
}
.downduct{
width: 62px;
height: 320px;
background: url("./img/pipe_down.png") no-repeat;
position: absolute;
/*图片有320高 320 - top 就是露出来的高度*/
top: -200px;
}
#gameover{
width: 204px;
height: 54px;
background: url("./img/text_game_over.png");
position: absolute;
top: 100px;
left: 50%;
transform: translate3d(-50%,0,0);
display: none;
z-index: 5;
}
#again{
width: 80px;
height: 28px;
background: url("./img/button_ok.png");
position: absolute;
top: 180px;
left: 50%;
transform: translate3d(-50%,0,0);
display: none;
z-index: 5;
}
</style>
</head>
<body>
<div id="wrap">
<div id="beginScore"></div>
<div id="title">
<img src="./img/title.png"><div id="beginBird"></div>
</div>
<div id="beginBtn"></div>
<div id="banner"></div>
<div id="bird"></div>
<div id="gameover"></div>
<div id="again"></div>
</div>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
var beginBtn = document.getElementById('beginBtn');
var beginScore = document.getElementById('beginScore');
var title = document.getElementById('title');
var bird = document.getElementById('bird');
var gameoverimg = document.getElementById('gameover');
var okbutton = document.getElementById('again');
var y = 2;
gameBegin();
tapWrap();
function gameBegin() {
beginBtn.onclick = function () {
beginScore.style.display = "none";
title.style.display = "none";
this.style.display = "none";
bird.style.display = "block";
birdMove(bird);
creatDuct();
}
}
function birdMove(bird) {
var offTop = bird.offsetTop;
var timer = setInterval(function () {
offTop += y;
y+=0.5;
if (y > 6) {
y = 6;
}
if (y < 0) {
bird.className = "birdup";
}
else{
bird.className = "birddown";
}
// 判断 小鸟是否落地
if (offTop >= 512-25-90 ) {
offTop = 512-25-90;
clearInterval(timer);
gameover();
}
bird.style.top = offTop +'px';
},30)
}
function tapWrap() {
wrap.onclick = function () {
y =-7;
}
}
//获得随机的 值
function random(min,max) {
return parseInt(Math.random() * (max - min)+ (min + 1));
}
function creatDuct() {
//每隔 创建一组管道
var timer = setInterval(function () {
//
var duct = document.createElement("div");
duct.className = "duct";
wrap.appendChild(duct);
var upduct = document.createElement("div");//添加向上开口的水管
upduct.className = "upduct";
upduct.style.bottom = random(-260,-60) + "px";//设置bottom 设置随机范围是-260 到 -60
duct.appendChild(upduct);
var downduct = document.createElement("div");//添加向下开口的水管
downduct.className = "downduct";
var upductBot = getComputedStyle(upduct).bottom; //获取bottom的值
upductBot = Number(upductBot.replace('px','')); // 转换为数字
downduct.style.top = -318 - upductBot + "px"; // 根据bottom设置top
duct.appendChild(downduct);
ductMove(duct,upduct,downduct,timer);
},2000);
}
function ductMove(duct,upduct,downduct,timer) {
var birdLeft = bird.offsetLeft; //30
var birdRight = bird.offsetLeft + bird.offsetWidth; //30+48
// var birdTop = bird.offsetTop; // x
// var birdBottom = bird.offsetTop + bird.offsetHeight; //x +48
// console.log(birdLeft,birdRight,birdTop,birdBottom);
// var ductTop = downduct.offsetTop + downduct.offsetHeight;
// var ductBottom = upduct.offsetTop;
var offLeft = duct.offsetLeft;
var timer2 = setInterval(function () {
offLeft -= 1;
duct.style.left = offLeft + "px";
//移除 水管
if (duct.offsetLeft + duct.offsetWidth <=0) {
duct.remove();
}
// alert(bird.offsetTop);
if (duct.offsetLeft < birdRight && (duct.offsetLeft + duct.offsetWidth) > birdLeft) {
if ( bird.offsetTop < (downduct.offsetTop + downduct.offse
原生js 写的flappy brid 飞翔的小鸟
需积分: 49 196 浏览量
2018-05-10
10:02:51
上传
评论
收藏 54KB RAR 举报
FlappyBrid.rar （24个子文件） 
FlappyBrid 
index.html 9KB img 
4.png 533B 3.png 432B button_ok.png 748B text_ready.png 5KB button_play.png 1KB bird2_2.png 371B text_game_over.png 4KB 7.png 501B 5.png 432B bird2_1.png 371B 1.png 453B 2.png 432B pipe_down.png 22KB pipe_up.png 22KB 6.png 443B 8.png 453B 0.png 508B 9.png 443B bg_day.png 24KB land.png 3KB bg_night.png 10KB bird2_0.png 365B title.png 3KB js css 资源评论
