- 满天都是小星星
是时候给游戏增加一点趣味了。我们给游戏场景撒下满地星星,让玩家来收集它们。我们创建一个新的组,取名为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); } |
在这里我们只简单的把被碰到的物体设置为不活动、隐形状态,就好像它消失了一样。运行一下游戏吧,角色可以跑动、弹跳、捕获星星。感觉如何?这几行代码的可读性还相当高吧!