Приветствую. Какие есть способы повторно реализовать уже отработавшее событие (естественно, без перезагрузки страницы). Нужно, чтобы рыцари били друг друга при каждом клике, а не только 1 раз.
п.с. и еще, параллельно, можно подсказать, как сделать так, чтобы полоска хп уменьшалась каждый раз в зависимости от события, как бы "запоминая" свое предыдущее положение (типа, сначала 100% полоски, после первого клика - 70%, после второго клика - 40% и т.д.). У меня совсем нет идей, как в css задать переменную в кей-фреймах, там только конкретные точки задаются. Можно пропискать отдельные фреймы под количество кликов, НО я не знаю, как через js внедряться в эти кей-фреймы. В общем, сорян если запутал, я обычный новичок, который хочет много, а умеет - мало))
$(".knight")
.click(
function(){
$(this).css("animationPlayState","running")
$(".dmg").css("animationPlayState","running")
}
)
$(".otherKnight")
.click(
function(){
$(this).css("animationPlayState","running")
$(".dmg3").css("animationPlayState","running")
}
)
css-код
div.knight{
width:500px;
height:500px;
margin-left:500px;
background:url("medival2png.png") no-repeat;
position:absolute;
animation: test 1s paused;
cursor: pointer;
}
div.otherKnight{
width:500px;
height:300px;
margin-left:10px;
background:url("medival3.png") no-repeat;
animation: test2 1s paused;
cursor: pointer;
}
div.dmg{
background-color: green;
width:105px;
height:28px;
margin-left:120px;
margin-top:30px;
animation: color 1.2s forwards paused;
position: absolute;
}
div.dmg2{
border: 4px solid red;
width:100px;
height:20px;
margin-left:120px;
margin-top:30px;
position: absolute;
}
div.dmg3{
background-color: green;
width:105px;
height:28px;
margin-left:620px;
margin-top:30px;
animation: color 1.2s forwards paused;
position:absolute;
}
div.dmg4{
border: 4px solid red;
width:100px;
height:20px;
margin-left:620px;
margin-top:30px;
position:absolute;
}
@keyframes test{
0%{margin-left:500px;}
50% {margin-left:50px}
100%{margin-left:500px;}
}
@keyframes color{
0%{background-color:green;width:105px}
50% {background-color:red;}
100% {background-color:green;width:80px}
}
@keyframes test2{
0%{margin-left:10px;}
50% {margin-left:500px}
100%{margin-left:10px;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="knight"></div>
<div class="otherKnight"></div>
<div class="dmg"></div>
<div class="dmg2"></div>
<div class="dmg3"></div>
<div class="dmg4"></div>
<script src="script.js"></script>
</body>
</html>
Картинки также заливаю в нужном порядке (первую назвать medival2png.png, а вторую medival3.png)
https://radikalno.ru/full/2019/11/13...-full.png.html
https://radikalno.ru/full/2019/11/13...-full.png.html
