Revision de785300-1f3e-4a39-b41e-f5f205bc83c8 - Game Development Stack Exchange

I am just trying to make a simple 2D racing game using canvas. It uses the <kbd>W</kbd>,<kbd>S</kbd>,<kbd>A</kbd>, <kbd>D</kbd> keys to move the car.  The <kbd>W</kbd> key should take me forward and the <kbd>A</kbd> and <kbd>D</kbd> keys will turn each way. I want the car to continue heading forward after being turned.  I am currently just multiplying the distance to move by the sin or cosine of the angle in order to find the x and y positions, but it is not reacting how I would expect. Thanks.  

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <head>
      <meta charset="UTF-8" />
      <title></title>
    </head>
    <body>
    <canvas id="canvas_layer_01" width="3072" height="2048" style="border:1px solid #000000;">></canvas>

    <script>
      var canvas = document.getElementById("canvas_layer_01");
      ctx = canvas.getContext("2d");

      car_image = new Image();
      car_image.src = 'http://i.imgur.com/Bl2p5KI.png';

      var key_pressed_a = false,
        key_pressed_d = false,
        key_pressed_w = false,
        key_pressed_s = false;

      var player_x = 50,
        player_y = 50,
        player_speed = 10,
        player_angle = 0,
        max_turn_angle = 10; // probably needs to change based on speed

      document.addEventListener("keydown", function(e){
        switch(e.keyCode){
          case 87:
            key_pressed_w = true;
            break;

          case 83:
            key_pressed_s = true;
            break;

          case 65:
            key_pressed_a = true;
            break;

          case 68:
            key_pressed_d = true;
            break;
        }
      }, false);

      document.addEventListener("keyup", function(e) {
        switch(e.keyCode) {
          case 87:
            key_pressed_w = false;
            break;

          case 83:
            key_pressed_s =false;
            break;

          case 65:
            key_pressed_a = false;
            break;

          case 68:
            key_pressed_d =false;
            break;
        }
      }, false);

      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000/60);
          };
      })();

      // http://stackoverflow.com/a/16546061/6716639
      function render_image(img, x, y, width, height, degrees) {

        //Convert degrees to radian
        var rad = degrees * Math.PI / 180;

        //Set the origin to the center of the image
        ctx.translate(x + width / 2, y + height / 2);

        //Rotate the canvas around the origin
        ctx.rotate(rad);

        //draw the image
        ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height);

        //reset the canvas
        ctx.rotate(rad * ( -1 ) );
        ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
      }

      function updateGame() {

        if(key_pressed_w) {
          player_x += player_speed * Math.sin(player_angle);
          player_y += player_speed * Math.cos(player_angle);
        }
        else if(key_pressed_s) {
          player_y += player_speed;
        }
        else if(key_pressed_a) {
          player_angle -= max_turn_angle;
        }
        else if(key_pressed_d) {
          player_angle += max_turn_angle;
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        render_image(car_image, player_x, player_y, car_image.width, car_image.height, player_angle);

        requestAnimFrame(function() {
          updateGame();
        });
      }

      updateGame();

    </script>

    </body>
    </html>


<!-- end snippet -->