El temporizador

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);

}