<!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 offLeft = duct.offsetLeft;
var timer2 = setInterval(function () {
offLeft -= 1;
duct.style.left = offLeft + "px";
//移除 水管
if (duct.offsetLeft + duct.offsetWidth <=0) {
duct.remove();
}
if (duct.offsetLeft < birdRight && (duct.offsetLeft + duct.offsetWidth) > birdLeft) {
if ( bird.offsetTop < (downduct.offsetTop + downduct.offsetHeight) || bird.offsetTop + bird.offsetHeight > upduct.offsetTop) {
gameover(timer,timer2);
alert("你挂了");
}
}
duct.move =timer2;
//(duct.offsetLeft < birdRight && (duct.offsetLeft + duct.offsetWidth) > birdLeft && bird.offsetTop > (downduct.offsetTop + downduct.offsetHeight) && bird.offsetTop + bird.offsetHeight < upduct.offsetTop)
},13);
}
function gameover(timer,timer2) {
gameoverimg.style.display = "block";
okbutton.style.display = "block";
again();
clearInterval(timer2);
clearInterval(timer);
}
function again() {
okbutton.onclick = function () {
window.location.reload();
}
}
</script>
</body>
</html>
学着做的第一个小游戏 flappyBrid 飞翔的小鸟 有图片资源
猜你喜欢
转载自blog.csdn.net/q970654226/article/details/80263103
今日推荐
周排行