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

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

javascript html

使用JavaScript使用箭头键移动图像,javascript,html,Javascript,Html,我希望能够用JavaScript在屏幕上移动图像。我下面的代码将把图像放在屏幕上，但不会让我移动它问题：想用箭头键在屏幕上移动图像吗我确信当页面处于活动状态时，一定会有一个游戏循环一直在运行。这是如何做到的，我也不确定，但我认为这可能是在加载函数 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title

我希望能够用JavaScript在屏幕上移动图像。我下面的代码将把图像放在屏幕上，但不会让我移动它

问题：想用箭头键在屏幕上移动图像吗

我确信当页面处于活动状态时，一定会有一个游戏循环一直在运行。这是如何做到的，我也不确定，但我认为这可能是在加载函数

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

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>


测试移动对象
函数leftarrowspressed（）{
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）-5+'px'；
}
函数rightarrowspressed（）{
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）+5+'px'；
}
函数upArrowPressed（）{
var元素=document.getElementById（“image1”）；
element.style.top=parseInt（element.style.top）-5+'px'；
}
函数向下箭头按下（）{
var元素=document.getElementById（“image1”）；
element.style.top=parseInt（element.style.top）+5+'px'；
}
函数moveSelection（）{
evt=evt | | window.event；
开关（evt.keyCode）{
案例37：
左箭头按下（）；
打破
案例39：
右箭头按下（）；
打破
案例38：
向上箭头按下（）；
打破
案例40：
向下箭头按下（）；
打破
}
};
函数gameLoop（）
{
//根据速度改变位置
移动选择（）；
setTimeout（“gameLoop（）”，10）；
}
试验
结束html

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


测试移动对象
函数leftarrowspressed（）{
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）-5+'px'；
}
函数rightarrowspressed（）{
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）+5+'px'；
}
函数upArrowPressed（）{
var元素=document.getElementById（“image1”）；
element.style.top=parseInt（element.style.top）-5+'px'；
}
函数向下箭头按下（）{
var元素=document.getElementById（“image1”）；
element.style.top=parseInt（element.style.top）+5+'px'；
}
函数移动选择（事件）{
开关（event.keyCode）{
案例37：
左箭头按下（）；
打破
案例39：
右箭头按下（）；
打破
案例38：
向上箭头按下（）；
打破
案例40：
向下箭头按下（）；
打破
}
};
函数gameLoop（）
{
//根据速度改变位置
移动选择（）；
setTimeout（“gameLoop（）”，10）；
}
试验
结束html

您可以使用事件监听器进行“keydown”，只要按住键，该监听器就会重复触发。我相信这将是首选的方法。此外，“top”和“left”的初始值都为零，因此需要指定初始值

我在此处创建了代码的固定副本：

格式化的HTML：已格式化的代码已格式化以适合您的文档


测试移动对象
函数leftarrowspressed（）{
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）-5+'px'；
}
函数rightarrowspressed（）{
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）+5+'px'；
}
函数upArrowPressed（）{
var元素=document.getElementById（“image1”）；
element.style.top=parseInt（element.style.top）-5+'px'；
}
函数向下箭头按下（）{
var元素=document.getElementById（“image1”）；
element.style.top=parseInt（element.style.top）+5+'px'；
}
功能选择（evt）{
开关（evt.keyCode）{
案例37：
左箭头按下（）；
打破
案例39：
右箭头按下（）；
打破
案例38：
向上箭头按下（）；
打破
案例40：
向下箭头按下（）；
打破
}
};
函数docReady（）{
window.addEventListener（'keydown'，moveSelection）；
}

不太可能。您需要设置一些“触发器”，以便在它们发生时执行操作。我只能在jquery（javascript的框架）中完成，但可能会给你一些想法，希望我展示它吗？你有重复的开始脚本标记（并且不需要在HTML5中指定类型）。我可以想象最新版本的HTML。HTML5。我的g:\驱动器上有这个图像，我想用它来代替，但出于某种原因，我不想移动图像。除了我有一张照片留在同一个地方之外，似乎什么也没发生。是吗