Как можно оптимизировать код данный 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, время: 11:07. |