All geek questions in one place

Moving an image using arrow keys using JavaScript

I want to be able to move the image around the screen using JavaScript. The code below will put the image on the screen, but will not allow me to move it.

Question: do you want to move the image on the screen using the arrow keys?

I am sure that there should be a game loop that somehow works all the time when the page is active. How this is done, I'm also not sure, but I think it could be a download function.

JavaScript Code:

<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>
+4
source share
2 answers

"keydown", , . , . , "top" "left" , .

: http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview

+3

. , . 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>
+2

Source: https://habr.com/ru/post/1527031/

More articles:


All Articles