Форум

IDigle1 · #1 (**permalink**) 21.12.2017, 23:38

Написал скрипт имитирующий шкалу здоровья, как в играх. Я новичок в JS, по этому хочу попросить вас подсказать, где и как можно упростить, код(без использования библиотек), может быть где то я написал лишнего, и это можно реализовать меньшим количеством строк.

<head>
<style>
        #max {
            width: auto;
            height: 30px;
            background: rgb(100,100,100);
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
        #curent {
            width: 100%;
            height: 100%;
            background: red;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id="max">
        <div id="curent"></div>
    </div>
</body>

// Возведение в проценты
    function procent(a, b) {
        return b * 100 / a; 
    }
    
   window.onload = function() {
       
       var maxHp = document.getElementById('max');
       var curentHp = document.getElementById('curent');
       // Максимальное здоровье
       var hp = 100; 
       // Текущее здоровье (по умолчанию равное максимальному)
       var curHealth = hp; 
       // Проверка была ли запущена регенирация (по умолчанию значение: нет)
       var regen = 0;
       // Скорость регенирации
       var regenSpeed = 0.5;
       curentHp.onclick = function() {
           // Задаем урон
           var damag = prompt('дамаг'); 
           
           // Отнимаем урон от текущего значения здоровья
            curHealth -= damag; 
            console.log('Нанесенный урон ' + damag);
           // Проверяеем была ли запущена регенирация, если нет то запускаем
           if(regen != 1) { 
               regen = 1;
               console.log('запрашиваю запуск регенирации ');
               regeniration();
           } else {
               console.log('Продолжаю регенирацию');
           }
           // Запуск регенирации
           function regeniration() { 
               // Длинна полосы текущего здоровья равна проценту
               // Длинны полосы максимального здоровья
               curentHp.style.width = procent(hp, curHealth) + '%'; 
               console.log('запуск регенирации ');
               console.log('текущее здоровье: ' + curHealth + ' + ' + regenSpeed);
               
               // Регенирируем здоровье на процент
               // Пока текущее не станет равным максимальному
               if( curHealth != hp) {
                   curHealth+= regenSpeed;
                   setTimeout(regeniration, 500);
               } else if( curHealth == hp)  {
                   regen = 0;
                   console.log('регенирация закончена');
               }
           }
       }
   }

рони · #2 (**permalink**) 21.12.2017, 23:48

IDigle1,
то есть урон можно наносить множество раз, а восстановить только 1?

IDigle1 · #3 (**permalink**) 21.12.2017, 23:51

Восстановление происходит методом ежесекундного прибавления по единице к текущему здоровью. Регенирация срабатывает когда текущее значение меньше максимального.

рони · #4 (**permalink**) 22.12.2017, 00:19

IDigle1,
может регенерацию сделать постоянной и никогда не выключать?

IDigle1 · #5 (**permalink**) 22.12.2017, 00:24

Сообщение от рони

IDigle1,
может регенерацию сделать постоянной и никогда не выключать?

Тогда при попытке нанести урон 2 раза подряд - запустится 2 регенирации или текущее здоровье просто будет стремиться к бесконечности)

рони · #6 (**permalink**) 22.12.2017, 00:32

Сообщение от IDigle1

Тогда при попытке нанести урон 2 раза подряд - запустится 2 регенирации

кто запустит? зачем? если и так всегда идёт регенерация.

IDigle1 · #7 (**permalink**) 22.12.2017, 00:41

Все, до меня дошло)

рони · #8 (**permalink**) 22.12.2017, 00:57

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>

рони · #9 (**permalink**) 22.12.2017, 01:04

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() {
  var damag = prompt("дамаг");
  curHealth -= damag;
  if(curHealth <= 0) {
  window.clearTimeout(timer);
    curHealth = 0;
    curentHp.style.width = curHealth +"%"; maxHp.textContent = "капец" ;
  }
});
function regeniration() {
  if (curHealth != hp) {
    curHealth += regenSpeed;
    curHealth > hp && (curHealth = hp);
    curentHp.style.width = curHealth + "%";
  }
  timer = setTimeout(regeniration, 500);
}
regeniration();
         });
  </script>
</head>

<body>
<div id="max">
        <div id="curent"></div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript