Fin del juego

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Este es el 5º paso de 10 del Gamedev Canvas tutorial. Puedes ver como debería quedar el código fuente después de completar esta lección en Gamedev-Canvas-workshop/lesson5.html.

Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala alrededor, pero aparte de eso, el juego no hace nada y no tiene ninguna meta de progreso o final. Sería bueno desde el punto de vista del juego poder perder. La lógica detrás de perder en la partida es simple. Si te pierdes la pelota con la pala y dejas que alcance el borde inferior de la pantalla, entonces se acaba el juego.

Implementando el final del juego

Intentemos implementar el final del juego en nuestro juego. Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}

if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

En lugar de permitir que la pelota salte de las cuatro paredes, vamos a permitir sólo tres ahora - izquierda, arriba y derecha. Si golpea la pared inferior terminará el juego. Editaremos el segundo bloque si, por lo que es un bloque de if else que activará nuestro estado de "final de juego" cuando la pelota colisione con el borde inferior del lienzo. Por ahora lo vamos a mantener sencillo, mostrando un mensaje de alerta y reiniciando el juego recargando la página. Reemplace la segunda sentencia if con lo siguiente:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    alert("GAME OVER");
    document.location.reload();
}

Dejar que la pala golpee la pelota

Lo último que se debe hacer en esta lección es crear algún tipo de detección de colisión entre la pelota y la pala, para que pueda rebotar y volver al área de juego. Lo más fácil de hacer es comprobar si el centro de la pelota está entre los bordes izquierdo y derecho de la pala. Actualiza el último fragmento del código que modificaste de nuevo, a lo siguiente:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
        alert("GAME OVER");
        document.location.reload();
    }
}

 

Si la pelota toca el borde inferior del lienzo (Canvas), debemos comprobar si golpea la pala. Si es así, entonces rebota justo como esperaríamos; sino entonces el juego ha terminado como antes.

Compara tu código

Aquí tienes el código que funciona para que lo compares con el tuyo:

Ejercicio: haz que la bola se mueva más rápida cuando golpea la pala.

Siguientes pasos

Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a sentir que vale mucho más la pena jugar ahora que se puede perder! Pero todavía falta algo. Vamos a pasar al sexto capítuloConstruir el grupo de ladrillos y crear algunos ladrillos para que la bola los destruya.

Etiquetas y colaboradores del documento

 Última actualización por: jolosan,