點(diǎn)擊查看特效

JavaScript做Flappy Bird游戲，代碼僅僅65行

資源包括：

javascript源碼：phaser.min.js；main.js；index.html

素材：兩張圖片！

素材

PS：素材源碼下載來(lái)我的前端群570946165，已上傳群文件！

第一步：場(chǎng)景的建立

index.html中代碼：

index.html

加載兩個(gè)javascript文件。

main.js中，先創(chuàng)建一個(gè)空的場(chǎng)景；

main.js

第二步：鳥的制作與移動(dòng)；

我們首先在場(chǎng)景中添加一只鳥，當(dāng)我們按空格鍵時(shí)或者點(diǎn)擊鼠標(biāo)左鍵會(huì)跳動(dòng)。

更新了preload()，create()和update()功能。

素材源碼下載來(lái)我的前端群570946165，已上傳群文件！

第三步：測(cè)試；

搭建本地服務(wù)器進(jìn)行測(cè)試，

第五步：制作管道；

首先，我們?cè)趐reload()函數(shù)中加載管道精靈。

game.load.image('pipe', 'assets/pipe.png');

由于我們將在游戲中處理很多管道，所以使用稱為“組”的Phaser功能更為容易。該小組將簡(jiǎn)單地包含我們所有的管道。要?jiǎng)?chuàng)建組，我們?cè)赾reate()函數(shù)中添加它。

// Create an empty groupthis.pipes = game.add.group();

現(xiàn)在我們需要一個(gè)新的功能來(lái)在游戲中添加一個(gè)管道。我們可以用新功能來(lái)做到這一點(diǎn)。

素材源碼下載來(lái)我的前端群570946165，已上傳群文件！

javascript代碼測(cè)試之后：

第六步：得分和碰撞

最后一件事是添加分?jǐn)?shù)和處理碰撞。

我們將其添加到create()功能中，以顯示左上角的得分。

this.score = 0;this.labelScore = game.add.text(20, 20, "0",

我們把它放在了addRowOfPipes()，每次創(chuàng)建新的管道時(shí)，增加1分。

this.score += 1;this.labelScore.text = this.score;

接下來(lái)，我們?cè)趗pdate()函數(shù)中添加這一行，以便在restartGame()每次鳥類與pipes
組中的管道相撞時(shí)進(jìn)行調(diào)用。

game.physics.arcade.overlap( this.bird, this.pipes, this.restartGame, null, this);

最后：恭喜你完成游戲！

如果想要更多的企業(yè)求職加分項(xiàng)目，案例，學(xué)習(xí)方法可以來(lái)一下我的前端群570946165，每天都會(huì)精挑細(xì)選一個(gè)特效，項(xiàng)目出來(lái)詳細(xì)講解，分享！包括答疑解惑！

總結(jié)

以上是生活随笔為你收集整理的详解用65行javascript代码做Flappy Bird的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。