Home | Clases | Videojuego sencillo con HTML5 | El contador de movimientos

El contador de movimientos


Llamar a la función

Para actualizar el contador después de cada movimiento, lo único que tenemos que hacer es llamar a la función actualizarContador() cada vez que se pulsa una tecla, e implementar dicha función para que realice las acciones necesarias.

Para asegurarnos de que cada vez que se pulsa una tecla se actualiza el contador, añade, dentro de case de la función moverNave(), la llamada a la función actualizarContador(). Hazlo antes de cada comprobación de colisión con los bordes:


//Muevo la nave
function moverNave(evento){

//Detecto la tecla que estoy pulsando
switch(evento.keyCode){

//Izquierda: 37 o 65 (flecha izquierda o letra A)
case 37:
case 65:
//Actualizar contador
actualizarContador();
//Compruebo si se va a salir por la izquierda
if (naveX == 0){
break;
}
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la x
naveX = naveX - 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
//Compruebo colisión
detectarColision();
break;
//Derecha: 39 o 68 (flecha derecha o letra D)
case 39:
case 68:
//Actualizar contador
actualizarContador();
//Compruebo si se va a salir por la derecha
if (naveX == 570){
break;
}
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la x
naveX = naveX + 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
//Compruebo colisión
detectarColision();
break;
//Arriba: 38 o 87 (flecha arriba o letra W)
case 38:
case 87:
//Actualizar contador
actualizarContador();
//Compruebo si se va a salir por arriba
if (naveY == 0){
break;
}
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la y
naveY = naveY - 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
//Compruebo colisión
detectarColision();
break;
//Abajo: 40 o 83 (fle3cha abajo o letra S)
case 40:
case 83:
//Actualizar contador
actualizarContador();
//Compruebo si se va a salir por abajo
if (naveY == 570){
break;
}
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la y
naveY = naveY + 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
//Compruebo colisión
detectarColision();
break;
}

}


Implementar la función

La función actualizarContador() debe de realizar las siguientes acciones:

  • decrementar el contador en 1 cada vez que realice un movimiento
  • cambiar el color del contador a naranja si el valor es inferior a 10
  • cambiar el color del contador a rojo si el valor es inferior a 5
  • finalizar el juego con un mensaje si el contador llega a 0


Una vez inicializada la variable contador al principio del archivo, todas ellas las podemos realizar con el siguiente código dentro de la función:


//Declaración de variables
var contador= 40; //Contador de movimientos

/* Resto de código */

//Actualizo el contador y detecto si se ha quedado sin movimientos
function actualizarContador(){

//Decremento en cada movimiento
contador--;
//Capturo el elemento en el que escribir la puntuación
var spanPuntuacion = document.getElementById("puntuacion");
//Actualizo el contador
spanPuntuacion.innerHTML = contador;
//Compruebo el valor para cambiar el color del texto
if (contador < 6){
spanPuntuacion.style.color = "red";
}
else if (contador < 11){
spanPuntuacion.style.color = "orange";
}
else{
spanPuntuacion.style.color = "#0F0";
}
//Compruebo si se ha quedado sin puntos
if (contador == 0){
var mensaje = "¡Lo siento! Te has quedado sin puntos. Pincha AQUÍ para volver a intentarlo.";
finalizar(mensaje);
}

}

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