详解用65行javascript代码做Flappy Bird

点击查看特效

JavaScript做Flappy Bird游戏，代码仅仅65行

资源包括：

1. javascript源码：phaser.min.js；main.js；index.html

2. 素材：两张图片！

素材

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，每天都会精挑细选一个特效，项目出来详细讲解，分享！包括答疑解惑！