title: How to move an image around with arrow keys javascript
body: <p>I recently began developing a little javascript game, just for fun.  The idea was that you controlled a little dot with the arrow keys (or awsd or i don't care what) within a box on the screen.  Little rectangles would then randomly spawn on all edges of the box and progress across it.  you have to avoid contact with them.  The project turned out to be harder than I expected and I couldn't get the movement to work right.  If you could help me with that that would be great.  also, feel free to take the concept and what little I have done so far and do whatever you want with it.  I would be interested to see your results.  Below is the code I used for the spawns without any of the movement scripts.  I was using the basic idea of this code to do the movement:</p>
  
  <pre><code>var x = 5; //Starting Location - left
  var y = 5; //Starting Location - top
  var dest_x = 300;  //Ending Location - left
  var dest_y = 300;  //Ending Location - top
  var interval = 2; //Move 2px every initialization
  
  function moveImage() {
      //Keep on moving the image till the target is achieved
      if(x&lt;dest_x) x = x + interval; 
      if(y&lt;dest_y) y = y + interval;
  
      //Move the image to the new location
      document.getElementById("ufo").style.top  = y+'px';
      document.getElementById("ufo").style.left = x+'px';
  
      if ((x+interval &lt; dest_x) &amp;&amp; (y+interval &lt; dest_y)) {
          //Keep on calling this function every 100 microsecond 
          //  till the target location is reached
          window.setTimeout('moveImage()',100);
      }
  }
  </code></pre>
  
  <p>main body:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          html::-moz-selection{
              background-color:Transparent;
          }
  
          html::selection {
              background-color:Transparent;
          }
          img.n {position:absolute; top:0px; width:5px; height:10px;}
          img.e {position:absolute; right:0px; width:10px; height:5px;}
          img.s {position:absolute; bottom:0px; width:5px; height:10px;}
          img.w {position:absolute; left:0px; width:10px; height:5px;}
          #canvas {
              width:300px;
              height:300px;
              background-color:black;
              position:relative;
          }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
      nmecount=0
          function play(){
              spawn()
              var t=setTimeout("play()",1000);
          }
          function spawn(){
              var random=Math.floor(Math.random()*290)
              var side=Math.floor(Math.random()*5)
              var name=1
              var z=10000
              if (side=1)
              {
              var nme = document.createElement('img');
              nme.setAttribute('src', '1.png');
              nme.setAttribute('class', 'n');
              nme.setAttribute('id', name);
              nme.setAttribute('style', 'left:'+random+'px;');
              nme.onload = moveS;
              document.getElementById("canvas").appendChild(nme);
              }
              if (side=2)
              {
              var nme = document.createElement('img');
              nme.setAttribute('src', '1.png');
              nme.setAttribute('class', 'e');
              nme.setAttribute('id', name);
              nme.setAttribute('style', 'top:'+random+'px;');
              nme.onload = moveW;
              document.getElementById("canvas").appendChild(nme);
              }
              if (side=3)
              {
              var nme = document.createElement('img');
              nme.setAttribute('src', '1.png');
              nme.setAttribute('class', 's');
              nme.setAttribute('id', name);
              nme.setAttribute('style', 'left:'+random+'px;');
              nme.onload = moveN;
              document.getElementById("canvas").appendChild(nme);
              }
              if (side=4)
              {
              var nme = document.createElement('img');
              nme.setAttribute('src', '1.png');
              nme.setAttribute('class', 'w');
              nme.setAttribute('id', name);
              nme.setAttribute('style', 'top:'+random+'px;');
              nme.onload = moveE;
              document.getElementById("canvas").appendChild(nme);
              }
          name=name+1
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onLoad="play()"&gt;
  &lt;div id="canvas"&gt;
  &lt;img id="a" src="1.png" style="position:absolute; z-index:5; left:150px; top:150px; height:10px; width=10px;" /&gt;
  &lt;button onclick="moveleft()"&gt;&lt;&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>