Reto: reinicio del juego

Clase 22 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Tommy Toala Cox

student•

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!

Guadalupe Monge Barale

student•

Totalmente de acuerdo.

Miguel Angel Hernandez Colombo

student•

como hago si solo me queda tiempo para estudiar y no hacer los retos, es que trabajo! y al llegar le dedico 4 horas a estudiar!

Manuel Araujo

student•

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

Eder Raúl Abarca Raviela

student•

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

Rafael Tobias Sanchez Rojas

student•

Gracias. me sirvió

Rubén Ernesto Aragón Gil

student•

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

Jose Angel Esquivel Cisneros

student•

Mauricio Combariza

student•

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

Federico Ivan Llano

student•

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('active') .classList.remove('active'), 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.

David Fernando Estacio Quiroz

student•

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

Andres Badillo

student•

Gente, les comparto: mi deploy y el repo

Laura Roa

student•

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

Orlando Rodriguez

student•

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/

Juan Castro

teacher•

Te quedó muy chévere :clap:

Sebastián Andrés Sanhueza Tapia

student•

Cuando gana le puse un modal y se reinicia termina

Juan David Santamaria Gomez

student•

aplicando una funcion reiniciar en la que me inserte un boton de reinicio cuando se llega al final del juego function restarGame(){

btnReiniciar = <button class="btns">Reiniciar</button> buttonReinicio.innerHTML = btnReiniciar; buttonReinicio.addEventListener('click',()=> location.reload()); }

Andres Montes

student•

reto solucionado

reiniciar.addEventListener('click', againPage)

function againPage() {
    location.reload()
}

Yobana Iris Ney Silva Rivero

student•

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

Jefferson Nalvarte Miranda

student•

Aquí les dejo mi demo y repositorio.
Espero les guste 🥳💀♥️!!

Nestor Rios Garcia

student•

Con respecto al reinicio del juego

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

Reiniciar juego

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.

Nestor Rios Garcia

student•

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.

Alejandro López Aguilar

student•

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/

Raúl Adolfo Sánchez Rodríguez

student•

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

Resultado:
🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵
Paso a paso

🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢
Prueba la demo:

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