Sistema de vidas y corazones
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
Sistema de vidas y corazones
Sistema de vidas y corazones
Contenido del curso
Jonhatan prieto mora
Juan Castro
Profesor
Guadalupe Monge Barale
Angel David Velasco Bonifaz
César Augusto Cortés Labrada
marco antonio
Josue Cerron Tuesta
Dayane Coronado Guzmán
Paula Inés Cudicio
JUAN CAMILO CAMPO TANGARIFE
Juan Castro
Profesor
Juan Pablo Lopez Ramirez
Santiago Velásquez Serna
Abigail Nahomi Chávez Lozano
Raúl Adolfo Sánchez Rodríguez
Lorenzo Peñalver
Jorge Alejandro Suárez Rivera
Angel David Velasco Bonifaz
Libian María Hernández Gil
Lucas Frazzetta
Luis Miguel Rodríguez
Manuel Andres García Vera
Gabriel Fernandez
Gianluca Enzo Procopio
Jonathan Meixueiro
Yo utilice el metodo repeat() de los strings ya que cada emoji es un string
function showLives() { spanLives.innerHTML = emojis["HEART"].repeat(lives) }
Esta solución es mucho más limpia!
Aja. Hice lo mismo
n.livesNum.textContent = '❤️'.repeat(lives);
Te dejo el Emoji HEART: "❤", o igual lo puedes obtener en Visual Studio Code presionando las teclas Window + . Window + punto
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.
gracias, no me sabia esa
Si se coloca solo heartsArray, te saldrá con comas. Lo que hice para solucionar eso fue utilizar join():
spanLives.innerHTML = hearts.join('');
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; } }
Yo lo pensé así
function showLives() { spanLives.innerHTML = Array(lives).fill(emojis['HEART']).join(''); }
Comparto como va mi jueguito... 😃
!Alt Text
Las gráficas son geniales. Muestra el repo!!
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
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("")
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.
De esta forma renderizo los valores de un array
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("") }
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) }
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); }
Siii... llegó el momento, me resolvió el conflicto... .toFixed(3) jejejeje...
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); }
function showLifes(){ //crear un array const heartsArray=Array(lives).fill(emojis['HEART']); spanLives.innerHTML = heartsArray.join(''); }
++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] } }```
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(); }
Yo utilizé el meétodo repeat de String:
vidas.innerHTML = emojis['HEART'].repeat(lives)
Yo ser fan de forEach :3
heartsArray.forEach(heart => { spanLives.append(heart); })