Как сделать свой ход изображения, удерживая клавишу и не повторно нажав

Question

вот мой код

function leftArrowPressed() { 
      document.getElementById("image1").src = "http://orig04.deviantart.net/137f/f/2014/147/3/1/random_character__jet_bear_by_mnrart-d7jwteg.gif"; 
      var element = document.getElementById("image1"); 
      element.style.left = parseInt(element.style.left) - 80 + 'px'; 
     } 

     function rightArrowPressed() { 
      document.getElementById("image1").src = "http://i.imgur.com/bZTh3Lk.gif"; 
      var element = document.getElementById("image1"); 
      element.style.left = parseInt(element.style.left) + 80 + 'px'; 
     } 


     function upArrowPressed() { 
      document.getElementById("image1").src = "http://orig04.deviantart.net/137f/f/2014/147/3/1/random_character__jet_bear_by_mnrart-d7jwteg.gif"; 
      var element = document.getElementById("image1"); 
      element.style.top = parseInt(element.style.top) - 80 + 'px'; 
     } 


     function downArrowPressed() { 
      document.getElementById("image1").src = "http://i.imgur.com/bZTh3Lk.gif"; 
      var element = document.getElementById("image1"); 
      element.style.top = parseInt(element.style.top) + 80 + 'px'; 
     } 

     function moveSelection(event) {      
      switch (event.keyCode) { 
       case 37: 
        leftArrowPressed(); 
       break; 


       case 39: 
        rightArrowPressed(); 
       break; 

       case 38: 
        upArrowPressed(); 
       break; 

       case 40: 
        downArrowPressed(); 
       break; 

В настоящее время я должен держать нажатие и отпускание, чтобы заставить его двигаться я хочу, чтобы иметь возможность удерживать клавишу down

Answer 1

использование window.setInterval

определить глобальную переменную:

var timerId = null; 

для каждого из ваших функций меняется:

case 37: 
    leftArrowPressed(); 

Для

case 37: 
     leftArrowAnimate(); 

и определить leftArrowAnimate(), как

// this will fire leftArrowPressed every 100 milliseconds 
function leftArrowAnimate() 
{ 
    timerId = window.setTimeout(leftArrowPressed(), 100); 
} 

Наконец, вам нужно будет также захватить ключ до события и остановки таймера:

// handle the key up event 
function moveSelectionFinished(event) {      
     switch (event.keyCode) { 
      case 37: 
       window.clearTimeout(timerId); 
      break; 
// etc... 

Answer 2

1.- Вы можете объявить глобальную переменную, сохраняющую направление. (Я использую строки для того, чтобы сделал код легко понять)

var dir = "none"; 

2.- Теперь в функции «moveSelection» вы можете изменить это значение.

3.- Использовать setInterval для выполнения функции каждые X миллисекунды, в этой функции перемещение изображения в направлении, хранящемся в глобальной переменной. Пример:

function mainLoop() 
{ 
    if(dir == "right") 
     MoveToright() 
    else if (dir == "up") 
     MoveUp(); 
} 

setInterval (mainLoop, 100) ; // 100 ms