使用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使用箭头键移动图像

回答

相关问题