網頁JavaScript特效之flappy bird（畫素鳥）
阿新 • • 發佈：2019-02-16
今天用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>
相當於一個粗糙的模子，細節等待打磨，下面是效果：
