Обработчик нескольких кнопок

[anton41k]

Помогите пожалуйста!
Происжодит простое перемещение картинки в DIV-е с помощью клавиш вперед, назад, влево, вправо. Нужно сделать обработку такого события, например: при зажатой клавиши влево, картинка перемещается влево, не отпускаючи ее нажимаем вправо, картинка перемещается вправо(до этого места все отлично работает), отпускаем ТОЛЬКО вправо и картинка сново движется влево(подскажите как организовать эту часть).

$('body').on('keydown', function(e) {
  e = e || event;
  var img = document.images['img_name'];
  var angl = Number(img.style.transform.replace(/[^.-\d+]/g,'')); 
  pos_img = [Number(img.style.left.replace(/[^.-\d+]/g,'')), Number(img.style.top.replace(/[^.-\d+]/g,''))];
  speed=4;
  switch(e.keyCode) {
    case 37: // влево
      if(angl == 270)
            {
              img.style.left = pos_img[0] - speed + 'px';
            }
      else 
        { 
          jQuery(img).rotate({angle:270});
        }
      break;
    case 38: // вверх
      if(angl == 0)
            {
              img.style.top = pos_img[1] - speed + 'px';
            }
      else
        {
          jQuery(img).rotate({angle:0});
        }
      break;
    case 39: // вправо
      if(angl == 90)
            {
              img.style.left = pos_img[0] + speed + 'px';
            }
      else
        {
          jQuery(img).rotate({angle:90});
        }
      break;
    case 40: // вниз
      if(angl == 180)
            {
              img.style.top = pos_img[1] + speed + 'px';
            }
      else
        {
          jQuery(img).rotate({angle:180});
        }
      break;
  }//end switch
});

[anton41k]

Намучал вот такой вариант подскажите может что не верно

var pressed = [];
function runOnKeys() {
  var codes = [37,38,39,40];
  
  document.onkeydown = function(e) {
    e = e || window.event;
    if(codes.indexOf(e.keyCode)!=-1 && pressed.indexOf(e.keyCode)==-1)
    {
      pressed[pressed.length]=e.keyCode
    }
  };

  document.onkeyup = function(e) {
    e = e || window.event;
    if(codes.indexOf(e.keyCode)!=-1)
    {
      for(i in pressed)
        {
          if(pressed[i]==e.keyCode)
            {pressed.splice(i,1)}
        }
    };
  };
}
runOnKeys()

function mov(){
$(".select").everyTime(70, function(i) {
  t=pressed[pressed.length-1]
  var img = document.images['img_name'];
  var angl = Number(img.style.transform.replace(/[^.-\d+]/g,'')); 
  pos_img = [Number(img.style.left.replace(/[^.-\d+]/g,'')), Number(img.style.top.replace(/[^.-\d+]/g,''))];
  speed=4;
  switch(t) {
    case 37: // влево
      if(angl == 270)
            {
              img.style.left = pos_img[0] - speed + 'px';
            }
      else 
        { 
          jQuery(img).rotate({angle:270});
        }
      break;
    case 38: // вверх
      if(angl == 0)
            {
              img.style.top = pos_img[1] - speed + 'px';
            }
      else
        {
          jQuery(img).rotate({angle:0});
        }
      break;
    case 39: // вправо
      if(angl == 90)
            {
              img.style.left = pos_img[0] + speed + 'px';
            }
      else
        {
          jQuery(img).rotate({angle:90});
        }
      break;
    case 40: // вниз
      if(angl == 180)
            {
              img.style.top = pos_img[1] + speed + 'px';
            }
      else
        {
          jQuery(img).rotate({angle:180});
        }
      break;
  }//end switch
});
}

мне кажется что то не так в соединении этих функций (everyTime), может у когото будет какой то вариант?!

[XelaNimed]

Здравствуйте.
Попробуйте использовать 2 обработчика: keydown и keyup. При keydown устанавливаете переменную соответствующего направления, при keyup разыменовываете, и при каждом событии проверяете что в данный момент у Вас нажато. Исходя из этого можно организовать движения дива по диагонали и т.д..