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;

目前我必须继续按下并释放以使其移动我希望能够按住键

Answer 1

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

Answer 2

使用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...

如何通过按住键而不是重复按下来移动图像

2 个答案: