Как заставить элемент двигаться вперед и назад с помощью JavaScript? - PullRequest
Новая
       32

Как заставить элемент двигаться вперед и назад с помощью JavaScript?

0 голосов
/ 17 сентября 2018

Итак, у меня есть черная полоса, которую я хочу непрерывно перемещать вверх и вниз, пока не нажму кнопку «Стоп». В данный момент черный элемент вообще не двигается, и я уверен, что кнопка «Стоп» не справится со своей работой, если она это сделает. Я хотел бы, чтобы черная полоса подпрыгивала вверх и вниз, когда она ударяется о края контейнера (синий элемент). В конце концов я хотел бы создать игру, в которой вы должны остановить черную полосу внутри зеленой зоны, и каждый раз, когда вы делаете это правильно, она будет ускоряться, и зеленая область будет перемещаться случайным образом, но я предполагаю, что один шаг за раз. Я достаточно хорошо знаю java-скрипт и изо всех сил пытаюсь придумать, как я могу заставить его работать. Мой код в настоящее время стоит на этом 

function load() {
  var barMove = document.getElementById("small-bar");
  var pos = 600;
  var go = setInterval(start, 5);

  function start() {

    if (pos == 0) {
      pos--;
      barMove.style.top = pos + 'px';
    } else if (pos == 600) {
      pos++;
      barMove.style.bottom + 'px';
    }



  }
}
body {
  margin: 0;
  padding: 0;
  text-align: center;
}

#container {
  position: relative;
  background-color: brown;
  height: 800px;
  width: 800px;
  margin: 0 auto;
  margin-top: 75px;
}

#big-bar {
  position: relative;
  height: 600px;
  width: 200px;
  background: blue;
  left: 300px;
  top: 100px;
  overflow: hidden;
  border-radius: 20px 20px 20px 20px;
}

#medium-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 2;
  position: absolute;
  height: 100px;
  width: 200px;
  background: green;
  top: 200px;
}

#small-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 3;
  position: absolute;
  height: 50px;
  width: 200px;
  background: black;
  top: 600px;
}

#btn-go {
  position: absolute;
  top: 20px;
  right: 600px;
  padding: 5px 20px;
  border-radius: 10px;
  background: gold;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

#btn-stop {
  position: absolute;
  top: 20px;
  right: 75px;
  padding: 5px 20px;
  border-radius: 10px;
  background: red;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}
<div id="container">

  <div id="big-bar">

    <div id="medium-bar"></div>
    <div id="small-bar"></div>
  </div>

  <input id="btn-go" type="button" value="Go !" onclick="load()">
  <input id="btn-stop" type="button" value="Stop !" onclick="clearInterval(go)">

</div>

1 Ответ

0 голосов
/ 17 сентября 2018

Ваша логика говорит это ... Если pos равно нулю, вычтите одно из pos.Иначе, если pos равно 600, добавьте один.Кроме, он не будет корректировать его.

Должно быть что-то вроде 

var dir = 1;
var pos = 0;
function start () {
  if (pos>600) dir=-1
  else if (pos<0) dir=1
  pos += dir
  barMove.style.top = pos + 'px';
}

Отредактировано с его работой .... 

var interval;

function load() {
  var barMove = document.getElementById("small-bar");
  var pos = 600;
  interval = setInterval(start, 5);

  var dir = 1;
  var pos = 0;

  function start() {
    if (pos > 600) dir = -1
    else if (pos < 0) dir = 1
    pos += dir
    barMove.style.top = pos + 'px';
  }

}

function stop() {
  window.clearInterval(interval);
}
body {
  margin: 0;
  padding: 0;
  text-align: center;
}

#container {
  position: relative;
  background-color: brown;
  height: 800px;
  width: 800px;
  margin: 0 auto;
  margin-top: 75px;
}

#big-bar {
  position: relative;
  height: 600px;
  width: 200px;
  background: blue;
  left: 300px;
  top: 100px;
  overflow: hidden;
  border-radius: 20px 20px 20px 20px;
}

#medium-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 2;
  position: absolute;
  height: 100px;
  width: 200px;
  background: green;
  top: 200px;
}

#small-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 3;
  position: absolute;
  height: 50px;
  width: 200px;
  background: black;
  top: 600px;
}

#btn-go {
  position: absolute;
  top: 20px;
  right: 600px;
  padding: 5px 20px;
  border-radius: 10px;
  background: gold;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

#btn-stop {
  position: absolute;
  top: 20px;
  right: 75px;
  padding: 5px 20px;
  border-radius: 10px;
  background: red;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}
<div id="container">

  <div id="big-bar">

    <div id="medium-bar"></div>
    <div id="small-bar"></div>
  </div>

  <input id="btn-go" type="button" value="Go !" onclick="load()">
  <input id="btn-stop" type="button" value="Stop !" onclick="stop()">

</div>
...