Как можно оптимизировать код данный 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('регенирация закончена'); } } } } |
IDigle1,
то есть урон можно наносить множество раз, а восстановить только 1? |
Восстановление происходит методом ежесекундного прибавления по единице к текущему здоровью. Регенирация срабатывает когда текущее значение меньше максимального.
|
IDigle1,
может регенерацию сделать постоянной и никогда не выключать? |
Цитата:
|
Цитата:
|
Все, до меня дошло)
|
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> |
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> |
Часовой пояс GMT +3, время: 20:07. |