這一篇主要介紹一下我做的一個(gè)flappy bird。由于是自己js手寫的，效率肯定不高，就當(dāng)拿來(lái)玩的罷。瀏覽器不好回很卡哦。

最近嚴(yán)重加班，非常嚴(yán)重··· 

萬(wàn)惡的discuz啊，還有萬(wàn)惡的環(huán)境問(wèn)題，死了算了。

這個(gè)應(yīng)該是這個(gè)系列最后一篇啦，之后我會(huì)做另一個(gè)想法。主要是用來(lái)查看文章的一個(gè)主頁(yè)，期間發(fā)些自己覺(jué)得好玩的東西出來(lái)。

這一篇主要介紹一下我做的一個(gè)flappy bird。由于是自己js手寫的，效率肯定不高，就當(dāng)拿來(lái)玩的罷。瀏覽器不好回很卡哦。

效果演示在這里：

flappy bird

首先閉一個(gè)包，在里面寫個(gè)向外接口：

.....

然后分步驟去實(shí)現(xiàn)這個(gè)東西。

第一步，是解決自由落體，這個(gè)我們借用一下google在某年牛頓誕辰在主頁(yè)上放的一個(gè)蘋果自由落體的源碼。去掉水平移動(dòng)，

.....

把這個(gè)過(guò)程附在鍵盤事件上就ok了。像這樣：

.....

然后是柱子的移動(dòng)和增加，移動(dòng)整個(gè)是ul標(biāo)簽的移動(dòng)，這個(gè)移動(dòng)的時(shí)候會(huì)隨著距離增加柱子，整個(gè)過(guò)程差不多就是這樣。

首先是移動(dòng)柱子：

.....

 當(dāng)條件滿足的時(shí)候，就增加柱子，增加柱子就是寫進(jìn)去一些html代碼即可：

.....

 之后是最后一步，驗(yàn)證碰撞，這個(gè)就是獲取小鳥(niǎo)的top坐標(biāo)，加上他本身的體積與柱子比較的過(guò)程。

.....

 這樣其實(shí)大體的功能就實(shí)現(xiàn)了，之后就是增加個(gè)endgame呀，resetgame呀方法，讓它可以重復(fù)玩，就ok啦。

主要的思路就是拆分拆分再拆分，寫出n個(gè)方法來(lái)在組裝成一個(gè)，這樣既可以復(fù)用，思路也會(huì)很明確。

可能效率不是很好，畢竟自己只是想實(shí)現(xiàn)效果，好吧，本來(lái)對(duì)小效率這東西，研究的就不多，希望以后能夠不斷充實(shí)。哈哈。

原文來(lái)自：做一個(gè)略調(diào)皮的個(gè)人主頁(yè)--游戲篇