Адаптируйте движение изображения к размеру окна в JavaScript

Question

Я сделал анимацию на своем сайте, которая перемещается при нажатии.Проблема в том, что в функции javascript, которая управляет им, я дал ряд координат, который подходит, только если браузер работает в полноэкранном режиме.Вот несколько примеров: https://imgur.com/a/Ug6eQlp и https://imgur.com/a/bPrVg5y Это моя функция JavaScript:

function init(){
   imgObj = document.getElementById('minion');
   immagine = document.getElementById('immagine_minion');
   imgObj.style.position= 'absolute'; 
   imgObj.style.top = '240px';
   imgObj.style.left = '-300px';
   imgObj.style.visibility='hidden';
   appaer();
 }

И это, например, метод, который перемещает егокак только я открою страницу:

function appaer(){
  immagine.src="../img/minion_dx.png";
  if (parseInt(imgObj.style.left)<200) {
   imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
   imgObj.style.visibility='visible';
   animate = setTimeout(appaer,20);
 } else 
 stop();
}

Как мне настроить ее под любое разрешение экрана?

Answer 1

это должно помочь вам начать

var stage_number = 0

function go_to_next_stage() {
  stage_number++
  var stage = document.getElementById("stage" + stage_number)
  me.style.left = getComputedStyle(stage).getPropertyValue("left")
  me.style.top = getComputedStyle(stage).getPropertyValue("top")
  if (stage_number > 3) stage_number = 0
}

img {
  position: absolute;
  left: -100px;
  top: 0;
  transition: left 2s, top 2s
}

.stage {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
}

#stage1 {
  left: 0;
  top: 0;
}

#stage2 {
  right: 0;
  top: 0;
}

#stage3 {
  right: 0;
  bottom: 0;
}

#stage4 {
  left: 0;
  bottom: 0;
}

div {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<img id="me" src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=100" />
<div onclick="go_to_next_stage()">click anywhere to continue</div>

<div class="stage" id="stage1">
</div>
<div class="stage" id="stage2">
</div>
<div class="stage" id="stage3">
</div>
<div class="stage" id="stage4">
</div>