Sistema de vidas y corazones

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

Jonhatan prieto mora

student•

Yo utilice el metodo repeat() de los strings ya que cada emoji es un string

function showLives() {
  spanLives.innerHTML = emojis["HEART"].repeat(lives)
}

Juan Castro

teacher•

Esta solución es mucho más limpia!

Guadalupe Monge Barale

student•

Aja. Hice lo mismo

n.livesNum.textContent = '❤️'.repeat(lives);

Angel David Velasco Bonifaz

student•

Te dejo el Emoji HEART: "❤", o igual lo puedes obtener en Visual Studio Code presionando las teclas Window + . Window + punto

César Augusto Cortés Labrada

student•

Gracias, no los encontraba y me tocó poner en vez de corazones unas gotas de sangre XD; es que el único corazón que veía no salía bien.

marco antonio

student•

gracias, no me sabia esa

Josue Cerron Tuesta

student•

Si se coloca solo heartsArray, te saldrá con comas. Lo que hice para solucionar eso fue utilizar join():

spanLives.innerHTML = hearts.join('');

Dayane Coronado Guzmán

student•

Mi humilde forma de realizar el reto indicado fue utilizar la siguiente opción.

function showLives() {
    const heartsArray = Array(lives).fill(emojis['HEART']);

    spanLives.innerHTML = '';

    for (heart of heartsArray) {
        spanLives.innerHTML += heart;
    }
}

Paula Inés Cudicio

student•

Yo lo pensé así

function showLives() {
    spanLives.innerHTML = Array(lives).fill(emojis['HEART']).join('');
}

JUAN CAMILO CAMPO TANGARIFE

student•

Comparto como va mi jueguito... 😃

!Alt Text

Juan Castro

teacher•

Las gráficas son geniales. Muestra el repo!!

Juan Pablo Lopez Ramirez

student•

Yo buscando el error por todos lados sin saber que era y despues de un rato me di cuenta que el archivo maps que yo habia copiado al inicio del curso no tenia el emoji del corazón >:V

Santiago Velásquez Serna

student•

Lo que hice fue imprimir lo que fuera que tuviera el array heartsArray en en innerHTML de spanLives (Siempre tendra el numero de corazones igual al numero de vidas que nos queden) concatenandolo con el metodo join("").

 spanLives.innerHTML=heartsArray.join("")

Abigail Nahomi Chávez Lozano

student•

Yo solo imprimí tal cual la variable heartsLives, y le agregé el método join(' ') (gracias a los aportes de otros compañeros), para separe cada corazón con nada, a la hora de mostrarlo en el HTML.

Funciona para mostrar la cantidad de vidas que reciba el Array con la variable 'lives', que se modifica dependiendo de las colisiones que tenga el jugador.

Raúl Adolfo Sánchez Rodríguez

student•

De esta forma renderizo los valores de un array

Lorenzo Peñalver

student•

En otros cursos dijeron que el usar innerHTML era mala practica debido a que si eso estaba al alcance de los usuarios se podía usar de mala forma. Así que opté por hacerlo con .textContent, también use el .join("") para eliminar las comas:

function showLives (){
    let heartsArray = Array(lives).fill(emojis["HEART"])
    spanLives.textContent = heartsArray.join("")

}

Jorge Alejandro Suárez Rivera

student•

Yo la solución que pensé era un repeat de lives, así se ahorra más código y en lo personal es más fácil de entender

function showLives() {
        spanLives.innerHTML = emojis["HEART"].repeat(lives)
    }

Angel David Velasco Bonifaz

student•

Para el reto de poner los corazones lo realice con un reduce

const showLives=()=>{
  const heartsArray= Array(lives).fill(emojis['HEART']);
  spanLives.innerHTML=heartsArray.reduce((string, heart)=>string+=heart);
}

Libian María Hernández Gil

student•

Siii... llegó el momento, me resolvió el conflicto... .toFixed(3) jejejeje...

Lucas Frazzetta

student•

yo le agregué esta pavadita para que se rompa el corazón cuando perdemos una vida

function showLives() {
	livesCounter.innerText =
		emojis['HEART'].repeat(lives) + emojis['EMPTY_HEART'].repeat(3 - lives);
}

Luis Miguel Rodriguez

student•

function showLifes(){
  //crear un array
  const heartsArray=Array(lives).fill(emojis['HEART']);

  spanLives.innerHTML = heartsArray.join('');
}

Manuel Andres García Vera

student•

++mi solucion++

function showLives (){
    const heartArray = Array(lives).fill(emojis['HEART']);
    console.log(heartArray);
    spanLives.innerHTML = '';
    for (let i = 0; i < heartArray.length; i++) {
        spanLives.innerHTML += heartArray[i]
        
    }
    
}```

Gabriel Fernandez

student•

Mi solucion fue algo mas simple. aunque menos escala

<code> 

//HTML 
  <p>Vidas = 💙💙💙</p>

// JS
function levelFail(){
  if (lives <= 1) {
    location.reload();
  }
  lives--;
  if (lives == 2) {
    parrafo.innerText = `Vidas = 💙💙`
  }else if(lives == 1){
    parrafo.innerText = `Vidas = 💙`
  }
  
  console.log(lives);
  playerPosition.x = undefined;
  playerPosition.y = undefined;
  startGame();
}

Gianluca Enzo Procopio

student•

Yo utilizé el meétodo repeat de String:

vidas.innerHTML = emojis['HEART'].repeat(lives)

Jonathan Meixueiro

student•

Yo ser fan de forEach :3

heartsArray.forEach(heart => {
        spanLives.append(heart);
    })

function showLives (){
    const heartArray = Array(lives).fill(emojis['HEART']);
    console.log(heartArray);
    spanLives.innerHTML = '';
    for (let i = 0; i < heartArray.length; i++) {
        spanLives.innerHTML += heartArray[i]
        
    }
    
}```

<code> 

//HTML 
  <p>Vidas = 💙💙💙</p>

// JS
function levelFail(){
  if (lives <= 1) {
    location.reload();
  }
  lives--;
  if (lives == 2) {
    parrafo.innerText = `Vidas = 💙💙`
  }else if(lives == 1){
    parrafo.innerText = `Vidas = 💙`
  }
  
  console.log(lives);
  playerPosition.x = undefined;
  playerPosition.y = undefined;
  startGame();
}

Sistema de vidas y corazones

Introducción

Programemos un juego con JavaScript

Canvas

¿Qué es canvas en JavaScript?

Tamaño del canvas y sus elementos

Canvas responsive

Mapa del juego

¿Qué es un array bidimensional?

Arreglos multidimensionales en JavaScript

Refactor del mapa de juego

Movimientos del jugador

Eventos y botones

Objeto playerPosition

Limpieza de movimientos

No te salgas del mapa

Colisiones

Detectando colisiones fijas

Detectando colisiones con arrays

Victoria: subiendo de nivel

Derrota: perdiendo vidas

Bonus: adictividad

Sistema de vidas y corazones

Sistema de tiempo y puntajes

¿Qué es localStorage?

Guardando records del jugador

Deploy

Depurando errores del juego

Desplegando el juego a GitHub Pages

Próximos pasos

Reto: reinicio del juego

Reto: timeouts de victoria o derrota

¿Quieres un simulador laboral?