Quiero hacer una visualización de una barra de salud que desaparece lentamente después de hacer clic en el botón de ataque. Desafortunadamente, no sé cómo convertir el damage como un porcentaje de la longitud de la healthBar de salud para reducir su longitud. Me gustaría que se redujera su longitud hasta que desaparezca por completo.
Parcialmente, entiendo que necesitaría obtener offsetWidth etc., pero no sé cómo combinar eso con la variable de damage .
<!DOCTYPE html> <html lang = 'en'> <head> <meta charset = 'utf-8'> <title>HP</title> <style> .healthBar { position: fixed; width: 500px; height: 20px; background-color: red; left: 50%; transform: translateX(-50%); } .attack { position: fixed; width: 100px; height: 20px; cursor: pointer; } </style> </head> <body> <div class="healthBar"></div> <button class="attack"> ATTACK </button> <script type = "text/javascript"> const attack = document.querySelector('.attack'); const healthBar = document.querySelector('.healthBar'); let damage = 100; let HP = 200; attack.addEventListener('click', function(){ if (HP > 0) { HP = HP - damage; if (HP <= 0) { console.log('DEAD'); alert('DEAD'); } } }) </script> </body> </html>Para obtener el porcentaje de algo, divide el valor actual por el valor total. En este caso, si tuviera 100 de salud y recibiera 20 de daño, 20/100 es 0.2 o 20%. El 100% siempre se representa como el número 1, por lo que puede tomar este valor de manera confiable y multiplicarlo por 100 para obtener un porcentaje que sea más amigable para el ojo humano.
Seguí adelante e intenté hacer que esto funcionara y finalmente lo hice, así que déjame explicarte cómo obtuve mi solución.
Primero, vamos a pensar en una fórmula. Dado que puede usar porcentajes para especificar el ancho de un elemento HTML, averigüemos cómo obtener el porcentaje de salud restante. Como dije antes, actual/total te da el porcentaje, así que todo lo que tenemos que hacer es obtener este valor y multiplicarlo por 100 para que sea un porcentaje adecuado. La fórmula sería algo así como (HP / totalHP) * 100 . Suficientemente fácil.
Ahora que tenemos un porcentaje, necesitamos crear un elemento principal para que la barra de salud represente la salud máxima. Para esto, dividiré su barra en 2 elementos diferentes con las clases healthContainer y healthBar . healthContainer será el elemento principal que representa la salud máxima y healthBar será la barra de color real que disminuye gradualmente. También agregaré un borde a healthContainer para que pueda ver la diferencia.
Finalmente, solo necesitamos realizar un seguimiento de la salud máxima. Simplemente crearé una segunda variable llamada maxHP y configuraré HP inicialmente. De esta manera, podemos usar la fórmula anterior para obtener qué porcentaje es el HP actual del HP máximo y conectarlo al elemento healthBar como el ancho. Aquí está el código completo:
let attack = document.querySelector('.attack'); let healthBar = document.querySelector('.healthBar'); let damage = 100; let maxHP = 200; let HP = maxHP; attack.addEventListener('click', function() { if (HP > 0) { HP = HP - damage; healthBar.style.width = ((HP / maxHP) * 100) + '%'; if (HP <= 0) { console.log('DEAD'); alert('DEAD'); } } }) .healthContainer { position: fixed; width: 500px; height: 20px; left: 50%; transform: translateX(-50%); border-style: solid; border-width: 2px; border-color: black; } .healthBar { position: relative; width: 100%; height: 100%; background-color: red; } .attack { position: fixed; width: 100px; height: 20px; cursor: pointer; } <div class="healthContainer"> <div class="healthBar"></div> </div> <button class="attack"> ATTACK </button>