网页JavaScript特效之flappy bird（像素鸟）

来源：互联网发布：结婚纪念日礼物知乎编辑：程序博客网时间：2024/06/05 08:04
今天用JavaScript做了一个小小的像素鸟，256行代码实现flappybird，虽然有很多bug，废话不多说，上源码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style type="text/css">*{padding: 0;margin: 0;}.main{border: solid 1px black;width: 600px;height: 512px;background: url(img/bg_day.png) 10px 0px;margin: 20px auto;position: relative;overflow: hidden;}.bird{width:37px;height: 27px;background: url(img/bird0_0.png) no-repeat center;position: absolute;left: 20px;top: 200px;display: none;}.gameover{width: 204px;height: 54px;background: url(img/text_game_over.png);margin: auto;left: 0;top: 0;right: 0;bottom: 0;position: absolute;display: none;}.title{width: 178px;height: 48px;background:url(img/title.png) ;margin: auto;left: 0;top: 0;right: 0;bottom: 0;position: absolute;}.bluebird{display: block;margin: 100px auto;}.start{display: block;position: absolute;left: 240px;top: 300px;cursor: pointer;}</style><body><div class="main"><div class="bird" src="img/bird0_0.png"></div><div class="gameover"></div><div class="title"></div><img class="bluebird" src="img/bird1_0.png"/><img class="start" src="img/button_play.png" /></div></body><script type="text/javascript" src="js/jquery-2.0.3.js" ></script><script type="text/javascript">var flynum = 0;var bluebird = $(".bluebird");var gamerunning = false;//蓝色小鸟翅膀运动var bluebirdfly = setInterval(function(){flynum++;bluebird.attr("src","img/bird1_"+flynum+".png");if(flynum==2)flynum=-1;},100);//bluebird.animate({marginTop: 130},500,function(){//bluebird.animate({marginTop:70},1000,function(){//bluebird.animate({marginTop:130},1000,function(){//bluebird.animate({marginTop:70},1000,function(){////});//});//});//});//可用递归解决//小鸟上下跳动var sign = 1;jump();function jump(){if(!gamerunning){bluebird.animate({marginTop: 100+30*sign},1000,jump);    sign*=-1;}//当点击页面任意一点时,开始游戏//document.onclick= function(){//clearInterval(bluebirdfly);////gamestart();//clearInterval(this);//jump().remove();//}}$(".start").click(function(){gamerunning = true;bluebird.remove();$(".title").remove();$(".start").remove();gamestart();});function gamestart(){$(".bird").show();var pipes = []   //用来保存所有的管道var score = 0;//关于背景的运动var count = 0;var movebg = setInterval(function(){count-=2;var bg = $(".main");bg.css("background","url(img/bg_day.png)"+count+"px");},200);//关于小鸟翅膀的运动var num = 0;var birdfly = setInterval(function(){num++;var bird = $(".bird");bird.css("background","img/bird0_"+num+".png");if(num == 2)num=-1;},200);//小鸟的自由落体var speedy = 0;var birddown = setInterval(function(){var bird = $(".bird");bird.css("top",bird.position().top+ ++speedy +"px");//判断小鸟是否跟数组里的所有管道碰撞for(var i = 0;i<pipes.length;i++){var leftSide = pipes[i].position().left-bird.width();//左边界var rightSide = pipes[i].position().left+pipes[i].width();//右边界//小鸟碰撞的左右边界var topSide = pipes[i].position().top - bird.height();var downSide = pipes[i].position().top + pipes[i].height();//小鸟碰撞的上下边界//以上为小鸟的碰撞范围，若小鸟出现在碰撞范围之内，则碰撞发生//if（鸟left》左边界且《右边界同时鸟top》上边界且《下边界）if(bird.position().left>leftSide && bird.position().left<rightSide && bird.position().top>topSide && bird.position().top<downSide){alert("分数为"+score);clearInterval(birdfly);clearInterval(movebg);clearInterval(autopipes);clearInterval(birddown);//关掉所有定时器for(var k = 0;k<pipes.length;k++){pipes[k].stop();}$(".gameover").show();break;}else{score++;}}},60);//小鸟的跳跃$(document).keydown(function(e){if(e.keyCode==32){//如果按下了空格键speedy-=20;}});var autopipes = setInterval(function(){var pipeUp = $("<img>");pipeUp.attr("src","img/pipe_up.png");pipeUp.css({position : "absolute",left : 600,    bottom : -Math.round(Math.random()*150+100)})var pipeDown = $("<img>");pipeDown.attr("src","img/pipe_down.png");pipeDown.css({position:"absolute",left :600,top: -Math.round(Math.random()*150+100)})//把两根管道加入到游戏中$(".main").append(pipeUp);$(".main").append(pipeDown);pipes.push(pipeUp);pipes.push(pipeDown);//共600px+52px（管道）宽度 652*30,开口向上的管道运动pipeUp.animate({left:-52}, 9780, "linear",function(){pipeUp.remove();pipes.shift();//删除数组的第一个元素});//开口向下的管道运动pipeDown.animate({left: -52}, 9780,"linear",function(){pipeDown.remove();pipes.shift();//删除数组的第一个元素});},3000);}</script></html>
相当于一个粗糙的模子，细节等待打磨，下面是效果：
阅读全文
1 0