Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.

View in English Always switch to English

The score

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:

js
// ...
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():

js
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():

js
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.