1 Replies - 1067 Views - Last Post: 18 May 2013 - 10:50 PM

#1 AIintern  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 06-June 12

Making Image Move with loop.

Posted 17 May 2013 - 10:15 AM

im trying to make a game. I want my player to be an image.

I have a loop set up and with several other images that make him look as if he is walking

For example.. If i wanted to make a growing line of X's
Img 1= X
IMG 2= XX
IMG 3= XXX


but I cannot get player to be set up as any image..
Also how will I call the loop for when he is moving right up or down?

will i just put the call in the

"If key.down" statement?

  <script type="text/javascript">
     var CANVAS_WIDTH= 480;
	 var CANVAS_HEIGHT = 320;
	 
	 var canvasElement = $("<canvas width=' " + CANVAS_WIDTH + " ' height =' " + CANVAS_HEIGHT + " '></canvas>");
	 
	 var canvas = canvasElement. get(0).getContext("2d");
	 canvasElement.appendTo('body');
	 
	 var FPS = 30;
	 setInterval(function() {
		 update();
		 draw();
	 }, 1000/FPS);
	 
	 var textX = 50;
	 var textY = 50;
	 
	 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; 
		 }
		 if (keydown.down){
			player.y +=5; 
		 }
		 
	 player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
	 player.y = player.y.clamp(0, CANVAS_HEIGHT - player.height);
	}
	
	
function walkRight()
{
	var count = 1;
      function TimerSwitch(pic) {
        TimerRunning=true;
        var timer = setTimeout(function() { SwitchPic(pic) }, 100);
      }
      function SwitchPic(pic) {
		  if(count <= 4)
		  {
       		pic.src ="walkright"+count+".png";
			count++;	
		  }
		 else
		 {
		 	count=1;
		 	pic.src ="walkright"+count+".png";
		 }
      }
}

	
	 function draw() {
		 canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		 player.draw();
		 }
		 
	  var player = {
  		  x: 220,
  		  y: 270,
	 	  width: 32,
  		  height: 32,
  		  draw: function() {
    	  canvas.fillStyle = this.color;
    	  canvas.fillRect(this.x, this.y, this.width, this.height); 	 
	  	  }
	  };
    </script>


Is This A Good Question/Topic? 0
  • +

Replies To: Making Image Move with loop.

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Making Image Move with loop.

Posted 18 May 2013 - 10:50 PM

Hello,

I am not 100% sure I understand what it is you are trying to achieve here, so I have taken some bits of your code and refashioned the bit regarding the direction of a player image. This code is untested and simply to give you an idea of how I think things should look, hopefully poking you in the right direction.
// We declare these in the global scope so we can reach them from multiple functions!
var currentAnimationStep = 1,
	currentDirection = 'right';

// It's generally good practice to have a set function for variables we want to change rather than just
// changing them from all over the place.	
function setDirection(direction)
{
	currentDirection = direction;
}

function animationStep()
{
	// If we reach step 5, go back to step 1.
	if (currentAnimationStep > 4)
		currentAnimationStep = 1;
	
	// We assume here that playerImage is a global pointer to an img element, defined somewhere else.
	playerImage.src = "walk" + currentDirection + currentAnimationStep + ".png";
}

setTimeout(animationStep, 100); // Set a timeout to call animationStep every 100 miliseconds.

On a side note, you really shouldn't put functions inside other functions like you have done in your code, that's not how things are done.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1