jairogarcíarincón

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

    }



}

---

Publicado el 23 de Noviembre de 2024

javascripthtml5space starscanvas