WEB
            Дизайн
Вторник, 15.09.2026, 03:22
Приветствую Вас Гость | RSS
Главная страница | Как переместить DIV с помощью стрелок? - Форум web-программистов и дизайнеров | Регистрация | Вход
Добро пожаловать Гость на наш форум [ Новые сообщения · Участники · Правила форума · FAQ · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Как переместить DIV с помощью стрелок?
Snuper Дата: Понедельник, 05.10.2009, 12:12  |  Сообщение №  1
Новичок
Group: Пользователи
Posts: 1
Reputation: 0
Status: нет меня
Привет всем!
У меня есть проблема: нужно написать скрипт для реализации перемещения DIV’а при нажатии стрелок на клавиатуре, то есть, я жму вправо - DIV едет вправо, влево - едет влево, жму вправо и вверх одновременно - едет по диагонали. Вот мой вариант
Code

   var Keys = new Array();
   var Object = document.getElementById("move");
   var Speed = 5;

   function KeyCodeGet(e)
   {
     if (window.event)
       return window.event.keyCode;
     else
     if (e)
       return e.keyCode;
   };

   function KeyPress(e)
   {
     var LLeft = parseInt(Object.style.left);
     var LTop = parseInt(Object.style.top);
     var LKey = KeyCodeGet(e);
     if (Keys.indexOf(LKey) < 0)
       Keys.push(LKey);
     for(var i = 0; i < Keys.length; i++)
     {
       LKey = Keys[i];
       switch(LKey)
       {
         case 37:{
           LLeft = LLeft - Speed;
           break;
         };
         case 38:{
           LTop = LTop - Speed;
           break;
         };
         case 39:{
           LLeft = LLeft + Speed;
           break;
         };
         case 40:{
           LTop = LTop + Speed;
           break;
         };
         default:{
           break;
         }
       };
     }
     Object.style.left = LLeft + "px";
     Object.style.top = LTop + "px";
   };
    
   function KeyUp(e)
   {
     var LKey = KeyCodeGet(e);
     Keys.splice(Keys.indexOf(LKey), 1);
   };
    
   document.onkeypress = KeyPress;
   document.onkeyup = KeyUp;

Но здесь есть одна маленькая проблема:
- я жму вправо - едет вправо;
- удерживая стрелку вправо жму вверх - едет по диагонали;
- отпускаю вправо - едет вверх - вроди всё норм.
- отпускаю только что нажатую стрелку вверх - ехать перестает, хотя должно дальше ехать вправо

Я думаю, что причина в том, что реализация onKeyPress или OnKeyDown сделана таким образом, что запоминается только последняя нажатая клавиша и циклический вызов этих событий идет до тех пор пока удерживается эта клавиша.
Как это обойти? Как на OnKeyUp перезапустить на исполнение событие OnKeyDown если есть еще нажатые кнопки?

Добавлено (02.10.2009, 12:33)
---------------------------------------------
> Но здесь есть одна маленькая проблема:
> - я жму вправо - едет вправо;
> - удерживая стрелку вправо жму вверх - едет по диагонали;
> - отпускаю вправо - едет вверх - вроди всё норм
но если
> - отпускаю только что нажатую стрелку вверх - ехать перестает, хотя должно дальше ехать вправо

Добавлено (05.10.2009, 12:12)
---------------------------------------------
Уже сам нашёл решение(код кросбраузерный):

Code

   var Keys = new Array();
   var Object = document.getElementById("move");
   var Speed = 5;

   if(!Array.indexOf){
     Array.prototype.indexOf = function(obj)
     {
       for(var i=0; i<this.length; i++)
         if(this[i]==obj)
           return i;
       return -1;
     }
   };

   function KeyCodeGet(e)
   {
     if (window.event)
       return window.event.keyCode;
     else
     if (e)
       return e.keyCode;
   };

   function KeyDown(e)
   {
     var LKey = KeyCodeGet(e);
     if (Keys.indexOf(LKey) < 0)
       Keys.push(LKey);
   };
    
   function KeyUp(e)
   {
     var LKey = KeyCodeGet(e);
     Keys.splice(Keys.indexOf(LKey), 1);
   };
    
   function Move()
   {
     if (Keys.length == 0)
       return false;
     var LLeft = parseInt(Object.style.left);
     var LTop = parseInt(Object.style.top);
     for(var i = 0; i < Keys.length; i++)
     {
       LKey = Keys[i];
       switch(LKey)
       {
         case 37:{
           LLeft = LLeft - Speed;
           break;
         };
         case 38:{
           LTop = LTop - Speed;
           break;
         };
         case 39:{
           LLeft = LLeft + Speed;
           break;
         };
         case 40:{
           LTop = LTop + Speed;
           break;
         };
         default:{
           break;
         }
       };
     }
     Object.style.left = LLeft + "px";
     Object.style.top = LTop + "px";
   }
    
   document.onkeydown = KeyDown;
   document.onkeyup = KeyUp;
    
   setInterval("Move()", 100);
 
  • Страница 1 из 1
  • 1
Поиск:


Copyright MyCorp © 2006
Хостинг от uCoz