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 19

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渋nactive鈥 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');
      }

馃幃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:

Funcionalidad Tutorial
Incorporaci贸n de fuego 馃敟 en las colisiones contra las bombas Ver
Contador de tiempo 鈴 en segundos + 2 decimales Ver
Tarjetas interactivas al perder, ganar sin r茅cord y ganar con nuevo r茅cord Ver
Pantalla de inicio del juego 馃 Ver
Animaci贸n al ganar un nivel 馃煚馃煛馃煝馃數馃敶 Ver

馃搶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);
            }
        }