純JavaScript 實現flappy bird小遊戲執行個體代碼，flappybird

純JavaScript 實現flappy bird小遊戲執行個體代碼，flappybird

前言：

《flappy bird》是一款由來自越南的獨立遊戲開發人員Dong Nguyen所開發的作品，遊戲於2013年5月24日上線，並在2014年2月突然暴紅。2014年2月，《Flappy Bird》被開發人員本人從蘋果及Google市集撤下。2014年8月份正式迴歸APP STORE，正式加入Flappy迷們期待已久的多人對戰模式。遊戲中玩家必須控制一隻小鳥，跨越由各種不同長度水管所組成的障礙。
本文：

接下來就是一步一步來實現它

步驟1：頁面配置，這兒就不多說了，頁面內容如下:

步驟2：如何讓小鳥下落以及讓小鳥跳起來

鳥下降：

給小鳥一個speed,初始值為0，通過計時器讓speed每隔30ms加1，當speed超出最大值speedMax，即speed>8時，讓速度保持最大值。

//擷取鳥divvar bird = document.getElementById("flybird");//鳥下降function down() {speed += 1;bird.id = 'flybird_down';up_bgm.pause();//關閉小鳥上升音樂；//當鳥下落速度達到最大值speedMax時，保持不變if(speed >= speedMax) {speed = speedMax;}bird.style.top = bird.offsetTop + speed + 'px';floorText(); //落地檢測}

鳥上升：

上升，即小鳥的top值減小的過程。讓speed減小即可。同時，在鳥上升時，關閉小鳥下降的計時器，以及上次起跳時的上升的計時器，並重新啟動上升計時器。在這兒，有個isGameOver,為遊戲開關，預設為ture,即當該值為false時，遊戲未開始，小鳥無法起跳。

//小鳥上升function up() {speed -= 0.8;bird.id = 'flybird_up'//該id下的樣式為小鳥下降的背景圖片，並增加動畫不斷替換小鳥的背景映像，讓小鳥翅膀動起來~up_bgm.play()if(speed <= 0) {speed = 0;clearInterval(upTimer);DownTimer = setInterval(down, 30);}bird.style.top = bird.offsetTop - speed + 'px';}//鳥跳動的方法；function birdJump() {speed = speedMax;if(isGameOver) {//每次向上跳時，先將向上、向下計時器清楚，防止疊加clearInterval(upTimer);clearInterval(DownTimer); //清除向下的定時器；upTimer = setInterval(up, 30);}}//判斷小鳥落地或者小鳥跳出上邊界，此時遊戲結束function floorText() {var t1 = bird.offsetTop;if(t1 > 396) {//遊戲結束；gameover();}if(t1 < 0) {gameover();}}

步驟3：通過以上步驟，小鳥可以起跳啦。接下來就是管道的建立。玩過flappybird遊戲的都知道，裡面的管道的高度是隨機的，但上下兩個管道之間的距離是固定的。用Math.random()來產生隨機數。

//隨機函數，用來隨機產生鋼管的高度function rand(min, max) {return parseInt(Math.random() * (max - min) + min);}//建立管道。在點擊開始按鈕後，通過計時器來建立function create_pipe() {var conduit_group = document.querySelector(".conduit_group");var conduitItem = document.createElement("div");//給建立的管道一個樣式conduitItem.className = 'conduitItem';//將建立的管道放入外層divconduit_group.appendChild(conduitItem);var topHeight = rand(60, 223);//管道裡面 上管道的高度值var bottomHeight = 373 - 100 - topHeight;//管道裡面 下管道的高度值//建立上下管道conduitItem.innerHTML = '<div class="top_conduit"><div style="height:' + topHeight + 'px"></div></div><div class="bottom_conduit"><div style="height:' + bottomHeight + 'px"></div></div>'//擷取最外層div的寬度，即為管道可以移動的最大值var maxWidth = canvas.offsetWidth;//讓管道剛開始在canvas外面，一開始看不到conduitItem.style.left = maxWidth + 'px';//加分開關，每通過一個管道分數才能加1conduitItem.AddToscore = true;//管道移動方法，通過計時器不斷使其的left值遞減來實現管道移動。conduitItem.movetimer = setInterval(function() {maxWidth -= 3;//每30ms向左移動3個像素conduitItem.style.left = maxWidth + 'px'//在管道跑出去之後，清除使該管道移動的計時器，並將其移除。if(maxWidth <= -70) {clearInterval(conduitItem.movetimer);conduit_group.removeChild(conduitItem);}//當管道的offsetLeft小於30時，即小鳥成功通過管道之後，分數加1if(conduitItem.offsetLeft <= 30 && conduitItem.AddToscore == true) {score++;conduitItem.AddToscore = false;scoreFn(score);}}, 30)}

步驟4：通過以上步驟，移動的管道建立好了，小鳥也可以跳了。接下來就是進行碰撞檢測，判斷小鳥是否碰到管道。

//鳥和管道碰撞檢測，obj1為小鳥，obj2為上下管道的父集//直接擷取上下管道，offsetLeft為0，因此要擷取其父集；function crashTest(obj1, obj2) {//小鳥的相關量var l1 = bird.offsetLeft;console.log(l1)var r1 = l1 + bird.offsetWidth;var t1 = bird.offsetTop;var b1 = t1 + bird.offsetHeight//管道的相關量var l2 = obj2.offsetLeft;var r2 = l2 + obj2.offsetWidth;var t2 = obj1.offsetTop;var b2 = t2 + obj1.offsetHeight;//判斷條件if(r1 > l2 && l1 < r2 && b1 > t2 && t1 < b2) {gameover();}}function judge() {//擷取創造的在當前頁面顯示的所有管道，為一個數組var conduitItem = document.querySelector('.conduit_group').querySelectorAll('.conduitItem');//遍曆顯示的管道，為crashTest方法傳遞參數來進行判斷。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(top_conduit, conduitItem[i]);crashTest(bottom_conduit, conduitItem[i]);}}

步驟5：遊戲結束方法。當碰到管道，碰到上邊界，落地，遊戲結束，顯示本局分數，並顯示曆史最高記錄。

//遊戲結束function gameover() {//遊戲結束背景音樂開啟gameover_bgm.play();isGameOver = false;//結束音樂bgm.pause();clearTimer();//小鳥換回原來的樣式bird.id = 'flybird'bird.className = 'birddown'bird.style.top = '392px';//儲存最高紀錄var historyscore = localStorage.getItem('maxScore');//當記錄不存在或者記錄小於目前記錄時，建立masScore.if(historyscore == null || historyscore < score) {localStorage.setItem('maxScore', score);//重新整理記錄historyscore = score;}//曆史最高紀錄historyScore.innerHTML = historyscore;//當前分數thisScore.innerHTML = score;//顯示遊戲結束畫面document.querySelector('.gameover').style.display = 'block';}

步驟7：遊戲開始方法。

//遊戲初始化function init() {//為start_btn，即頁面剛開始顯示的start建立點擊事件，即開始按鈕start_btn.onclick = function() {//點擊之後，開始介面隱藏gameStartDiv.style.display = 'none';//小鳥顯示出來bird.style.display = 'block';//使小鳥在中間顯示bird.style.top = '200px';bgm.play();//通過點擊，來調用birdJump方法，來使小鳥上升//開始創造管道conduitTimer = setInterval(create_pipe, 2000)document.addEventListener('click', birdJump, false)crashTestTimer = setInterval(judge, 1000 / 60);}}init();

步驟7：遊戲重新開始方法

//重新開始var game_restart = document.querySelector(".game_restart")game_restart.onclick = restart;var conduit_group = document.querySelector(".conduit_group")//回到剛開始的介面function restart() {bird.className = 'bird'clearTimer();scoreDiv.innerHTML = null;isGameOver = true;speed = 0;score=0;speedMax = 8;document.querySelector('.gameover').style.display = 'none';gameStartDiv.style.display = 'block';bird.style.display = 'none';conduit_group.innerHTML = '';}

這兒用到的clearTimer方法為清除所有記時器，代碼如下：

function clearTimer() {var timer = setInterval(function() {}, 30);for(i = 0; i < timer; i++) {clearInterval(i);}}

這樣遊戲大致已經做好啦。

如下：

下面附上源碼,請在Google瀏覽器上進行實驗。

源碼

以上所述是小編給大家介紹的純JavaScript 實現flappy bird小遊戲執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！