Poner un contador y terminar ganando

Este es el octavo capítulo de 10, del Gamedev Canvas tutorial. Puedes encontrar el código fuente como debería quedar tras este capítulo en Gamedev-Canvas-workshop/lesson8.html.

Destruir los ladrillos mola, pero para que el juego sea aún mejor, podría dar puntos cada vez que el jugador rompe un ladrillo, y mostrar un contador.

El contador

Si puedes ver el contador mientras juegas, puede que consigas impresionar a tus amigos. Necesitas una variable para guardar el contador. Añade esto a tu JavaScript, después de las otras definiciones de variables:

var score = 0;

También necesitas una función drawScore() para enseñar el contador por pantalla. Añade esto después de la función collisionDetection():

function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}

Dibujar texto en el <canvas> es similar a dibujar un círculo o cualquier otra figura. La definición del tipo de letra (fuente) se hace igual que en CSS, puedes fijar el tamaño y fuente con el método font() method. Despúes utilizas fillStyle() para fijar el color y fillText() para escribir el texto y el lugar en el que se va a dibujar. El primer parámetro es el texto en si y los otros dos son las coordenadas.

Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que está marcada aquí debajo:

function collisionDetection() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                }
            }
        }
    }
}

Llamando a drawScore() (dibujar contador) desde la función draw() hace que se muestre el contador actualizado en la pantalla. Añade la línea siguiente en draw(), justo debajo de la llamada a drawPaddle():

drawScore();

Mostrar un mensaje de victoria cuando se hayan destruido todos los ladrillos

Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no queden ladrillos? Precisamente ese es el principal objetivo del juego, tendrás que dibujar un mensaje de victoria. Añade las líneas marcadas a tu función collisionDetection():

function collisionDetection() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if(score == brickRowCount*brickColumnCount) {
                        alert("YOU WIN, CONGRATULATIONS!");
                        document.location.reload();
                    }
                }
            }
        }
    }
}

Gracias a esto, los jugadores pueden ganar cuando rompen todos los ladrillos, que es muy importante. La función document.location.reload() vuelve a cargar la página y el juego empieza de nuevo, una vez se hace clic sobre el botón del alert().

Compara tu código

Puedes comparar tu código con este:

Ejercicio: añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.

Pasos siguientes

El juego, ahora mismo, ya tiene buena pinta. En la siguiente lección conseguirás que sea más atractivo porque añadirás el Control del ratón.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: profesooooor
 Última actualización por: profesooooor,