Cómo crear tu primer juego con Phaser

Hay dos toques finales que vamos a añadir a nuestro juego: un enemigo para complicar el juego y una puntuación cuando se recojan las estrellas. Primero, la puntuación.

Para ello usaremos un objeto Phaser de tipo texto. Aquí creamos dos nuevas variables, una para la puntuación real y otra para el propio objeto:

var score = 0;
var scoreText;

La variable scoreText se configura en la función create:

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

16 x 16 son las coordenadas donde se verá el texto. 'score: 0' es la cadena predeterminada a mostrar y el objeto json que sigue indica el tamaño de fuente y un color de relleno. Al no especificar una fuente, Phaser usará, por defecto, Courier.

Ahora necesitamos modificar la función collectStar para que cuando el personaje coja una estrella su puntuación aumente y el texto se actualice:

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

    score += 10;
    scoreText.setText('Score: ' + score);
}

Se suman 10 puntos por cada estrella y se actualiza la variable scoreText para mostrar este nuevo total. Si ejecuta el archivo part9.html verá caer las estrellas y la puntuación aumentará a medida que las recoja.

En la parte final vamos a añadir algunos enemigos.