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

Question

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nao*_*ton 6

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

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

归档时间：	11 年，9 月前
查看次数：	48631 次
最近记录：	4 年，7 月前