Anterior

Siguientes

Ejercicio: Finalización de la aplicación de descansos para beber Space Jam: Nuevas Leyendas

Completado

La función final es la que simulará el partido que está en curso. En este caso, en lugar de esperar 12 minutos, supondremos que cada cuarto del partido dura solo 12 segundos.

Se llama a la función startNextQuarter() desde el botón que está definido en index.html. Busque el valor de div que tenga el identificador start para ver la declaración onclick:

// This function is called when the Game button is selected. Each time the button is selected,
// it runs through a 12-second timer (simulating 12 minutes) and then updates the game
// to the next quarter.
function startNextQuarter() {
    // If there aren't exactly five players on the court, alert the coach that the game can't start.
    if(playersOnCourt != maxPlayersOnCourt){
        alert('Choose exactly ' + maxPlayersOnCourt + ' players to be on the court.');
        return;
    }

    // Update the button to indicate a quarter is in progress.
    document.getElementById('start').innerText = 'Q' + (currentQuarter + 1) + ' is in progress';

    // Define the interval period for the quarter; in this case, it's 12 seconds.
    var secondsInQuarter = 12;

    // Set the quarterInPlay variable to true so that the coach
    // can't move players during gameplay
    quarterInPlay = true;

    // Update the count down every 1 second, as indicated by the `1000` as
    // the second parameter to the setInterval function
    var x = setInterval(function() {        
        // Display the current time on the court board.
        document.getElementById('timer').innerText = 'Q '+ (currentQuarter + 1) + ' Time: ' + secondsInQuarter + ':00';

        // Decrement the interval counter for this quarter.
        secondsInQuarter--;

        // If the quarter has ended, reset the interval timer and get ready for the next quarter.
        if (secondsInQuarter < 0) {
            clearInterval(x);
            if(currentQuarter < 3) {
                endQuarter();
            }
            else {
                endGame();
            }
        }
    }, 1000);
}

Aunque la funcionalidad de intervalo está fuera del ámbito de este módulo, un factor crítico (especialmente cuando se prueba una funcionalidad nueva) es que se puede modificar el tiempo del intervalo, que es el segundo parámetro de la función setInterval(). En este caso, está establecido en 1000. Puede establecerlo en 100 si quiere que los cuartos del partido sean más cortos para probar más rápidamente los cambios nuevos.

Prueba de la nueva aplicación

Por fin está terminada la aplicación. Ahora podemos probarla. Recuerde que le interesa probar toda la funcionalidad (lo que incluye intentar agregar demasiados jugadores a la cancha o iniciar el partido cuando no hay jugadores suficientes en la cancha).

1. Elija cinco jugadores.
2. Presione el botón Start the Game! (Iniciar el juego).
3. Cuando el temporizador se detenga, ajuste (o no) los jugadores que se encuentran en la cancha y los jugadores que están descansando.
4. Cuando la alineación esté definida, seleccione el botón Start Q2 (Iniciar 2.º cuarto).

Repita los pasos 3 y 4 para los cuatro cuartos, tras lo cual se encontrará al final del partido.

¡Enhorabuena! Ha finalizado la aplicación web.

Implementación de la aplicación web final

Ahora que finalizó la aplicación web y la probó localmente, puede implementarla en la Web. Es bastante fácil implementar la aplicación en la Web. Lo único que tiene que hacer es insertar los cambios en la rama principal.

Para confirmar e insertar los cambios, vaya a la extensión de control de código fuente, agregue un mensaje de confirmación y seleccione la marca de verificación de la parte superior.

Ahora inserte los cambios. Para ello, seleccione las flechas arriba y abajo en la parte inferior de la ventana de Visual Studio Code (asegúrese de que se encuentra en la rama principal).

Después de confirmar e insertar los cambios (y de esperar un poco para que la acción de GitHub se desencadene y se complete), puede volver a la extensión de Azure, hacer clic con el botón derecho en la aplicación de producción y seleccionar Browse Site (Examinar sitio).

© 2021 Warner Bros. Ent. Todos los derechos reservados

Continuar