Перемещение div вверх и вниз с помощью стрелок на клавиатуре

Question

Я хочу иметь возможность перемещать div с идентификатором cube с помощью стрелок на клавиатуре.Движение влево и вправо работает правильно, но я не могу заставить его двигаться вверх и вниз.

var output=document.getElementById("output");
var cube=document.getElementById("cube");
var left=0;
var top=0;

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;

    switch (key) {
      case 38:          //arrow up
        top = top - 10;
        cube.style.top= top + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        top = top + 10;
        cube.style.top= top + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

...

Answer 1

Вы не можете иметь глобальную переменную с именем "top".

top - это хост-объект, он указывает на самый внешний оконный объект и наиболее полезен при использовании внутри фрейма https://humanwhocodes.com/blog/2007/06/03/javascript-variable-names-you-shouldn-t-use/

Ваш код работает правильно, если имя переменной изменено или если оно находится в области, отличной от окна (например, внутри приемника событий).

var output=document.getElementById("output");
var cube=document.getElementById("cube");
var left=0;
var t=0;

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;
    e.preventDefault(); // used to prevent window scroll on up/down keys

    switch (key) {
      case 38:          //arrow up
        t = t - 10;
        cube.style.top= t + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        t = t + 10;
        cube.style.top= t + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

#cube {position: absolute}

<div id="cube">CUBE</div>
<div id="output">OUTPUT</div>

(обратите внимание, что при выполнении вышеупомянутого вы должны щелкнуть внутри фрагмента, чтобы получить ключевые события, чтобы достичь его)

Answer 2

Во-первых, ваш код перемещает куб влево и вправо, но только если вы изначально настроили куб с помощью position:absolute или position:relative.Вы не можете перемещать элементы, которые находятся в нормальном потоке документов, если вы не «освободите их» из этого потока с помощью position.

Следующая проблема заключается в том, что вы жестко программируете top и leftвместо того, чтобы устанавливать их в значения, которые представляют текущее местоположение куба.Вам нужно переместить их, чтобы они были внутри вашего обработчика событий, что также изменит их область видимости, а в случае top (который также является глобальной переменной) это изменение области действия предотвратит конфликты имен.

Кроме того, вместо получения значений для top и left из свойства .style, получите их из окончательного вычисляемого стиля с помощью getComputedStyle(), потому что если у вашего элемента не установлен встроенный стиль для негоначать с style.top и style.left вернет undefined.

var output=document.getElementById("output");
var cube=document.getElementById("cube");

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;
    
    // You need to move the cube relative to where it currently is
    // And, you should get the current style based on the final computed value, not the inline style
   var left= parseInt(getComputedStyle(cube).left);
   var top = parseInt(getComputedStyle(cube).top);

    switch (key) {
      case 38:          //arrow up
        top = top - 10;
        cube.style.top= top + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        top = top + 10;
        cube.style.top= top + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

#cube { width:50px; height:50px; border:1px solid black; position:absolute; }

<div id="output"></div>
<div id="cube"></div>

Answer 3

Возможно, вам просто не хватает position:absolute; для кубического деления.

См. Фрагмент ниже:

var output=document.getElementById("output");
var cube=document.getElementById("cube");
var left=0;
var topPx=0;

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;

    switch (key) {
      case 38:          //arrow up
        topPx = topPx - 10;
        cube.style.top= topPx + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        topPx = topPx + 10;
        cube.style.top= topPx + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

#cube{
  width:100px;
  height:100px;
  background:red;
  position:absolute;
}

#output{
  float:right;
}

  <div id="cube">
  
  </div>
  <div id="output">
</div>

Вы можете проверить это здесь