前言:
《flappy bird》是一款由來自越南的獨立游戲開發者Dong Nguyen所開發的作品,游戲於2013年5月24日上線,並在2014年2月突然暴紅。2014年2月,《Flappy Bird》被開發者本人從蘋果及谷歌應用商店撤下。2014年8月份正式回歸APP STORE,正式加入Flappy迷們期待已久的多人對戰模式。游戲中玩家必須控制一只小鳥,跨越由各種不同長度水管所組成的障礙。
正文:
接下來就是一步一步來實現它
步驟1:頁面布局,這兒就不多說了,頁面內容如下:
步驟2:如何讓小鳥下落以及讓小鳥跳起來
鳥下降:
給小鳥一個speed,初始值為0,通過計時器讓speed每隔30ms加1,當speed超出最大值speedMax,即speed>8時,讓速度保持最大值。
//獲取鳥div var 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'; //將創建的管道放入外層div conduit_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'; //加分開關,每通過一個管道分數才能加1 conduitItem.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時,即小鳥成功通過管道之後,分數加1 if(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); } }
這樣游戲大致已經做好啦。
效果圖如下:
下面附上源碼下載地址,請在谷歌浏覽器上進行試驗。
源碼下載地址
以上所述是小編給大家介紹的純JavaScript 實現flappy bird小游戲實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!