java script css_java script 实现像素小鸟

用java script 实现像素小鸟

flybird

1

2

/*背景画布*/

*{

cursor:pointer;

}

.canvas {

position: relative;

width: 343px;

height: 480px;

margin: auto;

overflow: hidden;

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

}

/*游戏开始*/

.game_start {

display: block;

}

.head {

position: absolute;

top: 100px;

left: 60px;

animation: birdmove 2s infinite;

}

.head .small_bird {

display: inline-block;

width: 40px;

height: 30px;

position: absolute;

right: 0px;

top: 20px;

animation: birdbg 0.5s infinite;

}

/*btns 按钮组*/

.btns {

width: 100%;

text-align: center;

position: absolute;

top: 250px;

}

.btns .start_btn {

width: 85px;

height: 29px;

display: inline-block;

background: url(../images/start.jpg) no-repeat;

margin-left: 10px;

}

.btns .submit_btn {

width: 85px;

height: 29px;

display: inline-block;

background: url(../images/submit.jpg) no-repeat;

margin-left: 10px;

}

/*移动条*/

.slider {

width: 686px;

height: auto;

font-size: 0px;

position: absolute;

left: 0;

top: 423px;

animation: slidermove 5s infinite linear;

}

.slider img {

display: inline-block;

}

/*鸟*/

.bird {

position: absolute;

top: 250px;

left: 50px;

width: 50px;

height: 50px;

display: none;

}

/*管道*/

.conduitItem{

width: 62px;

height: 423px;

/*background: red;*/

/*opacity: 0.7;*/

position: absolute;

top: 0;

/*right: -100px;*/

}

.top_conduit{

position: absolute;

width: 100%;

top: 0;

background: url(../images/up_mod.png) ;

}

.top_conduit div{

background: url(../images/up_pipe.png) 0 bottom no-repeat;

}

.bottom_conduit{

position: absolute;

width: 100%;

bottom: 0;

background: url(../images/down_mod.png);

}

.bottom_conduit div{

background: url(../images/down_pipe.png) 0 top no-repeat;

}

/*游戏结束*/

.gameover {

display: none;

}

.gameover .overimg {

position: absolute;

left: 60px;

top: 100px;

animation: overmove 1s 1;

}

.gameover .overmessage {

background: url(../images/message.jpg) no-repeat;

width: 269px;

height: 135px;

position: absolute;

bottom: 200px;

left: 40px;

animation: messagemove 1s 1;

}

.gameover .overmessage .thisscore {

position: absolute;

right: 30px;

top: 35px;

font-size: 2.5em;

color: black;

}

.gameover .overmessage .historyscore {

position: absolute;

right: 30px;

top: 85px;

font-size: 2em;

color: red;

}

.gameover .game_restart {

position: absolute;

left: 120px;

top: 300px;

animation: okmove 1s 1;

}

/*积分*/

.scroing {

position: absolute;

text-align: center;

width: 100%;

top: 40px;

}

/*动画*/

@keyframes birdmove {

0% {

top: 100px;

}

50% {

top: 130px;

}

100% {

top: 100px;

}

}

@keyframes birdbg {

0% {

background: url(../images/bird0.png) no-repeat;

}

100% {

background: url(../images/bird1.png) no-repeat;

}

}

@keyframes slidermove {

0% {

left: 0

}

100% {

left: -343px;

}

}

/*gameover*/

@keyframes overmove {

0% {

top: 0;

}

100% {

top: 110px;

}

}

/*message*/

@keyframes messagemove {

0% {

bottom: 0px;

}

100% {

bottom: 210px;

}

}

/*ok*/

@keyframes okmove {

0% {

left: 0px;

}

100% {

left: 130px;

}

}

重点的来了

//获取

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

var bird_ = document.querySelector('.bird img');

var game_start = document.querySelector('.game_start');

var game_restart = document.querySelector('.game_restart');

var gameover_ = document.querySelector('.gameover');

var thisscore = document.querySelector('.thisscore');

var historyscore_ = document.querySelector('.historyscore');

var speed = 0,

speedmax = 8;

var score = 0;

var downtimer = null; //向上定时器

var uptimer = null; //向下定时器

var conduittimer = null //管道时间

var floortesttimer = null;

var crashtesttimer = null;

var isgame = true;

//鸟向下移动

function down() {

speed += 1;

if(speed >= speedmax) {

speed = speedmax;

}

bird_.src = 'images/down_bird1.png';

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

floortest();

}

//小鸟上升

function up() {

speed -= 1;

if(speed <= 0) {

speed = 0;

clearInterval(uptimer);

downtimer = setInterval(down, 30);

}

bird_.src = 'images/up_bird1.png';

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

}

//鸟跳动的函数

function birdjump() {

speed = speedmax;

if(isgame) {

clearInterval(uptimer);

clearInterval(downtimer); //先清除向下降落的定时器

uptimer = setInterval(up, 30)

}

}

//触底碰撞检测

function floortest() {

var t1 = bird.offsetTop;

//console.log(t1);

var b1 = t1 + bird.offsetHeight;

if(t1 >= 396) {

//游戏结束

gameover();

}

}

//碰撞检测

function crashtest(obj, objpar) {

//鸟

var l1 = bird.offsetLeft;

var r1 = l1 + bird.offsetWidth;

var t1 = bird.offsetTop;

var b1 = t1 + bird.offsetHeight;

//管道

var l2 = objpar.offsetLeft;

var r2 = l2 + obj.offsetWidth;

var t2 = obj.offsetTop;

var b2 = t2 + obj.offsetHeight;

if(r1 > l2 && l1 < r2 && b1 > t2 && t1 < b2) {

gameover();

}

}

//清除所有定时器

function cleartimer() {

var timer = setInterval(function() {}, 30);

for(var i = 0; i < timer; i++) {

clearInterval(i);

}

}

//游戏结束

function gameover() {

isgame = false;

clearInterval(conduittimer);

clearInterval(downtimer);

clearInterval(crashtesttimer);

cleartimer();

bird.style.webkitTransition = "all 0.5s linear";

bird.style.top = '397px';

bird_.src = 'images/down_bird1.png';

//document.removeEventListener('click', birdjump, false);

document.querySelector('.gameover').style.display = 'block';

var historyscore=localStorage.getItem('maxscore');

if(historyscore==null||historyscore

localStorage.setItem('maxscore',score);

historyscore=score;

}

historyscore_.innerHTML=historyscore;

}

game_restart.onclick = function() {

canvas.innerHTML = history.go('0');

}

//随机函数

function rand(min, max) {

return parseInt(Math.random() * (max - min)) + min;

}

var canvas = document.querySelector('.canvas');

function scorefn(score) {

var scorethis = score.toString();

//scorethis=scorethis.split('');

var scorediv = document.querySelector('#scroing');

scorediv.innerHTML = '';

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

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

img.src = 'images/' + scorethis[i] + '.jpg';

scorediv.appendChild(img);

}

//function teo(){

//var scorethis=score.toString();

//scorethis=scorethis.split();

//var scorediv=document.querySelector('#scroing');

//var contentimg

//}

//var scoreimg=document.querySelector('#scroing img');

}

//创建管道

function createconduit() {

var conduitgroup = document.querySelector('.conduti_group');

var conduitItem = document.createElement('div');

conduitItem.className = 'conduitItem';

conduitgroup.appendChild(conduitItem);

var topheight = rand(60, 213);

var bottomheight = 273 - topheight;

conduitItem.innerHTML = "

" +

"

"

" +

"

" +

"

"

";

var maxwidth = canvas.offsetWidth;

conduitItem.style.left = maxwidth + 'px';

conduitItem.toscore = true;

conduitItem.movetimer = setInterval(function() {

maxwidth -= 3;

conduitItem.style.left = maxwidth + 'px';

if(maxwidth <= -70) {

clearInterval(conduitItem.movetimer);

conduitgroup.removeChild(conduitItem);

}

//计算积分

if(maxwidth <= 50 && conduitItem.toscore) {

score++;

scorefn(score);

thisscore.innerHTML = score;

conduitItem.toscore = false;

}

}, 30)

}

//游戏初始化

function init() {

var start_btn = document.querySelector('.start_btn');

var game_start = document.querySelector('.game_start');

//添加点击事件 开始按钮

start_btn.onclick = function() {

game_start.style.display = 'none';

bird.style.display = 'block'

//创建管道

conduittimer = setInterval(createconduit, 2000);

//碰撞检测

crashtesttimer = setInterval(function() {

var conduitItem = document.querySelector('.conduti_group').querySelectorAll('.conduitItem');

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

var top_conduit = conduitItem[i].querySelector('.top_conduit');

var bottom_conduit = conduitItem[i].querySelector('.bottom_conduit');

crashtest(bottom_conduit, conduitItem[i]);

crashtest(top_conduit, conduitItem[i]);

}

}, 1000 / 60)

//鸟 降落

downtimer = setInterval(down, 30);

document.addEventListener('click', birdjump, false);

}

}

init();