JavaScriptで1つのオブジェクトのインスタンスを2つ作成できません

Question

アニメーションをレンダリングするためにこのコードを作成しました。これは1つのアニメーションでうまくいくようです。しかし、オブジェクトの2つ以上のインスタンスを作成しようとすると、すべてが混ざり合って、何もレンダーされなくなります。

var animate = function(id,sprite){ 
var sprites = sprite; 
var imageID = id; 
var arize = document.getElementById(imageID); 
var spriteID; 
var animationSprites; 

console.log("before switch: sprite: " + sprite + "imageID: " + imageID + "element: " + arize + "animationSprites: " + animationSprites) 

switch(sprites) { 
    case "appear": 
     animationSprites = appear; 
     spriteID = "appear"; 
     break; 
    case "die": 
     animationSprites = die; 
     spriteID = "die"; 
     break; 
    case "slap": 
     animationSprites = slap; 
     spriteID = "slap"; 
     break; 
    case "walk": 
     animationSprites = walk; 
     spriteID = "walk"; 
     break; 
    default: 
     animationSprites = idle; 
     spriteID = "idle"; 
} 

console.log(sprites.length) 
console.log("after switch: sprite: " + sprite + "imageID: " + imageID + "element: " + arize + "animationSprites: " + animationSprites) 

this.animateThis = function() { 

    arize.src = animationSprites[i]; 
    i++;  
    setTimeout(function() {   
     if (i < animationSprites.length) { 
      console.log(i) 
      showings(); 
      if (i== animationSprites.length -1) { 
       i=0; 
      }  
     } 
    },50); 
} 

function showings() { 
    var showZombieTwo = new animate("imgs", "slap"); 
    showZombieTwo.animateThis(); 
    //var showZombieOne = new animate("imgs1", "idle"); 
    //showZombieOne.animateThis(); 
} 

複数のアニメーションを同時にレンダリングするにはどうすればよいですか？

Answer 1

showing関数はanimate関数内にあります。つまり、1つのスプライトでアニメーション化すると、すべてがアニメーション化されます。もちろん、これは1つだけではなく、1つだけでも動作します。

アニメーションから別のアニメーションに簡単に切り替えるためのコードを少し書き直しました。これは初期の意図だったと思います。

また、spriteIDの変数を教えてください。私はコードのどこにもその使用を見ません。 freedomn-M @

// assumed variables 
var i = 0, 
    appear = [/* array of src strings */], 
    die = [/* array of src strings */], 
    slap = [/* array of src strings */], 
    walk = [/* array of src strings */]; 


var animate = function(imageID, sprite) { 
    var that = this; 
    var sprites = sprite; 
    var arize = document.getElementById(imageID); 
    var spriteID; // What is the purpose of this variable? 
    var animationSprites; 

    console.log("before switch: sprite: " + sprite + "imageID: " + imageID + "element: " + arize + "animationSprites: " + animationSprites); 

    this.currentAnimationFrame = 0; 

    this.setCurrentAnimation = function(animationName) { 
    // reset animation 
    that.currentAnimationFrame = 0; 

    switch (animationName) { 
     case "appear": 
     animationSprites = appear; 
     spriteID = "appear"; 
     break; 
     case "die": 
     animationSprites = die; 
     spriteID = "die"; 
     break; 
     case "slap": 
     animationSprites = slap; 
     spriteID = "slap"; 
     break; 
     case "walk": 
     animationSprites = walk; 
     spriteID = "walk"; 
     break; 
     default: 
     animationSprites = idle; 
     spriteID = "idle"; 
    } 

    return spriteID; 
    } 

    this.animateThis = function() { 
    arize.src = animationSprites[that.currentAnimationFrame]; 
    that.currentAnimationFrame++; 

    setTimeout(function() { 
     if (that.currentAnimationFrame >= animationSprites.length) { 
     that.currentAnimationFrame = 0; 
     } 
     that.animateThis(); 
    }, 50); 
    } 

    // setting the init animation 
    this.setCurrentAnimation(sprite); 
} 

var showZombieTwo = new animate("imgs", "slap"); 
showZombieTwo.animateThis(); 

// braaaain 
showZombieTwo.setCurrentAnimation("walk"); 

// finally... 
showZombieTwo.setCurrentAnimation("die");