#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0

    Issue with setInterval


    Hi everyone, So I am trying to use an animation with 4 diff images for an explosion in my game. So far I can make it work with just 1 image but I want it to loop through the 4 images with half a second inbetween them.

    Here is it in action running with the code below:
    http://www.taffatech.com/DarkOrbit.html

    This is my code for the explosion class where the issue lies:

    Code:
    function Explosion() //space weapon uses this
    {
    this.srcX = 0;
    this.srcY = 1250;
    this.drawX = 0;
    this.drawY = 0;
    this.width = 70;
    this.height = 70;
    this.currentFrame = 0;
    this.totalFrames = 10;
    this.ha**** = false;
    this.frame = 0;
    
    }
    
    Explosion.prototype.draw = function()
    {
    
     if(this.ha**** == true)
     {
     
       this.Loop();
     
     }
     
     if(this.frame == 5)
     {
    
     this.ha**** = false;
      this.frame = 0;
     }
     
     
    
    }
    
    Explosion.prototype.Loop = function()
    {
    
    ctxExplosion.clearRect ( 0 , 0, canvasWidth , canvasHeight );
     
     
      
    if(this.frame == 1)
    {
      
       ctxExplosion.drawImage(spriteImage,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
       frame++;
    }
    
    else if(this.frame == 2)
    {
      
        ctxExplosion.drawImage(spriteImage,this.srcX,(this.srcY + 77),this.width,this.height,this.drawX,this.drawY,this.width,this.height);
       frame++;
    }
    
    else if(this.frame == 3)
    {
      ctxExplosion.drawImage(spriteImage,this.srcX,(this.srcY + 154),this.width,this.height,this.drawX,this.drawY,this.width,this.height);
       frame++;
       
    }
    
    else if(this.frame == 4)
    {
      ctxExplosion.drawImage(spriteImage,this.srcX,(this.srcY + 231),this.width,this.height,this.drawX,this.drawY,this.width,this.height);
       frame++;
       
    }
    
    if(this.frame <= 4)
    {
    setTimeout(this.Loop,500);
    }
    
    
    
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, Wayne.

    It looks like scope issue. setTimeout always executes form the global scope. Try this:
    Code:
    var instance=this;
    
    if(this.frame <= 4)
    {
      setTimeout(function()
      {
        instance.Loop();
      },500);
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0
    Hmm it does not seem to work,

    I added this yet nothing happens

    Code:
    var instance=this;
    
    if(this.frame <= 4)
    {
      setTimeout(function()
      {
        instance.Loop();
      },500);
    }

    what does the var instance = this; do? And why cant I use Explosion.Loop(); ? Thanks I'm very new to this and thanks for the welcome!

IMN logo majestic logo threadwatch logo seochat tools logo