Не можете установить заданный интервал?

Question

Независимо от того, что я делаю, я не могу заставить этот бит кода работать, часть, в которой вы устанавливаете интервал в методе рисования, и вызовет метод Loop 4 раза за две секунды, каждый вызов отображает другое изображение. В настоящее время ничего не показывает? И проблема не в изображениях и т. Д., Поскольку он работает с одним изображением. Были в этом в течение 2 дней ..

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.hasHit = false; 
this.frame = 0; 

} 

Explosion.prototype.draw = function() 
{ 

if(this.hasHit == true && this.frame < 5) 
{ 

    var t=setTimeout(Explosion.Loop,500); 

} 

if(this.frame == 5) 
{ 
clearTimeout(t); 
this.hasHit = 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++; 

} 


} 

Answer 1

У вас есть несколько проблем:

1. Explosion.Loop не существует; в обычных классических языках ваша ошибка будет известна как «попытка вызвать метод экземпляра, как если бы он был статичным». Что вы могли бы сделать, это вместо этого передать Explosion.prototype.Loop или this.Loop, но это тоже нехорошо: JavaScript this является динамичным, и вы в конечном итоге попытаетесь получить и установить свойства на window, а не на свой объект.

   Что вам нужно сделать, это использовать this.Loop, но убедитесь, что this не потерян. В более поздних версиях браузеров, что может быть сделано с bind :

   setTimeout(this.Loop.bind(this), 500); 
   

   Если они достаточно новый, чтобы поддержать canvas, они, вероятно, поддерживают bind.

2. setTimeout позвонит только после вашей функции; если вы хотите, чтобы его вызывали каждые полсекунды, а не только раз в полсекунды, вместо этого вам нужно будет использовать setInterval.

3. Доступ к переменным экземпляра, как если бы они были локальными переменными. В некоторых местах (например, в frameLoop), вы обращаетесь frame так:

   frame++; 
   

   К сожалению, frame не локальная переменная; это свойство this. В отличие от некоторых других языков, вы должны явно квалифицировать:

   this.frame++; 
   

   Как уже упоминалось ранее, frame это не единственная переменная с этой проблемой.