使用JavaScript使用箭頭鍵移動圖像

我希望能夠使用JavaScript在屏幕上移動圖像。下面的代碼會將圖像放在屏幕上，但不會讓我移動它。使用JavaScript使用箭頭鍵移動圖像

問題：想用箭頭鍵可以在屏幕上移動圖像嗎？

我確定必須有一個遊戲循環，當頁面處於活動狀態時，總是以某種方式運行。這是怎麼做的我也不確定，但我認爲這可能是他的負載函數。

JavaScript代碼：

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Test Move Object</title> 

    <script type="text/javascript"> 
     <script type="text/javascript"> 

      function leftArrowPressed() { 
      var element = document.getElementById("image1"); 
      element.style.left = parseInt(element.style.left) - 5 + 'px'; 
      } 

      function rightArrowPressed() { 
      var element = document.getElementById("image1"); 
      element.style.left = parseInt(element.style.left) + 5 + 'px'; 

      } 

      function upArrowPressed() { 
      var element = document.getElementById("image1"); 
      element.style.top = parseInt(element.style.top) - 5 + 'px'; 
      } 

      function downArrowPressed() { 
      var element = document.getElementById("image1"); 
      element.style.top = parseInt(element.style.top) + 5 + 'px'; 
      } 

      function moveSelection() { 
       evt = evt || window.event; 
       switch (evt.keyCode) { 
        case 37: 
        leftArrowPressed(); 
        break; 
        case 39: 
        rightArrowPressed(); 
        break; 
        case 38: 
        upArrowPressed(); 
        break; 
        case 40: 
        downArrowPressed(); 
        break; 
        } 
       }; 

     function gameLoop() 
     { 
      // change position based on speed 
      moveSelection(); 
      setTimeout("gameLoop()",10); 
     } 

    </script> 
    </head> 

    <body onload="gameLoop()" onkeydown="" onkeyup="" bgcolor='yellow'> 
    Test 
    <img id="image1" src="C:\Users\itpr13266\Desktop\mp.jpg" style="position:absolute;" 
                   height="15" width="15"> 
    </body> 
    end html 
</html>

來源

2014-02-14 Doug Hauf

不是真的。你需要設置一些「觸發器」，當它們發生時，執行該動作。我只能在jquery（javascript的框架）中做到這一點，但仍然可能會給你一些想法，希望我展示它呢？ –

您有重複的開放腳本標記（並且您不需要在HTML5中指定類型）。 – isherwood

我會想象最新版本的HTML。 HTML 5. –

您可以使用事件偵聽器「的keydown」，這觸發多次，只要鍵被按下。我相信這將是首選方法。此外，'top'和'left'的初始值都不是什麼東西，所以你需要分配初始值。

我創建了一個固定的副本，你的代碼在這裏： http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview

來源

2014-02-14 22:25:42

我在我的g：\驅動器上有圖像，並且想使用它，但由於某種原因，不想移動圖像。除了我有一張照片留在同一個地方之外，似乎沒有其他事情發生。 –

同一張照片是否來自不同位置？ –

試試這個。您需要設置最初的左側，右側等等。從keyup中獲取事件以獲得按鍵並使用該按鍵執行正確的功能。

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Test Move Object</title> 



     <script type="text/javascript"> 

      function leftArrowPressed() { 
       var element = document.getElementById("image1"); 
       element.style.left = parseInt(element.style.left) - 5 + 'px'; 
      } 

      function rightArrowPressed() { 
       var element = document.getElementById("image1"); 
       element.style.left = parseInt(element.style.left) + 5 + 'px'; 
      } 

      function upArrowPressed() { 
       var element = document.getElementById("image1"); 
       element.style.top = parseInt(element.style.top) - 5 + 'px'; 
      } 

      function downArrowPressed() { 
       var element = document.getElementById("image1"); 
       element.style.top = parseInt(element.style.top) + 5 + 'px'; 
      } 

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

        case 39: 
         rightArrowPressed(); 
        break; 

        case 38: 
         upArrowPressed(); 
        break; 

        case 40: 
         downArrowPressed(); 
        break; 
       } 
      }; 

     function gameLoop() 
     { 
      // change position based on speed 
      moveSelection(); 
      setTimeout("gameLoop()",10); 
     } 

    </script> 
    </head> 

    <body onload="gameLoop();" onkeydown="" onkeyup="moveSelection(event)" bgcolor='yellow'> 
    Test 
    <img id="image1" src="pug.jpeg" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="15" width="15"> 
    </body> 
    end html 
</html>

來源

2014-02-14 22:14:38 berentrom

如果我想創建一個蜈蚣遊戲，並且在一般方向上有對象，直到按下另一個鍵，並且如果空格鍵是開火鍵，那麼會如何影響遊戲循環呢？ –

使用JavaScript使用箭頭鍵移動圖像

回答

相關問題