Остановить перемещение js-анимации

Привет всем, я новичок в JavaScript. Сейчас я создаю браузерную игру и нашел немного кода, как создать анимацию.

Например, изображение или другой div. Проблема в том, что мне нужно, чтобы он перемещался внутри MyContainer размером 100 на 100 пикселей.

Он просто идет в правый нижний угол моего экрана.

Как остановить анимацию например через 100 пикселей?

Вот мой код:

 


//css


#myContainer {


width: 100px;


height: 100px;


position: relative;


}


#myAnimation {


background-image: url("images/ships/ship1.png");


background-size: cover; 


background-repeat: no-repeat;


height:45px;


left:10px;


position:absolute;


top:10px;


width:25px


}


//js


function myMove() {


alert("example");


var elem = document.getElementById("myAnimation"); 


var pos = 0;


var id = setInterval(frame, 10);


function frame() {


if (pos == 350) {


clearInterval(id);


} else {


pos++;


elem.style.top = pos + 'px';


elem.style.left = pos + 'px';


}


}


}


//html


<td>


<a href="#">


<div id ="myContainer">


<div class="container">


<div id ="myAnimation"></div>


<img src="worldmap/'.$grid.'/row-1-col-1.png">


<div class="bottom-left">


<div class="gts">A1</div>


</div>


</div>


</a>


</td>

Код (разметка): Итак, по сути, вопрос в том, как заставить анимацию двигаться только в моем контейнере?

Разве Genesis Framework не для WordPress? Я не использую это.

это система управления контентом.

Я создаю что-то с нуля. Я сейчас действительно в замешательстве. Вчера я подумал, давайте определим все направления движения и посмотрим, как они работают. Как видно на скриншотах ранее, когда вы идете сверху вниз или слева направо.

Корабль прячется за следующей сеткой. Но... Когда я двигаюсь справа налево или снизу вверх, оно появляется перед изображением так, как я хочу, и больше не скрывается. Это из-за того, что изображения создаются после анимации? Это мой код:

 


#myAnimationRight {


background-image: url("images/ships/ship1right.png");


background-size: cover; 


background-repeat: no-repeat;


height:30px;


position:absolute;


width:50px;


top:30%


}


#myAnimationLeft {


background-image: url("images/ships/ship1left.png");


background-size: cover; 


background-repeat: no-repeat;


height:30px;


position:absolute;


width:50px;


top:30%;


right: 1px


}


<script>


function myMoveRight() {


var elem = document.getElementById("myAnimationRight"); 


var pos = 0;


var id = setInterval(frame, 50);


function frame() {


if (pos == 105) {


clearInterval(id);


} else {


pos++;


elem.style.left = pos + 'px';


}


}


}


</script>


<script>


function myMoveLeft() {


var elem = document.getElementById("myAnimationLeft"); 


var pos = 0;


var id = setInterval(frame, 50);


function frame() {


if (pos == 105) {


clearInterval(id);


} else {


pos++;


elem.style.right = pos + 'px';


}


}


}


</script>


<td>


<a href="#">


<div id ="myContainer">


<div class="container">


<div id ="myAnimationRight"></div>


<img src="worldmap/'.$grid.'/row-1-col-2.png">


<div class="bottom-left">


<div class="gts">A1</div>


</div>


</div>


</a>


</td>


<td>


<a href="#">


<div id ="myContainer">


<div class="container">


<div id ="myAnimationLeft"></div>


<img src="worldmap/'.$grid.'/row-1-col-3.png">


<div class="bottom-left">


<div class="gts">A1</div>


</div>


</div>


</a>


</td>

Код (разметка):

Говорил тебе.. У меня еще одна маленькая проблема. Взгляните на эти 2 скриншота. На первом вы можете увидеть корабль в сетке А1. У меня есть хорошая анимация, чтобы переместить ее в B1. Посмотрите на второе изображение: когда корабли перемещаются к сетке B1, они идут позади нее, а не перед ней в A1. Как это исправить? И есть ли способ удалить изображение после перемещения?

Ты храбрее меня. Я мог бы использовать что-то вроде модуля Flexible Box Layout в CSS3. Если на вашей веб-странице есть поле, которое меняет размер, Flexbox изменит элементы внутри этого поля в соответствии с указанными вами параметрами… так просто.