Reto: timeouts de victoria o derrota

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

Les comparto, el resultado final de mi juego. 😄
Todo feedback es bienvenido.
Repositorio de GitHub.
Link del juego.

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.

Hola a todos

Acá les comparto algunas de las mejoras que le realicé al juego.

Aquí mi versión del juego. Todavía no he podido resolver el último reto sin que se rompa todo pero el mapa tiene algunos atajos y los encuentros con alienígenas se premian con vidas 😉.

Aquí mi repositorio: https://github.com/ElioDiez/Curso-Videojuego-en-JavaScript

Y aquí el juego: https://eliodiez.github.io/Curso-Videojuego-en-JavaScript/

¡Seguiré intentándolo!

Implemente mensajes en el canvas cada vez que chocas, pierdes o ganas:

GitHub: https://github.com/RedCode-123/Videojuego_JavaScript_2022

Acá dejo mi aporte. Le agregue un par de pantallas extras como por ejemplo el conteo hacia atrás antes de comenzar el game, como también una ventana de Game over y cuando ganas el game.
Repo: https://github.com/crisLeo-P01/proyecto-videogame
Juego: https://crisleo-p01.github.io/proyecto-videogame/

Hola comparto el proyecto. De los retos, el que más me costo es el de posicionar el jugador en el lugar correcto al hacer resize del HTML.
mhgame web del proyecto
repo en GitHub

Muchas gracias. Excelente curso.

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/

Esta fue mi resolución en base a ver como usar el set interval en los comentarios.

  if (enemyCollision) {
        showColision();
        //espera 1 segundo para empezar la funciona level fail//
        setTimeout (levelFail,1000);
    }

para que el fuego aparezca y no se vea la calavera hice lo siguiente.

    function showColision() {
        game.fillText (emojis['BOMB_COLLISION'], playerPosition.x, playerPosition.y);
        playerPosition.x = undefined;
        playerPosition.y = undefined;
        console.log ('choque');
      }

Hola 🙋‍♂️, les comparto mi proyecto:
Dungeon Magician

Inspirado en el juego del Buscaminas y un rpg 2d tradicional, Dungeon Magician trata de un mago en busca de gemas encantadas.

Distintas trampas mágicas se encuentran escondidas en el mapa, tienes la habilidad de prever el peligro en un radio de 1 cuadro a tu alrededor si la situación así lo requiera.
.
Esquiva las minas con tu intuición, perspicacia y cumple con tu destino 🧙‍♂️🌟.

Primera versión

🎮Taller: Crea tu primer videojuego -Mi proyecto🎮

El videojuego ha sido elaborado durante las sesiones del taller de Platzi con HTML🧡, CSS 💙y JavaScript💛 y adicionalmente se han añadido algunas funcionalidades, como:

• Incorporación de fuego 🔥 en las colisiones contra las bombas

• Contador de tiempo ⏱ en segundos + 2 decimales

• Tarjetas interactivas al perder, ganar sin récord y ganar con nuevo récord

• Pantalla de inicio del juego 🤠con enlaces a redes sociales

• Animación al ganar un nivel y perder vidas 🟠🟡🟢🔵🔴

• Pantalla para registrar tus mejores récords.🎖🎖
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  

⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐

📌Prueba la demo del juego 🎮

📌Échale un vistazo al repositorio de GitHub

🎮Deploy de videojuego 🎮

El videojuego ha sido elaborado durante las sesiones del taller de Platzi con HTML🧡, CSS 💙y JavaScript💛 y adicionalmente se han añadido algunas funcionalidades, como:

📌Prueba la demo del juego 🎮 ⭐⭐⭐⭐⭐

📌Échale un vistazo al repositorio de GitHub

📌Échale un vistazo al Taller de Platzi

Mira cómo agregar una animación al subir de nivel

1. Resultado:
   

   
   🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

2. Paso a paso
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢

3. Prueba la demo:

   📌Prueba la demo del juego 🎮 ⭐⭐⭐⭐⭐

Dejo mi jueguito después de tomar características como modelos de algunos compañeros logre terminar los retos

Dejo mi juego desplegado
https://manuel15939.github.io/taller-practico-javascript-videogame/
Mi repositorio
https://github.com/manuel15939/taller-practico-javascript-videogame

Cuando haya una colisión entre la calaverita y una bomba lo cambio por una explosión y uso el setTimeout para después retomar el punto de partida inicial del mapa en el que nos encontremos

if(giftCollisionXY){
        levelUp();
    }else if(bombaCollisionXY){
        console.log('Tocaste una bomba');
        game.fillText(emojis['EXPLOTION'],playerPosition.x,playerPosition.y);
       setTimeout(gameFailed,1000);
    }else{
        game.fillText(emojis['PLAYER'],playerPosition.x,playerPosition.y);
    }

 
Después de muchos dolores de cabeza, logré hacer:

1. Botón de reiniciar el juego sin reiniciar la página
2. Botón para borrar el record máximo
3. Presentar el intervalo en formato de tiempo
4. Una pantalla de inicio y de cierre
5. El canvas ahora se ajusta al tamaño que se le dará por CSS (arrastrando consigo a ElementSize)
6. Transiciones entre las distintas páginas (3 en total xd)
7. Algunas correcciones de errores
8. Ajustes en CSS para el tamaño de los botones, del canvas y demás, incluso dependiendo de la orientación del dispositivo (y esta en responsive 😄).
9. El reloj solo empezará cuando se presione uno de los botones.

 
Si bien hay bastantes cosas para mejorar o añadir a mi código, por ahora mi problema es hacer que las interfaces de los navegadores en los móviles no interfieran con el contenido de la página tapándolo xd

Hay muchas ideas interesantes en la sección de comentarios, haré mi idea, pero aprenderá de las demás!

Pude agregar las colisiones usando

 //Comparar la colisión con las bombas
        for (let i = 0; i < bombitas.length; i++) {
            if((positionJugador.x).toFixed(3) == (bombitas[i].positionX).toFixed(3) && (positionJugador.y).toFixed(3) == (bombitas[i].positionY).toFixed(3)){
                console.log("Boom!!! REVENTASTE");
                game.clearRect(bombitas[i].positionX-elementsSize,bombitas[i].positionY-elementsSize,elementsSize,elementsSize);//borrar en donde hubo colision
                game.fillText(emojis["BOMB_COLLISION"],bombitas[i].positionX,bombitas[i].positionY);//insertar emoji colision
                setTimeout(failed,1000);
            }
        }