Home | Clases | Videojuego sencillo con HTML5 | El temporizador

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

}

Fecha de publicación: 12/01/2018
Asignaturas: realización de proyectos multimedia interactivosaplicaciones webmontaje y mantenimiento de equipos
Temas: javascript html5 space stars canvas
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos