jairogarcíarincón

Declaración de variables y llamada a la función temporizador()

Para implementar un temporizador de 15 segundos, primero debemos inicializar una variable de tipo Date() al principio del fichero script.js y otra llamada stop que nos permitirá saber cuando ha finalizado el juego para parar el temporizador. Después, llamaremos a la función temporizador() al final de la función que inicializa el juego, es decir canvasStars():

//Declaración de variables

var tiempo = new Date(15000); //Para tener solo 15 segundos en milisegundos

var stop; //Para parar el tmporizador



//Inicio el juego

function canvasStars(){



    //Obtengo el elemento canvas

    canvas = document.getElementById("miCanvas");



    //Especifico el contexto 2D

    ctx = canvas.getContext("2d");



    //Llamo a la función que pinta el fondo con las estrellas

    pintarFondo();



    //Llamo a la función que pinta la nave

    pintarNave();



    //Llamo a la función que pinta la base

    pintarBase();



    //Llamo a la función que pinta los asteroides

    pintarAsteroides();



    //Añado el escuchador del teclado

    window.addEventListener('keydown', moverNave, true);



    //LLamada al temporizador

    temporizador();



}

La función temporizador()

El código de esta función debe ir decrementando el tiempo (cada 500ms para evitar errores de sincronización), comprobar cuanto queda para cambiar el color de manera similar a como hicimos con los puntos, y comprobar si me he quedado sin tiempo para llamar a la función finalizar() con un mensaje.

Además, esta función se debe refrescar cada 500ms. Esto se hace mediante el uso de setTimeout().

function temporizador(){



    //Decremento 500 milisegundos

    var ms = tiempo.getMilliseconds() - 500;

    tiempo.setMilliseconds(ms);



    //Muestro la nueva fecha

    var texto = rellenaCeros(tiempo.getMinutes()) + ":" + rellenaCeros(tiempo.getSeconds());

    var spanTiempo = document.getElementById("tiempo");

    spanTiempo.innerHTML = texto;



    //Compruebo el valor para cambiar el color del texto

    if (tiempo.getSeconds() < 6){

        spanTiempo.style.color = "red";

    }

    else if (tiempo.getSeconds() < 11){

        spanTiempo.style.color = "orange";

    }

    else{

        spanTiempo.style.color = "#0F0";

    }



    //Compruebo si llega a 0 para finalizar el juego o continuar

    if (tiempo.getSeconds() <= 0){

        var mensaje = "¡Lo siento! Se ha terminado el tiempo.
Pincha AQUÍ para volver a intentarlo.";

        finalizar(mensaje);

    }

    else{

        //Hago un loop para que se ejecute cada 500ms

        stop = setTimeout(temporizador,500);

    }



}



function rellenaCeros(numero){



    if (numero < 10){

        return "0" + numero;

    }

    else{

        return numero;

    }



}

Nota: Se ha añadido una función muy simple llamada rellenaCeros cuya única finalidad es garantizar que el temporizador muestre siempre los números con dos dígitos.

Para el temporizador

Lo único que faltaría para finalizar sería para el temporizador cuando se termine el juego. Para ello modificaremos la función finalizar() utilizando el método clearTimeout():

//Finalizo el juego

function finalizar(mensaje){



    //Capturo el elemento en el que voy a escribir

    var spanMensaje = document.getElementById("mensaje");

    //Escribo el mensaje en ese elemento

    spanMensaje.innerHTML = mensaje;

    //Bloqueo el movimiento del teclado

    window.removeEventListener("keydown", moverNave, true);

    clearTimeout(stop);



}

---

Publicado el 23 de Noviembre de 2024

javascripthtml5space starscanvas