Mover uma imagem com as teclas de seta usando JavaScript

Question

Feb 14, 2014, 11:01 PM

Mover uma imagem com as teclas de seta usando JavaScript

Quero poder mover uma imagem pela tela com JavaScript. O código que tenho abaixo colocará a imagem na tela, mas não permitirá que eu a mova.

Pergunta: Deseja mover a imagem pela tela com as teclas de seta?

Estou certo de que deve haver um ciclo de jogo que, de alguma forma, está sendo executado o tempo todo quando a página está ativa. Como isso é feito, também não tenho certeza, mas acho que pode ser que ele carregue a função.

Código 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>