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

Question

我正在尝试制作 this sample puzzle .我想改变方向，如果拼图触摸底部窗口，那么它会像以前一样沿着右侧窗口转动，然后在触摸右侧窗口后再次移动到顶部窗口

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>

谁能帮帮我？

Answer 1

你想要这样的行为吗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";
}