Функция Javascript не изменяет CSS HTML-Div при вызове - PullRequest
Новая
       10

Функция Javascript не изменяет CSS HTML-Div при вызове

0 голосов
/ 14 мая 2019

Я пытаюсь создать функцию для моей игры в понг, чтобы мяч перемещался внутри кадра. Когда я вызываю функцию, я использую функцию setStyle () для изменения положения шара каждые 100 миллисекунд.

После того, как я увидел, что это не работает, я консоль зарегистрировал левую и верхнюю позиции, чтобы найти, что функция вызывается, но количество пикселей, в которых она находилась, было одинаковым. 

//Javascript

function ballMove(){
  var x = 5;
  var y = 5;
  var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
  var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
  var ballLeft = getStyle('ball', 'left');
  var ballTop = getStyle('ball', 'top');
  var minLeft = getStyle('frame', 'left');
  var minTop = getStyle('frame', 'top');
  if(ballTop >= minTop){
    setStyle('ball', 'top', (ballTop + y) + "px");
  }
  else if(ballTop <= maxHeight){
    setStyle('ball', 'top', (ballTop - y) + "px");
  }
  if(ballLeft >= minLeft){
    setStyle('ball', 'left', (ballLeft + x) + "px");
  }
  else if(ballLeft <= maxWidth){
    setStyle('ball', 'left', (ballLeft - x) + "px");
  }
  console.log(ballLeft);
  console.log(ballTop);
}
function startIntervals(){
  setInterval(ballMove, 100);
  console.log("starting...");
}

Вот мой css 

#ball{
  position: relative;
  background-color: white;
  height: 10px;
  width: 10px;
  left: 50px;
}

и HTML 

<body onload="startIntervals();">
    <div id="main-div">
      <div id="title">Pong</div>
      <div id="frame">
        <div id="paddlewasd">
          </div>
          <div id="paddlearrow">
            </div>
            <div id="ball">
              </div>
        </div>
        </div>

Я ожидал, что мяч будет двигаться, но вместо этого вызывается функция, а левая и верхняя позиции остаются прежними. Мой код

1 Ответ

0 голосов
/ 14 мая 2019

Хотя это довольно существенно зависит от остальной части кода, который не был опубликован, следующие реализации getStyle и setStyle вместе с определением css # frame позволяет шарику перемещаться по диагонали на 5 пикселей вправо и вниз каждые 100 миллисекунд 

function getStyle(id, style) {
  var element = document.getElementById(id);
  var computedStyle = window.getComputedStyle(element);
  var selectedStyle = computedStyle[style];

  // Check if the style value matches a 'pixel' string format, if it does extract the numeric part and parse it as an integer
  var pixelTokens = /([\d]*)px$/.exec(selectedStyle);
  if (pixelTokens) {
    return parseInt(pixelTokens[1]);
  }

  return selectedStyle;
}

function setStyle(id, style, value) {
  var element = document.getElementById(id);
  return element.style[style] = value;
}

function ballMove() {
  var x = 5;
  var y = 5;
  var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
  var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
  var ballLeft = getStyle('ball', 'left');
  var ballTop = getStyle('ball', 'top');
  var minLeft = getStyle('frame', 'left');
  var minTop = getStyle('frame', 'top');
  if (ballTop >= minTop) {
    setStyle('ball', 'top', (ballTop + y) + "px");
  } else if (ballTop <= maxHeight) {
    setStyle('ball', 'top', (ballTop - y) + "px");
  }
  if (ballLeft >= minLeft) {
    setStyle('ball', 'left', (ballLeft + x) + "px");
  } else if (ballLeft <= maxWidth) {
    setStyle('ball', 'left', (ballLeft - x) + "px");
  }
  console.log(ballLeft);
  console.log(ballTop);
}

function startIntervals() {
  setInterval(ballMove, 100);
  console.log("starting...");
}
#ball {
  position: relative;
  background-color: white;
  height: 10px;
  width: 10px;
  left: 50px;
}

#frame {
  width: 300px;
  height: 300px;
  top: 0px;
  left: 0px;
  background-color: green;
}
<body onload="startIntervals();">
  <div id="main-div">
    <div id="title">Pong</div>
    <div id="frame">
      <div id="paddlewasd">
      </div>
      <div id="paddlearrow">
      </div>
      <div id="ball">
      </div>
    </div>
  </div>
</body>
...