Es el momento de darle a nuestro pequeño juego un propósito. Dejemos caer una pizca de estrellas en la escena y permitamos que el personaje las recoja. Para lograr esto crearemos un nuevo grupo llamado 'stars' (estrellas). En nuestra función create, añadimos el siguiente código (esto se puede ver en el archivo 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));

});

El proceso es similar a cuando creamos el grupo de plataformas. Como necesitamos que las estrellas se muevan y reboten, creamos un grupo de física dinámica en lugar de uno estático.

A un grupo se le puede pasar un objeto json de configuración en el momento de su creación. En este caso, el objeto json tiene 3 partes: Primero, establece que la clave de textura sea la imagen de la estrella. Esto significa que a todos los elementos del grupo se les dará la textura de estrella por defecto. Luego establece que el valor de repetición sea 11. Debido a que se crea un elemento automáticamente, al repetir 11 veces obtendremos 12 en total, que es justo lo que necesitamos para nuestro juego.

La parte final es setXY - esto se usa para establecer la posición de los 12 elementos que forman el grupo. Cada estrella se colocará a partir de x: 12, y: 0 y se usará un incremento en x de 70. Esto significa que el primer elemento se colocará a 12 x 0, el segundo a 70 píxeles desde este a 82 x 0, el tercero se posicionará en 152 x 0, y así sucesivamente. Los valores de 'step' son una manera realmente útil de separar los elementos de un grupo durante su creación. Se elige el valor de 70 para que las 12 estrellas estén perfectamente repartidas en la pantalla.

El siguiente fragmento de código recorre todos los elementos del grupo y le da a cada uno un valor de rebote de Y aleatorio entre 0,4 y 0,8. El rango de rebote está entre 0, sin rebote, y 1, rebote completo. Debido a que todas las estrellas tienen su coordenada Y en 0, la gravedad las tirará hacia abajo hasta que colisionen con las plataformas o el suelo. El valor de rebote hace que reboten aleatoriamente hasta que finalmente se paren.

Si se ejecuta el código tal y como está ahora, las estrellas caerían al final del juego y se perderían de vista. Para evitarlo, hay que habilitar que colisionen con las plataformas. Podemos usar otro Collider para hacer esto:

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

Además hay que comprobar si el personaje se superpone con alguna estrella:

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

Esto le indica a Phaser que monitorice si hay una superposición entre el personaje y cualquier estrella en el grupo de estrellas. Si tienen contacto, se ejecuta la función 'collectStar' pasándole los dos objetos implicados:

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

Ahora simplemente se desactiva el cuerpo físico de la estrella y con esto se vuelve inactiva e invisible, lo que la elimina de la pantalla. Ejecutar ahora el juego nos da un personaje que puede correr, saltar, rebotar en las plataformas y recoger las estrellas que caen. No está mal para unas pocas líneas de código, en su mayoría, bastante legibles :)