No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Reto: reinicio del juego

22/24
Recursos

Aportes 26

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

Gente, la verdad se aprende much铆simo realizando los retos, aunque te demores.
Corregir los bugs se vuelve bastante interesante, ves muchas perspectivas para mejorar el c贸digo, desarrollas tu l贸gica, si no sabes algo, lo investigas y aprendes a buscar cada vez mejores lugares para encontrar respuestas m谩s acercadas a la real.
隆Gracias profe, muy buen curso!
隆脡xito a todos!

HTML:
Creo un bot贸n para reiniciar el juego:

<p><button id="reset_button">Reiniciar Juego</button></p>

JAVASCRIPT:
Accedo al bot贸n y le a帽ado que en el evento de clic ejecute una funci贸n resetGame()

const reset_button = document.querySelector('#reset_button');

reset_button.addEventListener('click', resetGame);

Escribo la funci贸n que reinicia el juego

function resetGame() {
    location.reload();
}

Les comparto lo que hice:

En HTML y en el div btns agregu茅 un nuevo bot贸n

<button id="reset">Reiniciar juego</button>

En las variables hasta lo 煤ltimo agregu茅:

const botonReiniciar = document.querySelector('#reset')

En la funci贸n startGame() hasta abajo de la misma y arriba de la funci贸n moverPlayer(); agregu茅:

botonReiniciar.addEventListener('click', reiniciarJuego);

Por 煤ltimo, abajo de la funci贸n gamewin(), agregu茅 una nueva funci贸n:

function reiniciarJuego() {
  location.reload();
}

Cuando se termina el juego se ocultan los botones de navegaci贸n y se muestra el bot贸n de reinicio del juego:

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

Cuando un hace reload se lo borra el record, para que esto no pase estan estas dos funciones:

window.addEventListener('load', () => {
  const savedRecordTime = localStorage.getItem('record_time');
  if (savedRecordTime) {
    // Aqu铆 restauras los datos recuperados del localStorage
    if (record) {
      record.innerHTML = savedRecordTime;
    }
     }
});

La de beforeUnload, es la que permite la persistencia del record

window.addEventListener('beforeunload', () => {
          // Aqu铆 guardas los datos que deseas persistir en el localStorage
          localStorage.setItem('record_time', elapsedSeconds.toString());
        })

Logre resolverlo creando un modal, hacia tiempo que no hacia uno, y me ayude con chatgpt para recordar como se escribia agregado en las clases .classList.add(鈥榓ctive鈥) .classList.remove(鈥榓ctive鈥), ademas de agregar colores con .style.backgroundColor en caso de record superado o no superado.
y para el boton de reinicio con window.location.reload().
Otra cosa a agregar es el bloqueo de los botones con boolean y condicionales en movekeys true y false antes de despues de terminar la partida para impedir el movimiento del jugador y que el tiempo siga cambiando.

Tengo amsiedad鈥 desde el principio ya ten铆a en cuenta esos errores y los resolv铆 antes de que Juan dijera los retos jajaja

Dejo mi repo para quien lo quiera:
https://github.com/Estacio7u7/escape-from-zoo

Gente, les comparto: mi deploy y el repo

馃槂 Hola! Agregue el boton de restart y de paso agregue una cuenta regresiva!
Hay muchas cosas aun por incluir y mejorar! Me encanto el reto y de paso me ayudo a entender muchisimo mejor el codigo!
El link a mi repositorio de GitHub: https://github.com/laualexandrar/Video-game-workshop-learningJS
El link del juego: https://laualexandrar.github.io/Video-game-workshop-learningJS/

Para Computador:

Para Celular: (Responsive)
!

Desde clases anterios ya habia agregado ese boton 馃槏 Agregue tambien un boton para borrar el record.
Les dejo la v0.80 beta de mi juego

https://orlando0x.github.io/videojuego-con-javascript/

reto solucionado

reiniciar.addEventListener('click', againPage)

function againPage() {
    location.reload()
}

Agregue estas funciones al boton de reiniciar y las llame al final de la funcion gameWinAndRecord() y function startGame()

btnRestart.addEventListener("click", Restart);

function Restart() {
  level = 0;
  lives = 3;
  timeStart = undefined;
  hideBtnRestart();
  startGame();
}

function hideBtnRestart() {
  btnRestart.style.display = "none";
  btnUp.style.display = "block";
  btnLeft.style.display = "block";
  btnRight.style.display = "block";
  btnDown.style.display = "block";
}

function showBtnRestart() {
  btnRestart.style.display = "block";
  btnUp.style.display = "none";
  btnLeft.style.display = "none";
  btnRight.style.display = "none";
  btnDown.style.display = "none";
}

//llamado de las funciones anteriores 

function startGame() {
  console.log({ canvasSize, elementSize });

  games.font = elementSize - 6 + "px Verdana";
  games.textAlign = "end";

  const map = maps[level];
  if (!map) {
    gameWinAndRecord();
    return;
  }

  if (!timeStart) {
    timeStart = Date.now();
    timeInterval = setInterval(showTime, 100);
    showRecord();
  }

  const mapRows = map.trim().split("\n");
  const mapRowCols = mapRows.map((row) => row.trim().split(""));

  console.log({ map, mapRows, mapRowCols });

  showLives();

  enemyPositions = [];
  games.clearRect(0, 0, canvasSize, canvasSize);

  mapRowCols.forEach((row, rowIndex) => {
    row.forEach((column, columnIndex) => {
      const emoji = emojis[column];
      const positionX = elementSize * (columnIndex + 1);
      const positionY = elementSize * (rowIndex + 1);

      if (column == "O") {
        if (!playerPosition.x && !playerPosition.y) {
          playerPosition.x = positionX;
          playerPosition.y = positionY;
          console.log({ playerPosition });
        }
      } else if (column == "I") {
        giftPosition.x = positionX;
        giftPosition.y = positionY;
      } else if (column == "X") {
        enemyPositions.push({
          x: positionX,
          y: positionY,
        });
      }

      games.fillText(emoji, positionX, positionY);
    });
  });
 
  hideBtnRestart();
  movePlayer();
}

function gameWinAndRecord() {
  console.log("Ganaste el Juego!");
  clearInterval(timeInterval);

  const recordTime = localStorage.getItem("record_time");
  const playerTime = Date.now() - timeStart;

  if (recordTime) {
    if (recordTime >= playerTime) {
      localStorage.setItem("record_time", playerTime);
      pResult.innerHTML = "Aumentaste el reto 馃槺";
    } else {
      pResult.innerHTML = "Lo siento no superaste el record, intentalo de nuevo... 馃槑";
    }
  } else {
    localStorage.setItem("record_time", playerTime);
    pResult.innerHTML = "primer record, intenta superarlo 馃槑";
  }
  console.log({ recordTime, playerTime });

  showBtnRestart();
}

pero tengo un problema: quiero que el boton de reiniciar el juego salga una vez se acaben las vidas no importa en que nivel este, intento llamar las funciones anteriores a la funcion levelFail() pero no funciona. Les dejo el codigo si alguien lo soluciono. Please help me 馃挌馃挌馃挌

function levelFail() {
  console.log("Chocaste contra un enemigo :(");

  lives--;

  console.log(lives);

  if (lives <= 0) {
    level = 0;
    lives = 3;
    timeStart = undefined;
    hideBtnRestart();
    showBtnRestart();
    }

  playerPosition.x = undefined;
  playerPosition.y = undefined;
  
  startGame();  
  
  
}

Aqu铆 les dejo mi demo y repositorio.
Espero les guste 馃コ馃拃鈾ワ笍!!

Con respecto al reinicio del juego


Al terminar el juego muestro una secci贸n que muestra los resultados y te da las siguientes opciones.

  1. Reiniciar juego
  2. Reiniciar juego y r茅cord

agrego la seccion con los botones en el HTML

<div>
    <button id="Replay" type="button">Juega otra vez</button>
    <button id="Reboot" type="button">Reiniciar record</button>
</div>

Y con JS hago lo siguiente:

document.getElementById('Replay').addEventListener('click', ()=> {
    location.reload()
})
document.getElementById('Reboot').addEventListener('click', ()=> {
    localStorage.clear()
    location.reload()
})

Si tienes m谩s dudas aqu铆 tienes mi repositorio y aqu铆 tienes el juego si quieres probarlo.

Con respecto a que el timer a veces no para.


A mi tambien me paso fue un dolor de cabeza:

Lo que pasa es que solo se limpia el intervalo si ganamos el juego a la primera.

function gameWin() {
  console.log('隆Terminaste el juego!');
  clearInterval(timeInterval);
.
.
.

Para arreglarlo tambi茅n tenemos que limpiar el intervalo si perdemos todas nuestras vidas:

function levelFail() {
  console.log('Chocaste contra un enemigo :(');
  lives--;
  
  if (lives <= 0) {
    level = 0;
    lives = 3;
    timeStart = undefined;
    clearInterval(timeInterval);
  }

  playerPosition.x = undefined;
  playerPosition.y = undefined;
  startGame();
}

Limpiamos el intervalo cuando agotemos nuestras vidas, limpiamos el intervalo si se cumple el condicional.

De esta forma ya deberia funcionar.

Me encanto estas clases, hay errores a solucionar, como el bug del relog, que este en algunas ocasiones no se detiene y en otros si; pero de resto me ha encantado este tipo de clases, ya que me ha ayudado a mejorar mi logica, y a buscar otro tipo de soluciones para los retos que vimos en las clases, muchas gracias al Profe Juan DC, este es mi repositorio y la pagina en git pages:

Repositorio:

https://github.com/GRANalejandro/JAVASCRIPT-GAMES

Pagina:

https://granalejandro.github.io/JAVASCRIPT-GAMES/

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 馃幃 猸愨瓙猸愨瓙猸

馃幃Taller: Crea tu primer 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 Entra aqu铆
Contador de tiempo 鈴 en segundos + 2 decimales Entra aqu铆
Tarjetas interactivas al perder, ganar sin r茅cord y ganar con nuevo r茅cord Entra aqu铆
Pantalla de inicio del juego 馃 Entra aqu铆

馃搶Prueba la demo del juego 馃幃 猸愨瓙猸愨瓙猸

馃搶脡chale un vistazo al repositorio de GitHub

馃搶脡chale un vistazo al Taller de Platzi

Yo simplemente lo que hice fue crear dos contenedores, los cuales llevaban una clase inactive y otra para aplicar los estilos, a la clase inactive le daba display: none, luego le di estilos al contenedor y sus componentes e hice que en la funcion de winconfig ( donde declaramos los records y todo eso) que se le quite la clase inactive a winMessage (el 鈥渃ontenedor de victoria鈥), hice lo mismo con el contenedor de derrota, pero lo que hice fue sacarle todo a la funci贸n 鈥淕ameOver鈥 y darle un clearInterval y remover la clase de inactive al 鈥渃ontenedor de derrota鈥.
A su vez, ambos contenedores (de derrota y victoria), tienen un boton de restart que hace location.reload(). Aqu铆 el link: https://taller-de-video-juegos.vercel.app/

function winConfig() {

    clearInterval(timeInterval)


    const recordTime = localStorage.getItem("record_time")
    const playerTime = formatTime(Date.now() - timeStart)
    if (recordTime){
    if ( recordTime >= playerTime){
        localStorage.setItem("record_time", playerTime)
        Resultado.textContent = "Record superado"
    }else{
        Resultado.textContent = "Record no superado"   
     }
    }else{
        localStorage.setItem("record_time", playerTime)
        Resultado.textContent = "Primer record"
    }
    winMessage.classList.remove("inactive")

}

Antes

function gameOver() {
    loseMessage.classList.remove("inactive")
    
    playerPosition.x = doorPosition.x;
    playerPosition.y = doorPosition.y;
    level = 0
    lives = 3
    timeStart = undefined;
    startGame()
} 

Despu茅s

function gameOver() {
    clearInterval(timeInterval)
    loseMessage.classList.remove("inactive")
    
    //timeStart = Date.now();
}

C贸digo de los botones:

function reload (){
    location.reload()
}
restartButton.addEventListener("click", reload)
restartButton2.addEventListener("click", reload)

(Al poner ambos con QuerySelectorAll me daba un error as铆 que evite complicarme mucho y solo le cambie la clase al segundo que es el de derrota)

Me acorde del proyecto de mokepon:
Se puede hacer el llamado de esta funci贸n desde gameWin(), una vez terminamos el juego para que aparezca el bot贸n de reiniciar.

function reiniciarJuego(){
    btnReiniciar =  `
    <button id="reinicio-juego" class="btns">Reiniciar</button>
    `
    contenedorBotonoes.innerHTML = btnReiniciar;
    const buttonReinicio = document.querySelector('#reinicio-juego');
    buttonReinicio.addEventListener('click',()=> location.reload());
}

para corregir el BUG del tiempo que no se detiene cuando perdemos las tres vidas y volvemos a empezar el juego y despu茅s ganamos, cambie el valor de timeStart = undefined por timeStart;

function repeatLevel(){
    console.log('chocaste con una bomba');
    //Se rreduce el numero de vidas 
    lives--;
    // este condicional valida si el numero de vidas es menor que 0, para reiniciar al primer nivel
    // y tres vidas mas
    if (lives <= 0){
        level = 0;
        lives = 3;
        timeStart;
    }
    console.log('vidas'+'='+lives);
    // se coloca undefine para reiniciar la posicion del jugador
    playerPosition.x = undefined;
    playerPosition.y = undefined;
    startGame();
}

para recargar oculte los botones de navegaci贸n y solo se visualiza el bot贸n de recargar

html

</div>
        <div class="btns2">
            <button onmousedown="recargar()" ontouchstart = 'recargar()' id="reload" >Recargar</button>
        </div>

js
agregue esta linea en la funcion startGame()

reload.style.display = 'none';

y en la funcion gameWin()

reload.style.display = 'flex';
btns.style.display = 'none';

Si es algo que se debe resolver en 5 segundos y no importa la est茅tica, pueden concatenar lo siguiente al mensaje del resultado:

鈥楶resiona <a href=鈥渏avascript:window.location.href=window.location.href鈥>aqu铆</a> para volver a jugar.鈥

Hola, les comparto mi deploy con las mejoras sugeridas鈥
Hice un modal para que al terminar el juego, informe al jugador los resultados y pueda reiniciarlo鈥
https://libian19.github.io/videogame/
Mi repo: https://github.com/libian19/videogame

Cosas que hacer

  • Pantalla de inicio
  • Pantalla cuando se pierden todas las vidas
  • Pantalla cuando ganas

S铆 le agregu茅 esa opci贸n 馃槄.