Javascript-форум - Как создать динамические элементы ?

Всем привет. Изучаю 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 новый летящий объект и тот, который управляется начинают двигаться одновременно, а по задумке они не зависят друг от друга...