No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Reto: timeouts de victoria o derrota

23/24
Recursos

Aportes 4

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

yo hice las animaciones con los hilos de setInterval, así se ve cuando pierdes cuando ganas y cuando si haces record

 
el código esta en mi github por si desean checarlo y la page por si desean probarlo

Se me ocurrio usar una clase que nombro “inactive” en CSS le agrego display:none.
En mi js luego, en el codigo de las colisiones agrego.

const boom = setInterval(() => {canvas.classList.toggle('inactive'); game.fillText(emojis['BOMB_COLLISION'], collision.x, collision.y)}, 70);
            
            console.warn('BOOOM');
            setTimeout(() => {clearInterval(boom); startGame() }, 700);

El canvas desaparece y aparece .
Pruébalo has una colision.
https://orlando0x.github.io/videojuego-con-javascript/

Creo una función showCollision que limpie todo el canvas y muestre un mensaje, cuyo contenido depende de si el jugador aún tiene vidas o no.

function showCollision() {
    game.clearRect(0, 0, canvasSize, canvasSize);
    game.font = '10px Verdana';
    game.textAlign = 'center';
    if(lives > 1) {
        game.fillText('PERDISTE UNA VIDA, VUELVE A INTENTARLO', canvasSize/2, canvasSize/2);
    }
    else {
        game.fillText('PERDISTE TODAS LAS VIDAS, VUELVE AL INICIO', canvasSize/2, canvasSize/2);
    } 
}

Luego, dentor de la fiunción movePlayer, en el condicional donde se verifica si hubo colisión, agrego la función showCollision y establezco un setTimeout para que espere un tiempo antes de llamar a la función leverlLost (levelFail para el profesor)

if (enemyCollision) {
    console.log('Chocaste contra un enemigo :(');
    showCollision();
    setTimeout(levelLost, 2000);
}

Después de muchos intentos y ver a otros compañeros así pude resolver el reto de las colisiones y que se mostrase donde había chocado:

else if (bombCollision) {
        showCollision();
        setTimeout(gameLose, 1000);
    }    

Dentro de la función de movePlayer en el condicional pude introducir esta función con el setTimeout
.

function showCollision(){
    firePos.x = playerPos.x;
    firePos.y = playerPos.y;
    console.log(firePos.x, firePos.y);
    fireExp();
}

function fireExp(){
    game.fillText(emojis['BOMB_COLLISION'], firePos.x, firePos.y)
}

Arriba está la función que se llama en movePlayer y esta a su vez llama a otra que ubica en las posiciones del jugador el emoji del fuego, con ello mostrando donde se chocó el jugador.