将盒子移过正方形的角，然后以蛇形移动

Question

我希望框如图所示朝这些方向移动

并且我希望框如图所示朝这些方向移动

这是我的代码：

undefined

null

NaN

Answer 1

第一个脚本实时示例：

function myMove1() {
  var elem = document.getElementById("box1");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      myMove2();
    } else {
      pos++;
      elem.style.left = pos + "px";
    }
  }
}

function myMove2() {
  var elem = document.getElementById("box1");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      myMove3();
    } else {
      pos++;
      elem.style.top = pos + "px";
    }
  }
}

function myMove3() {
  var elem = document.getElementById("box1");
  var pos = 350;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 0) {
      clearInterval(id);
      myMove4();
    } else {
      pos--;
      elem.style.left = pos + "px";
    }
  }
}

function myMove4() {
  var elem = document.getElementById("box1");
  var pos = 350;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 0) {
      clearInterval(id);
    } else {
      pos--;
      elem.style.top = pos + "px";
    }
  }
}

#Container1 {
  width: 400px;
  height: 400px;
  position: relative;
  background-color: thistle
}

#box1 {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: teal;
}

<button onclick="myMove1()">MoveLeft</button>
<div id="Container1">
  <div id="box1"></div>
</div>

第二个实时脚本示例：

function myMove1() {
  var elem = document.getElementById("box1");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      myMove2();
    } else {
      pos++;
      elem.style.left = pos + "px";
    }
  }
}

function myMove2() {
  var elem = document.getElementById("box1");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 117) {
      clearInterval(id);
      myMove3();
    } else {
      pos++;
      elem.style.top = pos + "px";
    }
  }
}

function myMove3() {
  var elem = document.getElementById("box1");
  var pos = 350;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 0) {
      clearInterval(id);
      myMove4();
    } else {
      pos--;
      elem.style.left = pos + "px";
    }
  }
}

function myMove4() {
  var elem = document.getElementById("box1");
  var pos = 117;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 234) {
      clearInterval(id);
      myMove5();
    } else {
      pos++;
      elem.style.top = pos + "px";
    }
  }
}

function myMove5() {
  var elem = document.getElementById("box1");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      myMove6();
    } else {
      pos++;
      elem.style.left = pos + "px";
    }
  }
}

function myMove6() {
  var elem = document.getElementById("box1");
  var pos = 234;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      myMove7();
    } else {
      pos++;
      elem.style.top = pos + "px";
    }
  }
}

function myMove7() {
  var elem = document.getElementById("box1");
  var pos = 350;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 0) {
      clearInterval(id);
    } else {
      pos--;
      elem.style.left = pos + "px";
    }
  }
}

#Container1 {
  width: 400px;
  height: 400px;
  position: relative;
  background-color: thistle
}

#box1 {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: teal;
}

<button onclick="myMove1()">MoveLeft</button>
<div id="Container1">
  <div id="box1"></div>
</div>