左，右，上，下鍵盤使用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>