Hola, estoy tratando de crear una barra de salud que escale en valor máximo según el nivel de los usuarios.
Pero estoy un poco atascado porque cada vez que la barra de salud termina sin tener la longitud correcta según el nivel de los usuarios y su salud. El sistema funciona así: el usuario comienza en el nivel 1 con un valor de salud de 150 y aumenta + 10 cada vez que sube de nivel, el nivel máximo que existe es 32.
Ahora sé que esto podría ser posible con un bucle, pero no estoy seguro de cómo hacerlo correctamente:
Este es el código de la barra de salud. El user_level es el nivel de los usuarios y estoy tratando de cambiar el estilo del elemento en función de su salud, pero al mismo tiempo coincidiría con el nivel actual del usuario.
for (let i = 0; i < user_level.value; i++) { playerhealthbar.style.width = user_health // Something here but I dont know how to. }Este es el código CSS si ayuda. Lo que sucede es que la barra verde debería encogerse para que la barra roja debajo se vuelva visible.
#playerhealth { position: absolute; bottom: 0; left: 0; height: 45px; width: 325px; background: lightgreen; } #playerhealthbar { position: absolute; height: 50px; width: 330px; border: rgb(255, 255, 255) 3px solid; border-radius: 3px; margin-right: 20px; display: inline-block; margin-top: 442px; margin-left: 70px; background: rgb(158, 31, 31); } #playerhealthvalue{ position: absolute; margin-top: 500px; margin-left: 220px; font-size: 30px; color: black; }La barra exterior completa permanece igual. Pero la barra verde que está dentro de todo el marco se encoge cuando la salud baja.
Entonces, lo primero que debe calcular es cuál es el valor de salud máximo actual. Esto viene dado por currentMaxHealth = 150 + 10 * (level-1) .
El porcentaje de la barra verde es playerHealth / currentMaxHealth * 100 .
Toda la lógica se puede hacer con solo las propiedades personalizadas calc y var .
Entonces el CSS podría verse así:
function setCurrentHealth(val) { let root = document.documentElement; root.style.setProperty('--curr-health', val); } function setUserLevel(level) { let root = document.documentElement; root.style.setProperty('--user-level', level); } document.querySelector('#level').addEventListener('input', (evt) => { setUserLevel(evt.target.value) }) document.querySelector('#health').addEventListener('input', (evt) => { setCurrentHealth(evt.target.value) }) :root { --user-level: 1; --curr-health: 10; --base-health-level: 150; --additional-health-per-level: 10; } .current-health { width: calc(var(--curr-health) / (var(--base-health-level) + var(--additional-health-per-level) * (var(--user-level) - 1)) * 100%); height: 100%; background-color: green; } .health-bar { border: 1px solid black; width: 300px; height: 20px; } <div class="health-bar"> <div class="current-health"> </div> </div> Level: <input value="1" id="level"><br> Health: <input value="10" id="health">