Phaser3入门教程：第一个Phaser3游戏（中文版）（八）

•  满天都是小星星

 

是时候给游戏增加一点趣味了。我们给游戏场景撒下满地星星，让玩家来收集它们。我们创建一个新的组，取名为stars来实现。在我们的create函数中增加下面的代码（参看part8.html）：

stars = this.physics.add.group({     key: 'star',     repeat: 11,     setXY: { x: 12, y: 0, stepX: 70 } });   stars.children.iterate(function (child) {       child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));   });

这个过程和创建平台组的方法相似，我们需要一些会移动和弹跳的星星。这次我们创建一个动体组而不是静物组。

组在创建时可以预先设置好配置内容。例子中我们有三个配置项：第一个是指向星星图片的字符串关键字。这样所有创建的组内子元素都会使用默认的星星图片。接着一个是一个重复值11。因为自动创建一个子元素，再重复11次，这样游戏中就一共有了12个元素。

后面一句的setXY，这是定位组中每个子元素生成的位置。第一个子元素定位在(12,0)，后面的每个在x方向上间隔70。分别是(12,0)、(82,0)、(152,0)…… 于是星星就均匀分布在屏幕空间中了。最后的代码段也是重复给每个子元素设置弹性值，弹性值在是在Y方向，范围从0.4到0.8 。值0表示没有弹性，值1表示全部弹力。星星会在重力作用下落到地面或平台，然后被弹起，再落下，最终停在地面或平台。

现在我们看一下游戏效果，星星会一直下落到屏幕底部。要避免这样的状况，我们要对星星和平台进行碰撞检测。我们又添加了一条碰撞器代码：

this.physics.add.collider(stars, platforms);

最好我们还要检测一下角色撞到星星的情况：

this.physics.add.overlap(player, stars, collectStar, null, this);

这将让Phaser检测角色是否触碰到星星，如果有，就会调用collectStar函数：

function collectStar (player, star) {     star.disableBody(true, true); }

在这里我们只简单的把被碰到的物体设置为不活动、隐形状态，就好像它消失了一样。运行一下游戏吧，角色可以跑动、弹跳、捕获星星。感觉如何？这几行代码的可读性还相当高吧！