我正试图用keydown动画图像，但它不起作用

Question

我希望#character可以向上，向下，向左或向右移动，具体取决于按下哪个箭头键。我无法弄清楚我的代码有什么问题。

$("#gamescreen").keydown(function(key) {
  switch(parseInt(key.which, 10)) {
    case 38:
      $("#character").animate({top: "-=10px"});
      break;
    case 40:
      $("#character").animate({top: "+=10px"});
      break;
    case 37:
      $("#character").animate({left: "-=10px"});
      break;
    case 39:
      $("#character").animate({right: "-=10px"});
      break;
    default:
      break;
  }
});

这可能不重要，但#character实际上是一个包含四个图像的div。所有图像的位置都设置为绝对值。

Answer 1

gamescreen div需要关注以捕获keydown事件。你有两个我能想到的选择：

1）将tabindex="1"添加到gamescreen div，以便它可以获得焦点。

2）不要绑定到div的keydown事件，而是绑定到body的keydown事件。请参阅此jsFiddle demo。