marți, 1 august 2017

Functie Java Script pentru miscarea unui obiect de la tastatura

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test Move Object</title>



       <script type="text/javascript">
 var x= 30;
            function leftArrowPressed() {
                var element = document.getElementById("image1");
                element.style.left = parseInt(element.style.left) - x + 'px';
            }

            function rightArrowPressed() {
                var element = document.getElementById("image1");
                element.style.left = parseInt(element.style.left) + x + 'px';
            }

            function upArrowPressed() {
                var element = document.getElementById("image1");
                element.style.top = parseInt(element.style.top) - x + 'px';
            }

            function downArrowPressed() {
                var element = document.getElementById("image1");
                element.style.top = parseInt(element.style.top) + x + 'px';
            }
      function pozitie() {
  var element = document.getElementById("image1");
    if (element.left < 0) {
       element.position=(400,100);
    }
  }

            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'>
  <img id="image1" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="50" width="50">





  </body>

</html>




Niciun comentariu:

Trimiteți un comentariu