Making objects in Jquery move at an angle of 55 degrees

Making objects in Jquery move at an angle of 55 degrees

Hello guys, I'm new to Jquery. I want my object (mySquare) to move at an angle of 55 degrees, but I can't seem to solve it. Any help would be much appreciated. Thank you.



  1. $(document).ready(function() {
  2.       //Accessing DOM
  3.  
  4.   var canvas = $("#myCanvas");
  5.   var context = canvas.get(0).getContext("2d");
  6.   canvas.attr("width", $(window).get(0).innerWidth);
  7.   canvas.attr("height", $(window).get(0).innerHeight);
  8.   context.fillRect(0,0, canvas.width(), canvas.height());
  9.   var playAnim = true;
  10.   var startBut = $("#startAnimation");
  11.   var stopBut = $("#stopAnimation");
  12.   startBut.hide();
  13.   startBut.click(function(){
  14.     $(this).hide();
  15.     stopBut.show();
  16.     playAnim = true;
  17.     animate();
  18.   });
  19.   stopBut.click(function(){
  20. $(this).hide();
  21. startBut.show();
  22. playAnim = false;
  23.   });
  24. //pseudo shape class
  25. var Shape = function(x, y, width, height){
  26.   this.x = x;
  27.   this.y = y;
  28.   this.width = width;
  29.   this.height = height;
  30. }
  31. var x=0;
  32. var vx = 20;
  33. var vy = 10;
  34. var ax = 0.05;
  35. var ay = 0.05;
  36. var mySquare = new Shape(20, 20, 10,10);
  37. var anglex = 0;
  38. var angley = 0.1;
  39.   function animate(){
  40.      var canvasWidth = canvas.width();
  41.      var canvasheight = canvas.height();
  42.       context.clearRect(0,0, canvasWidth,canvasheight);
  43.       //anglex += 1;
  44.       //angley += 1;
  45.       vx = Math.cos(55 * Math.PI/180);
  46.       vy = Math.sin(55 * Math.PI/180);
  47.       vx += ax;
  48.       vy += ay;
  49.      
  50.      mySquare.x+=vx;
  51.      mySquare.y+=vy;
  52.      context.fillRect(mySquare.x, mySquare.y, mySquare.width, mySquare.height);
  53.     
  54.    if(playAnim){
  55.     setTimeout(animate,33);
  56.   }
  57.   }
  58. animate();
  59. });