點擊查看特效

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

資源包括：

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

素材：兩張圖片！

素材

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

第一步：場景的建立

index.html中代碼：

index.html

加載兩個javascript文件。

main.js中，先創建一個空的場景；

main.js

第二步：鳥的制作與移動；

我們首先在場景中添加一只鳥，當我們按空格鍵時或者點擊鼠標左鍵會跳動。

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

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

第三步：測試；

搭建本地服務器進行測試，

第五步：制作管道；

首先，我們在preload()函數中加載管道精靈。

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

由于我們將在游戲中處理很多管道，所以使用稱為“組”的Phaser功能更為容易。該小組將簡單地包含我們所有的管道。要創建組，我們在create()函數中添加它。

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

現在我們需要一個新的功能來在游戲中添加一個管道。我們可以用新功能來做到這一點。

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

javascript代碼測試之后：

第六步：得分和碰撞

最后一件事是添加分數和處理碰撞。

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

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

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

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

接下來，我們在update()函數中添加這一行，以便在restartGame()每次鳥類與pipes
組中的管道相撞時進行調用。

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

最后：恭喜你完成游戲！

如果想要更多的企業求職加分項目，案例，學習方法可以來一下我的前端群570946165，每天都會精挑細選一個特效，項目出來詳細講解，分享！包括答疑解惑！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。