使用 JavaScript 使用箭头键移动图像

Question

I want to be able to move an image around the screen with JavaScript.我希望能够使用 JavaScript 在屏幕上移动图像。 The code I have below will put the image on the screen but will not let me move it around.我下面的代码会将图像放在屏幕上，但不会让我移动它。

Question: Want to be able to move the image around the screen with the arrow keys?问题：希望能够使用箭头键在屏幕上移动图像吗？

I am certain there has to be a game loop that somehow is running all the time when the page is active.我确信必须有一个游戏循环，当页面处于活动状态时，它以某种方式一直在运行。 How this is done I am not certain either but I think that it might be int he load function.这是如何完成的我也不确定，但我认为这可能是加载函数。

JavaScript Code: 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>

Answer 1

You can use an event listener for "keydown" which fires repeatedly, as long as the key is held down.只要按住键，您就可以为“keydown”使用一个事件侦听器，它会反复触发。 I believe this would be the preferred approach.我相信这将是首选方法。 Also, the initial values for 'top' and 'left' are nothing, so you need to assign initial values.此外，'top' 和 'left' 的初始值什么都没有，因此您需要分配初始值。

I created a fixed copy of your code here: http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview我在这里创建了您的代码的固定副本： http : //plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview

Answer 2

Try this.尝试这个。 You need to set an initial left, right, et cetera.您需要设置初始左、右等。 And get the event from keyup to get the key pressed and use the key for executing the right function.并从 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>

Answer 3

Formatted HTML:格式化的 HTML：

The formatted code formatted to fit your document.格式化代码以适合您的文档。

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test Move Object</title>
    <script>
      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) {
        switch (evt.keyCode) {
          case 37:
            leftArrowPressed();
            break;
          case 39:
            rightArrowPressed();
            break;
          case 38:
            upArrowPressed();
            break;
          case 40:
            downArrowPressed();
            break;
        }
      };

      function docReady() {
        window.addEventListener('keydown', moveSelection);
      }
    </script>
  </head>

  <body onload="docReady()" onkeydown="" onkeyup="" bgcolor='yellow'>
    <img id="image1" src="https://netphp.geonevestudios.repl.co/images/favicon/web-icon.ico" style="position:absolute;left:0; top:0;" height="15" width="15">
  </body>

</html>

使用 JavaScript 使用箭头键移动图像

问题描述

3 个解决方案

解决方案1
6 已采纳 2014-02-14 22:25:42

解决方案2
2 2014-02-14 22:14:38

解决方案3
0 2021-04-12 17:39:48

Formatted HTML:格式化的 HTML：

使用 JavaScript 使用箭头键移动图像

问题描述

3 个解决方案

解决方案1 6 已采纳 2014-02-14 22:25:42

解决方案2 2 2014-02-14 22:14:38

解决方案3 0 2021-04-12 17:39:48

Formatted HTML:格式化的 HTML：

解决方案1
6 已采纳 2014-02-14 22:25:42

解决方案2
2 2014-02-14 22:14:38

解决方案3
0 2021-04-12 17:39:48