Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: make image turn

  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down make image turn

    How do I make an image turn in javascript?
    The variable im using for the angle is player.angle, it increases and decreases when using arrow keys. I cannot be more clear, since posting your code causes the thread to dissapear.

  • #2
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    You can rotate an image using a combination of CSS and Javascript.

    http://www.w3schools.com/cssref/css3_pr_transform.asp

    CSS3 has a style for rotating any element, you can then effect the styling within javascript of that specific element by creating some kind of a counter within a function. Every time you push a specific button, it adds or subtracts from the counter.

    If you need the code for this, feel free to message me.
    For more tutorials on my please check out my youtube channel here

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    0
    Thanked 11 Times in 11 Posts
    You could use Pastebin to paste code. I think it's a nicer way to post code if it's a big block of code.

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since I cant figure out how to edit the thread, heres the code

    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>

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by pdiddles03 View Post
    You can rotate an image using a combination of CSS and Javascript.

    http://www.w3schools.com/cssref/css3_pr_transform.asp

    CSS3 has a style for rotating any element, you can then effect the styling within javascript of that specific element by creating some kind of a counter within a function. Every time you push a specific button, it adds or subtracts from the counter.

    If you need the code for this, feel free to message me.
    Hey,
    I visited that link, and tried to find more about it on google, but I still do not understand it. Im very new to javascript, so can I get the code for it?
    By the way , I posted the code from my game so it may clearify the problem.

  • #6
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    'Pity noone answers :c

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by observer View Post
    'Pity noone answers :c
    I would pay attention to wherever it says 'Angle' in that script and see what happens when you change the values.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •