hi,
im trying to make a simple shooting game, but I cant seem to rotate images.
Ive downloaded jquery.rotate, but it doesnt seem to work.
Im using player.angle as the variable for the angle at which im aiming.
What I want to do is rotate the player image to player.angle.
Heres what ive got so far:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Space Demo</title>
    <link href="/stylesheets/screen.css" media="all" rel="stylesheet" type="text/css"/>
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script><script language="javascript" src="javascripts/jquery.hotkeys.js" type="text/javascript"></script><script language="javascript" src="javascripts/key_status.js" type="text/javascript"></script><script language="javascript" src="javascripts/util.js" type="text/javascript"></script><script language="javascript" src="javascripts/sprite.js" type="text/javascript"></script><script language="javascript" src="javascripts/sound.js" type="text/javascript"></script><script language="javascript" src="javascripts/jQueryRotate.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Space Demo</h1>
    <script type='text/javascript'>
      //<![CDATA[
        var CANVAS_WIDTH = 480;
        var CANVAS_HEIGHT = 320;
        var FPS = 30;
		var frame = 0;
		var number = 1
		
        
        var player = {
		  angle: 0,
          color: "#00A",
          x: 50,
          y: 270,
          width: 20,
          height: 30,
          draw: function() {
            canvas.fillStyle = this.color;
            canvas.fillRect(this.x, this.y, this.width, this.height);
          }
        };
        
        var playerBullets = [];
        
        function Bullet(I) {
          I.active = true;
        
          //I.xVelocity = -1+(Math.random()*2); //bullet spread
         // I.yVelocity = -I.speed ;
			I.spread = (-10+(Math.random()*20))/100
			I.xVelocity = (Math.sin(player.angle+I.spread)*5)
			I.yVelocity = (-Math.cos(player.angle+I.spread)*5)
          I.width = 5;
          I.height = 15;
          I.color = "#000";
		  I.hitid = 0; //has not yet hit any enemies, so shot can pass through and will only deal damage one time
        
          I.inBounds = function() {
            return I.x >= 0 && I.x <= CANVAS_WIDTH &&
              I.y >= 0 && I.y <= CANVAS_HEIGHT;
          };
        
          I.draw = function() {
            canvas.fillStyle = this.color;
            canvas.fillRect(this.x, this.y, this.width, this.height);
          };
          
          I.update = function() {
            I.x += I.xVelocity;
            I.y += I.yVelocity;
        
            I.active = I.active && I.inBounds();
          };
        
          I.explode = function() {
            this.active = false;
            // Extra Credit: Add an explosion graphic
          };
        
          return I;
        }
        
        enemies = [];
        
        function Enemy(I) {
          I = I || {};
        
          I.active = true;
          I.age = Math.floor(Math.random() * 128);
          I.health = 100
          I.color = "#A2B";
		  number = number + 1
		  I.id = number
          I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
          I.y = 0;
          I.xVelocity = 0;
          I.yVelocity = 0.5;
        
          I.width = 16;
          I.height = 16;
        
          I.inBounds = function() {
            return I.x >= 0 && I.x <= CANVAS_WIDTH &&
              I.y >= 0 && I.y <= CANVAS_HEIGHT;
          };
        
          I.sprite = Sprite("enemy");
        
          I.draw = function() {
            this.sprite.draw(canvas, this.x, this.y);
          };
        
          I.update = function() {
            I.x += I.xVelocity;
            I.y += I.yVelocity;
        
            I.xVelocity = 2 * Math.sin(I.age * Math.PI / 64);
        
            I.age++;
        
            I.active = I.active && I.inBounds();
          };
        
          I.explode = function() {
            Sound.play("explosion");
        
            this.active = false;
            // Extra Credit: Add an explosion graphic
          };
        
          return I;
        };
        
        var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
          "' height='" + CANVAS_HEIGHT + "'></canvas");
        var canvas = canvasElement.get(0).getContext("2d");
        canvasElement.appendTo('body');
        
        setInterval(function() {
          update();
          draw();
        }, 1000/FPS);
        
        function update() {
          if(keydown.space) {
            player.shoot();
          }
        
          if(keydown.left) {
            player.x -= 5;
          }
        
          if(keydown.right) {
            player.x += 5;
          }
		  if(keydown.up) {
           // player.y -= 5;
			player.angle=player.angle-0.1
          }
		  if(keydown.down) {
           // player.y += 5;
			player.angle=player.angle+0.1
			
          }
        
          player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
          
          playerBullets.forEach(function(bullet) {
            bullet.update();
          });
        
          playerBullets = playerBullets.filter(function(bullet) {
            return bullet.active;
          });
          
          enemies.forEach(function(enemy) {
            enemy.update();
          });
        
          enemies = enemies.filter(function(enemy) {
            return enemy.active;
          });
        
          handleCollisions();
        
          if(Math.random() < 0.05) {
            enemies.push(Enemy());
          }
		
        }
        
        player.shoot = function() {
		

		  if(frame <8){
          frame = frame + 1;
		  }else{
		  
		  frame = 0
		  
          Sound.play("shoot");	
		  
          var bulletPosition = this.midpoint();
        
          playerBullets.push(Bullet({
            speed: 12,
            x: bulletPosition.x,
            y: bulletPosition.y
          }));
		  }
        };
        
        player.midpoint = function() {
          return {
            x: this.x + this.width/2,
            y: this.y + this.height/2
          };
        };
        
        function draw() {
          canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
          player.draw();
          
          playerBullets.forEach(function(bullet) {
            bullet.draw();
          });
        
          enemies.forEach(function(enemy) {
            enemy.draw();
          });
        }
        
        function collides(a, b) {
          return a.x < b.x + b.width &&
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.y + a.height > b.y;
        }
        
        function handleCollisions() {
          playerBullets.forEach(function(bullet) {
            enemies.forEach(function(enemy) {
				if(collides(bullet, enemy)){
				
				//enemy.health = enemy.health - 10 ;
				bullet.active = false;
				//if (enemy.health <= 0) {
                enemy.explode();
				//}
				
				}
              });
			  
            });
          
        
          enemies.forEach(function(enemy) {
            if(collides(enemy, player)) {
              enemy.explode();
              player.explode();
            }
          });
        }
        
        player.explode = function() {
          this.active = false;
          // Extra Credit: Add an explosion graphic and then end the game
        };
        
        player.sprite = Sprite("player");
        
        player.draw = function() {
//rotateAnimation("player",20);
this.sprite.draw(canvas, this.x, this.y);


	 


//this.translate(this.x, this.y);
//this.rotate(player.angle);
//this.drawImage(image, -player.width / 2, -player.height / 2, player.width, height);
//this.rotate(-player.angle);
//this.translate(-this.x, -this.y);
        };

		
      //]]>
    </script>
  </body>
</html>