Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2019, 12:06
Интересующийся
Отправить личное сообщение для Wimko Посмотреть профиль Найти все сообщения от Wimko
 
Регистрация: 05.10.2019
Сообщений: 13

Как создать динамические элементы ?
Всем привет. Изучаю js и захотел сделать некое моделирование движения объектов...
в общем хочу чтобы мои картинки двигались как бы бежали с одной стороны в другую в рамках diva. Но у меня получилось костылями создать только 1 объект img и одну функцию... как её зациклить ума не приложу, я больше чем уверен что листинг мой можно выкинуть, но я только учусь, и прописываю в основном стандартными функциями какие нагуглил. В общем хотелось бы чтобы эти объекты img создавались рандомно, в разные промежутки времени например от 5 до 10 секунд и одновременно двигались.... Если можно хотябы пример на упрощенных блоках залитых чтобы посмотреть как это делается...
Вот что у меня....
Код:
//CSS
.ghost_warrior {
	width: 100px;
	opacity: 0;
height: 100px;
margin-left: 1200px;
margin-top: 100px;
	position: absolute;
}
var op = -1;
function setOpacity() {
  if( op < 10 ) {
    ++op;
    document.getElementById('ghost_war').style.opacity=op/10;
    
  }
}
var op1 = 10;
function offOpacity() {
  if( op1 > 0 ) {
   --op1;
    document.getElementById('ghost_war').style.opacity=op1/10;

  }
}

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function crateGhost()
{
 var elemghost = document.createElement("img"); //создаем объект картинки противника
    elemghost.setAttribute("class", "ghost_warrior"); // присваиваем класс
          elemghost.setAttribute("src", "/img/ghost1.png"); //подгружаем нужную картинку в объект
          elemghost.setAttribute("id", "ghost_war"); // присваеваем объекту ID
            document.getElementById('view_data').appendChild(elemghost); //создаем объект в dive с ID view_data
          var posit_ghost = document.getElementById('ghost_war');
          document.getElementById('ghost_war').style.marginLeft=2000;
        style_pos_ghost = window.getComputedStyle(posit_ghost);
        posit_ghost = style_pos_ghost.getPropertyValue('Left');
        var drive_ghost = parseFloat(posit_ghost);
        var start_ghost = Date.now();
        var timer_g = setInterval(function() {
        var timePassed_g = Date.now() - start_ghost;
        var elementStyle = document.getElementById("ghost_war").style;
        var rect = ghost_war.getBoundingClientRect();
        if (rect.left<1340) {setTimeout( setOpacity, 200 );};
        if (rect.right<450) {setTimeout( offOpacity, 200 );};
        
        elementStyle.left=drive_ghost-timePassed_g / 9 + 'px';
        if (timePassed_g > 14000) clearInterval(timer_g);
        }, 20);
}


Опасити нужно для того, чтобы элемент проявлялся при попадании на рбочую область дива, т.к. изначально имея позиционирование абсолют, объект создается в углу браузера за пределами рабочего дива. Позицию абсолют сделал т.к. там у меня есть еще 1 объект который движется при нажатии клавишь, если поставить position в relative новый летящий объект и тот, который управляется начинают двигаться одновременно, а по задумке они не зависят друг от друга...
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2019, 12:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Wimko
хочу чтобы мои картинки двигались как бы бежали с одной стороны в другую в рамках diva
Вот тебе статейка...
https://javascript.ru/blog/Andrej-Pa...cii-JavaScript
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как вычленить вложенные элементы telez Элементы интерфейса 12 29.04.2014 18:57
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как создать таймер, как на Letitbit? free_style Javascript под браузер 1 01.07.2010 17:55
как создать елемент с вложеными елементами scuter Events/DOM/Window 11 14.05.2008 16:15