Как мне сделать движение весла в JS - PullRequest
Новая
       11

Как мне сделать движение весла в JS

0 голосов
/ 06 ноября 2019

как заставить это окно перемещаться с использованием JS Я пытаюсь, чтобы моя функция указывала на функцию, а она на нее не указывает.

Я пытался вызвать функцию с помощью метода call, затем япопытался применить метод.

У меня также есть анимация, работающая в CSS, и мне было интересно, правильно ли я создаю действие в JS. 

console.log("hi");
var animation = {
  move: function BoxRight(elem, pos, id) {
    return this.elem1 + this.pos + this.id;
  }
};

var elem1 = document.getElementById("RightAnimate");
var pos = 0;
var id = setInterval(animation.frame, 5000);
var x = function frame() {
  if (pos == 350) {
    clearInterval(id);
  } else {
    pos++;
    elem1.style.top = pos + "px";
    elem1.style.left = pos + "px";
  }
};

function arrowFunction(event) {
  var x = event.key;
  console.log(x);
  if (x == "ArrowLeft") {
    alert("You pressed the 'left' key!");
  }
  // You had an extra slash here
  // I want to call it down here!!
  // this is the issue

  if (x == "ArrowRight") {
    animation.BoxRight.call(elem1, 0, id);

    function frame() {
      return this;
    }
  }
}
  body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

#Right-animate {
  width: 100px;
  height: 100px;
  background-color: deeppink;
  position: absolute;
}

@-webkit-keyframes move-right {
  0% {
    background-color: red;
    right: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    right: 200px;
    top: 0px;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello!</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div id="container">
    <!-- You are missing the end quote here. Also need a tabindex -->
    <div id="Right-animate" onkeydown="arrowFunction(event)" tabindex="0"></div>
  </div>
</body>

</html>

1 Ответ

1 голос
/ 06 ноября 2019

Не очень понятно, что вы пытаетесь сделать. Я предполагаю, что вы хотите анимировать div для ответа на нажатия клавиш.

Вот упрощенный пример, который использует CSS-анимацию для достижения этой цели: 

const offsetDistance = 50;
const div = document.getElementById('Right-animate');
let offset = { x: 0, y: 0 };

document.body.addEventListener('keydown', event => {
  if (event.key === 'ArrowLeft') {
    offset.x -= offsetDistance;
  } else if (event.key === 'ArrowRight') {
    offset.x += offsetDistance;
  } else if (event.key === 'ArrowUp') {
    offset.y -= offsetDistance;
  } else if (event.key === 'ArrowDown') {
    offset.y += offsetDistance;
  }
  div.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
});
#Right-animate {
  width: 100px;
  height: 100px;
  background-color: deeppink;
  position: absolute;
  transition: transform 0.5s;
}
<div id="Right-animate"></div>
...