Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2017, 22:38
Интересующийся
Отправить личное сообщение для IDigle1 Посмотреть профиль Найти все сообщения от IDigle1
 
Регистрация: 26.06.2017
Сообщений: 11

Как можно оптимизировать код данный JS код?
Написал скрипт имитирующий шкалу здоровья, как в играх. Я новичок в 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, 22:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

IDigle1,
то есть урон можно наносить множество раз, а восстановить только 1?
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2017, 22:51
Интересующийся
Отправить личное сообщение для IDigle1 Посмотреть профиль Найти все сообщения от IDigle1
 
Регистрация: 26.06.2017
Сообщений: 11

Восстановление происходит методом ежесекундного прибавления по единице к текущему здоровью. Регенирация срабатывает когда текущее значение меньше максимального.
Ответить с цитированием
  #4 (permalink)  
Старый 21.12.2017, 23:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

IDigle1,
может регенерацию сделать постоянной и никогда не выключать?
Ответить с цитированием
  #5 (permalink)  
Старый 21.12.2017, 23:24
Интересующийся
Отправить личное сообщение для IDigle1 Посмотреть профиль Найти все сообщения от IDigle1
 
Регистрация: 26.06.2017
Сообщений: 11

Сообщение от рони Посмотреть сообщение
IDigle1,
может регенерацию сделать постоянной и никогда не выключать?
Тогда при попытке нанести урон 2 раза подряд - запустится 2 регенирации или текущее здоровье просто будет стремиться к бесконечности)

Последний раз редактировалось IDigle1, 21.12.2017 в 23:28.
Ответить с цитированием
  #6 (permalink)  
Старый 21.12.2017, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

Сообщение от IDigle1
Тогда при попытке нанести урон 2 раза подряд - запустится 2 регенирации
кто запустит? зачем? если и так всегда идёт регенерация.
Ответить с цитированием
  #7 (permalink)  
Старый 21.12.2017, 23:41
Интересующийся
Отправить личное сообщение для IDigle1 Посмотреть профиль Найти все сообщения от IDigle1
 
Регистрация: 26.06.2017
Сообщений: 11

Все, до меня дошло)
Ответить с цитированием
  #8 (permalink)  
Старый 21.12.2017, 23:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

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, 00:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Операционная Система на JS Icat Общие вопросы Javascript 3 17.04.2018 22:54
Как писать код который легко поддерживать, расширять, читать. Policeman Общие вопросы Javascript 3 24.03.2012 03:40
можно ли с помощью js написать код для симуляции нажатия на клавиш. KamalovRadik Мобильный JavaScript 7 17.02.2012 20:27
Как получит ссылку на элемент внутри которого запустили JS код? aRpi Events/DOM/Window 20 02.10.2011 12:36
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 20:34