Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Обработчик нескольких кнопок (https://javascript.ru/forum/misc/50659-obrabotchik-neskolkikh-knopok.html)

anton41k 06.10.2014 16:58

Обработчик нескольких кнопок
 
Помогите пожалуйста!
Происжодит простое перемещение картинки в 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 06.10.2014 21:45

Намучал вот такой вариант подскажите может что не верно
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 07.10.2014 19:05

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


Часовой пояс GMT +3, время: 18:08.