Переместите прямоугольник по углам квадрата, затем переместите его в виде змеи - PullRequest
Новая
       3

Переместите прямоугольник по углам квадрата, затем переместите его в виде змеи

0 голосов
/ 30 июня 2019

Я хочу, чтобы окно двигалось в этих направлениях, как показано

in the picture

, и я хочу, чтобы поле двигалось в этих направлениях, как показано

in the picture

Это мой код: 

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

    function frame() {
        if (pos == 350) {
            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>

1 Ответ

0 голосов
/ 30 июня 2019

Первый пример сценария: 

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>
...