title: How can I get my JS car to move?
body: <p>I'm trying to get this car to move with the arrow keys and rotate as well. <strong><em>The car loaded onto the canvas, but its not moving with the keys</em></strong>. I think I've put in everything I need, or I'm wrong. Or, there just some minor mistakes. Anyways, please help a noob like me :D!</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  
      &lt;head&gt;
      &lt;title&gt;Ball&lt;/title&gt;
       &lt;script src="http://code.jquery.com/jquery-git2.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;center&gt;
          &lt;canvas id="gameCanvas" width="500" height="500" style="border:5px solid green"&gt;&lt;/canvas&gt;
          &lt;script src="js/Game.js"&gt;&lt;/script&gt;
  
      &lt;/center&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    //Set context for canvas
  
      var context = $('#gameCanvas')[0].getContext('2d');
  
      //Dimensions For Canvas   
  
      var width = $('#gameCanvas').width();
      var height = $('#gameCanvas').height();
  
      //Image for Car
  
      var car = new Image();
      car.src = "http://thumb1.shutterstock.com/thumb_small/338038/192139124/stock-vector-illustration-of-a-red-sports-car-top-view-192139124.jpg";
  
      //Car Variables and position
  
      var x = 80;
      var y = 80;
      var vx = 0;
      var vy = 0;
      var angle = 0;
      var mod = 0;
  
      //Draws car during motion
  
      var moveInterval = setInterval(function () {
          draw();
      }, 30);
  
      //Clears Canvas 
  
      function draw()
      {
          context.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
  
      // Change direction and velocity of car
  
          x += (vx * mod) * Math.cos(Math.PI / 180 * angle);
          y += (vy * mod) * Math.sin(Math.PI / 180 * angle);
  
          context.save();
          context.translate(x, y);
          context.rotate(Math.PI / 180 * angle);
          context.drawImage(car, -(car.width / 2), -(car.height / 2));
          context.restore();
      }
  
      //Codes for keyboard keys
  
      $('#gameCanvas').keydown(function(event) {
          code = event.keyCode;
          if (code == 37) vx = -10.0;  // left key pressed
          if (code == 39) vx = 10.0;  // rightkey pressed
          if (code == 38) vy = -2.0;  // up key pressed
          if (code == 40) vy = 2.0;  // down key pressed
      });
  
      $('#gameCanvas').up(function(event) {
          code = event.keyCode;
          if (code == 37) vx = 0.0;  // leftkey not pressed
          if (code == 39) vx = 0.0;  // rightkey not pressed
          if (code == 38) vy = 0.0;  // upkey not pressed
          if (code == 40) vy = 0.0;  // downkey not pressed
      });
  
  
  update();
  </code></pre>