如何改变一个简单拼图的方向

Question

I am trying to make this sample puzzle . I want to change direction if the puzzle touch bottom window then it will turn along the right window as the previous and again after touching the right window it will move to top window

 let delayInSecond = 1000; //1 second let squireElem = document.querySelector('.squire'); let maxHeight = window.innerHeight; let posTop = 50; let posRight = 0; let posBottom = 0; let posLeft = 0; let timer = setInterval(squire, delayInSecond); function squire() { let elemHeight = squireElem.offsetHeight; if (maxHeight === elemHeight) { clearInterval(timer); } else { posTop += 10; posRight += 10; posBottom += 10; posLeft += 10; squireElem.style.top = posTop + 'px'; squireElem.style.left = posLeft + 'px'; } } 

 * { margin: 0; padding: 0; } .squire { width: 100px; height: 100px; background-color: blue; position: absolute; top: 50px; } 

 <div class="squire"></div> 

Can anyone help me?

Answer 1

Do you want a behavior like this https://codepen.io/benrampon/pen/eoRaVE ?

let delayInSecond = 100;
let squireElem = document.querySelector(".squire");
let windowHeight = window.innerHeight;
let windowWidth = window.innerWidth;
let posTop = 50;
let posRight = 0;
let posBottom = 0;
let posLeft = 0;
let goToRight = true
let goToBottom = true

let timer = setInterval(squire, delayInSecond);
function maxStep(max,range) {
  return max <= range ? max : range
}
function squire() {
  let elemBottomPosition = squireElem.offsetTop + squireElem.offsetHeight;
  let elemTopPosition = squireElem.offsetTop;
  let elemRightPosition = squireElem.offsetLeft + squireElem.offsetWidth;
  let elemLeftPosition = squireElem.offsetLeft;
  if(elemLeftPosition<=0){
    goToRight = true
  }else if(elemRightPosition>= windowWidth){
    goToRight = false    
  }
  if(elemTopPosition<=0){
    goToBottom = true
  }else if(elemBottomPosition>= windowHeight){
    goToBottom = false    
  } 
  const stepWidth = goToRight ? maxStep(10,windowWidth-elemRightPosition) : maxStep(10,elemLeftPosition)
  const stepHeight = goToBottom ? maxStep(10,windowHeight-elemBottomPosition) : maxStep(10,elemTopPosition)
  posTop = goToBottom ? posTop+stepHeight : posTop-stepHeight;
  posLeft = goToRight ? posLeft + stepWidth : posLeft-stepWidth;
  squireElem.style.top = posTop + "px";
  squireElem.style.left = posLeft + "px";
}

Answer 2

    let delayInSecond = 100; //100 millisecond
    let squireElem = document.querySelector('.squire');
    let maxHeight = window.innerHeight;
    let posTop = 50;
    let posRight = 0;
    let posBottom = 0;
    let posLeft = 0;
    let correction=50;
    squireElem.style.top="50px";
    let timer = setInterval(squire, delayInSecond);
    let maxWidth=window.innerWidth;
    function squire() {
    let elemHeight = parseInt(squireElem.style.top);
    if( elemHeight<maxHeight-correction&&posLeft<=correction) {
    posTop += 10;
    squireElem.style.top = posTop + 'px';
    }

   else if(elemHeight>=maxHeight-correction&&posLeft<maxWidth-correction) {
    posLeft+= 10;
    squireElem.style.left = posLeft + 'px';
   }
    else if(elemHeight <=maxHeight-correction&&posLeft>=maxWidth-correction&&posTop>50) {
    posTop -= 10;
    squireElem.style.top = posTop + 'px';

   }
   else if(posTop<=correction&&posLeft>=correction) {

    posLeft -= 10;
    squireElem.style.left = posLeft + 'px';

   }
   else{   }

   }