用箭头键移动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);
});

这是证明结果的小提琴 。 随时根据您的需求进行自定义。

UPDATE

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