IDigle1,
сделал с отключением регенерации по достижении максимума, если урон больше текущего здоровья, то капец и никакой регенерации
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#max{
width:auto;
height:30px;
background:rgb(100,100,100);
overflow:hidden;
box-shadow:0 0 10px rgba(0,0,0,0.5);
color: #FFFFFF;
}
#curent{
width:100%;
height:100%;
background:red;
box-shadow:0 0 10px rgba(0,0,0,0.5);
transition: all .6s ease-in-out;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var maxHp = document.getElementById("max");
var curentHp = document.getElementById("curent");
var hp = 100;
var curHealth = hp;
var regen = 0;
var regenSpeed = 0.5;
var timer;
curentHp.addEventListener("click" ,function() {
window.clearTimeout(timer);
var damag = prompt("дамаг");
curHealth -= damag;
if(curHealth <= 0) {
curHealth = 0;
curentHp.style.width = curHealth +"%"; maxHp.textContent = "капец" ;
}
else regeniration();
});
function regeniration() {
if (curHealth != hp) {
curHealth += regenSpeed;
curHealth > hp && (curHealth = hp);
curentHp.style.width = curHealth + "%";
timer = setTimeout(regeniration, 500);
}
}
});
</script>
</head>
<body>
<div id="max">
<div id="curent"></div>
</div>
</body>
</html>