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