Este es el paso 11º de 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente tal y como quedaría al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson11.html.

Tener puntuación puede hacer el juego más interesante — puedes intentar batir tu mejor puntuación, a la de tus amigos. En este artículo añadiremos un sistema de puntuación al juego.

Usaremos una variable separada para almacenar la puntuación y el método  text() de Phaser para mostrarla en la pantalla.

Nuevas variables

Añade dos nuevas variables justo después de la definición de las anteriores:

// ...
var scoreText;
var score = 0;

Añadir el texto de puntuación a la pantalla del juego

Ahora añade esta línea al final de la función create():

scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });

El método text() puede tomar cuatro parámetros:

  • Las coordenadas x e y dónde escribir el texto.
  • El texto que se mostrará.
  • El estilo de la fuente con la que se representará el texto.

El último parámetro se parece mucho a los estilos de CSS. En nuestro caso, el texto de la puntuación será azul, con un tamaño de 18 pixeles y usará como estilo de fuente Arial.

Actualizar el juego cuando los ladrillos se han destruido

Incrementaremos el número de puntos cada vez que la pelota golpee en un ladrillo y actualizaremos el scoreText para mostrar la puntuación actual. Esto, lo podremos hacer usando el método setText()  — añade las dos siguientes líneas a la función ballHitBrick():

function ballHitBrick(ball, brick) {
    brick.kill();
    score += 10;
    scoreText.setText('Points: '+score);
}

Eso es todo por ahora — recarga tu index.html y comprueba que la puntuación se actualiza por cada golpe al ladrillo.

Compare su código

Puede comprobar el código terminado de esta lección en la demo que aparece a continuación, y jugar para entender mejor cómo funciona el juego:

Próximos pasos

Ya tenemos un sistema de puntuación, pero para qué sirve jugar y mantener la puntuación si no se puede ganar.  Veremos cómo podemos añadir la victoria, permitiendonos así ganar el juego.

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, mikelmg, WilsonIsAliveClone, serarroy
Última actualización por: mdnwebdocs-bot,