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

我正在努力使自己变得更好。我想改变方向，如果拼图触摸底部窗口，那么它会像上一个一样沿着右侧窗口旋转，在触摸右侧窗口后，它会再次移动到顶部窗口

设delayUnsecond=1000//1秒
设squireleem=document.querySelector（“.squire”）；
设maxHeight=window.innerHeight；
设posTop=50；
设posRight=0；
设posBottom=0；
设posLeft=0；
让定时器=设定间隔（squire，DelayInsond）；
功能乡绅（）{
让elemHeight=squireleem.离开视线；
如果（最大高度===高度）{
清除间隔（计时器）；
}否则{
术后+=10；
posRight+=10；
posBottom+=10；
posLeft+=10；
squireElem.style.top=posTop+'px'；
squirelem.style.left=posLeft+'px'；
}
}

*{
保证金：0；
填充：0；
}
乡绅先生{
宽度：100px；
高度：100px；
背景颜色：蓝色；
位置：绝对位置；
顶部：50px；
}

---

你想要这样的行为吗

设delayUnsecond=100；
设squireleem=document.querySelector（“.squire”）；
设windowHeight=window.innerHeight；
设windowWidth=window.innerWidth；
设posTop=50；
设posRight=0；
设posBottom=0；
设posLeft=0；
让goToRight=true
设goToBottom=true
让定时器=设定间隔（squire，DelayInsond）；
函数maxStep（最大值，范围）{
返回max
let delayUnsecond=100；//100毫秒
设squireleem=document.querySelector（“.squire”）；
设maxHeight=window.innerHeight；
设posTop=50；
设posRight=0；
设posBottom=0；
设posLeft=0；
让校正=50；
squirelem.style.top=“50px”；
让定时器=设定间隔（squire，DelayInsond）；
设maxWidth=window.innerWidth；
功能乡绅（）{
让elemHeight=parseInt（squirelem.style.top）；
如果（elemHeightI已经添加了自定义步长以适应窗口：）我的回答假设您只希望框以常规模式在屏幕上移动，而不是用于像“蛇游戏”这样的小型项目。请注意，我确实添加了squirelem.style.top=“50px”；在JavaScript中，为JavaScript提供posTop是什么的第一手信息，而不返回“未定义”
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";
}

    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{   }

   }