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

Question

我希望能够使用 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>

Answer 1

只要按住键，您就可以为“keydown”使用一个事件侦听器，它会反复触发。 我相信这将是首选方法。 此外，'top' 和 'left' 的初始值什么都没有，因此您需要分配初始值。

我在这里创建了您的代码的固定副本： http : //plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview

Answer 2

尝试这个。 您需要设置初始左、右等。 并从 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

格式化的 HTML：

格式化代码以适合您的文档。

<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

格式化的 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

格式化的 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