左，右，上，下键盘使用JS移动对象

Question

我想使图像在屏幕上左右移动。 它只能上下移动我无法修复我的代码

这是我到目前为止所做的

frame.on ("keydown", function(e)  {
  zog(e.keyCode); // e is an event object
  if (e.keyCode == 38) {
    dir = -1;
  } else if(e.keyCode == 40){
    dir = 1;
  } else if (e.keyCode == 37){ //left
    dir = 0;
  } else if (e.keyCode == 39){ //right
    dir = 0;
  }
});
frame.on ("keyup", function()  {
  dir = 0;
});

Answer 1

每次您按下键盘上的箭头按钮时，以下内容都会更新盒子的位置。 记住上/下将使页面上/下滚动。 但这是一个比较难解决的问题;）

 (function($){$(function(){ var box = $('.box'); $('body').on('keyup', function(e){ if (e.keyCode == 38) { box.css('top', box.offset().top - 1); } else if(e.keyCode == 40){ box.css('top', box.offset().top + 1); } else if (e.keyCode == 37){ //left box.css('left', box.offset().left - 1); } else if (e.keyCode == 39){ //right box.css('left', box.offset().left + 1); } }); })})(jQuery); 

 .box { width: 100px; height: 100px; border: 1px solid #000; position: absolute; top: 0px; left: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"></div>