使用箭头键移动 div 的 Javascript 函数不起作用？

Question

我一直在尝试使用键盘上的箭头键在页面上移动一个 div。它似乎不起作用。我以前让它工作，但由于某种原因它不再工作了。你能告诉我你认为问题是什么吗？我有一种感觉，它与 window.onkeydown 和 onkeyup 有关。

提前感谢您的帮助。

CSS--

 #log {
     position:absolute;
      width: 50px;
      height: 50px;
      border: 2px solid black;
      background-color: white;
      color: black;
      font-size: 20px;

      left: 20px;
    }

HTML---

<div id="log"></div>

JavaScript——

    var Keys = {
        up: false,
        down: false,
        left: false,
        right: false
    };

    var hero = {
        x: 0,
      y: 0
    };

    var log = document.getElementById("log");

    window.onkeydown = function(e){
         var kc = e.keyCode;
         e.preventDefault();

         if(kc === 37) Keys.left = true;
         if(kc === 38) Keys.up = true;
         if(kc === 39) Keys.right = true;
         if(kc === 40) Keys.down = true;
     };

    window.onkeyup = function(e){
         var kc = e.keyCode;
         e.preventDefault();

         if(kc === 37) Keys.left = false;
         if(kc === 38) Keys.up = false;
         if(kc === 39) Keys.right = false;
         if(kc === 40) Keys.down = false;
    };



    function main() {

        move();

    };



    function move(){

        if(Keys.up){
            hero.y -= 10;
            var p = hero.y;
            var t = p + 10;
            log.style.top = p + "px";
            log.style.bottom = t + "px";
            //color();
        }

        if(Keys.down){
            hero.y += 10;
            var g = hero.y;
            var q = g - 10;
            log.style.bottom = g + "px";
            log.style.top = q + "px";
            //color();

        }

        if(Keys.left) {
            hero.x -= 10;
            var z = hero.x;
            var q = z + 10;
            log.style.left = z + "px";
            log.style.right = q + "px";
            //color();
        }

        if(Keys.right){
            hero.x += 10;
            var z = hero.x;
            var q = z - 10;
            log.style.right = z + "px";
            log.style.left = q + "px";
           // color();
        }
    }

    setInterval(main, 50);

Answer 1

如果您愿意使用 jQuery，这可能会对您有所帮助。

$(document).ready(function() {
  var hero = $("#log");
  var speed = 1;
  var direction = {
    left: false,
    up: false,
    right: false,
    down: false
  };

  $(document).on('keydown', function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if (kc === 37) direction.left = true;
    if (kc === 38) direction.up = true;
    if (kc === 39) direction.right = true;
    if (kc === 40) direction.down = true;
  });

  $(document).on('keyup', function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if (kc === 37) direction.left = false;
    if (kc === 38) direction.up = false;
    if (kc === 39) direction.right = false;
    if (kc === 40) direction.down = false;
  });

  function move() {
    if (direction.left) hero.css("left", (hero.position().left - speed) + "px");
    if (direction.up) hero.css("top", (hero.position().top - speed) + "px");
    if (direction.right) hero.css("left", (hero.position().left + speed) + "px");
    if (direction.down) hero.css("top", (hero.position().top + speed) + "px");
  }

  setInterval(move, 1);
});

这是一个 Fiddle来证明结果。随意根据您的需要对其进行自定义。

更新

这是另一个 Fiddle接受同时按下的多个按钮。