Написал скрипт имитирующий шкалу здоровья, как в играх. Я новичок в 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('регенирация закончена');
}
}
}
}