The score

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

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

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.

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.

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:

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.

• « Anterior (en-US)
• Siguiente » (en-US)