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
Contenido del curso
Sistema de vidas y corazones
Jonhatan prieto mora
Estudiante
Juan Castro
Profesor
Guadalupe Monge Barale
Estudiante
Angel David Velasco Bonifaz
Estudiante
César Augusto Cortés Labrada
Estudiante
marco antonio
Estudiante
Josue Cerron Tuesta
Estudiante
Dayane Coronado Guzmán
Estudiante
Paula Inés Cudicio
Estudiante
JUAN CAMILO CAMPO TANGARIFE
EstudianteJuan Castro
Profesor
Juan Pablo Lopez Ramirez
Estudiante
Santiago Velásquez Serna
Estudiante
Abigail Nahomi Chávez Lozano
Estudiante
Raúl Adolfo Sánchez Rodríguez
Estudiante
Lorenzo Peñalver
Estudiante
Jorge Alejandro Suárez Rivera
EstudianteAngel David Velasco Bonifaz
Estudiante
Libian María Hernández Gil
Estudiante
Lucas Frazzetta
Estudiante
Luis Miguel Rodríguez
Estudiante
Manuel Andres García Vera
Estudiante
Gabriel Fernandez
Estudiante
Gianluca Enzo Procopio
Estudiante
Jonathan Meixueiro
EstudianteYo 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); })