Показать сообщение отдельно
  #8 (permalink)  
Старый 22.12.2017, 00:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием