Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.11.2019, 16:23
Аспирант
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 72

Повторная обработка события
Приветствую. Какие есть способы повторно реализовать уже отработавшее событие (естественно, без перезагрузки страницы). Нужно, чтобы рыцари били друг друга при каждом клике, а не только 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

Последний раз редактировалось Иса Мирзоев, 13.11.2019 в 17:08.
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2019, 08:21
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от Иса Мирзоев
Какие есть способы повторно реализовать уже отработавшее событие
Повторное воспроизведение css-анимации не предусмотрено, такой есть способ.
Сообщение от Иса Мирзоев
У меня совсем нет идей, как в css задать переменную в кей-фреймах
Есть концепт переменных в css: custom properties и var().

Сss-анимация скорее для настольных игр подойдет (карты, шахматы), для легких эффектов.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Three.js - обработка повторного события на объекте alex.zubkov777@gmail.com Общие вопросы Javascript 1 23.03.2019 19:25
Обработка события click для iframe dqrest Events/DOM/Window 0 22.09.2015 10:17
Обработка события внутри события grifangel Общие вопросы Javascript 6 04.09.2014 12:34
Обработка события после закрытия модального окна byaka Events/DOM/Window 3 11.08.2012 19:19
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 17:01