不能在JavaScript中创建一个对象的两个实例

Can't create two instances of one object in JavaScript

本文关键字：两个 实例 JavaScript 创建 一个对象 不能      更新时间：2023-09-26

我创建了这段代码来渲染一些动画。这似乎只适用于一个动画。然而，如果我尝试创建两个或多个对象的实例，一切都会混淆，没有任何渲染了。

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();
}

如何同时渲染多个动画?

showing函数位于animate函数内部，这意味着动画单个精灵将动画所有精灵。当然，当有一个，但只有一个时，这是有效的。

我重写了一些代码，使它容易从一个动画切换到另一个，因为我认为这是最初的意图。

你还能说出spriteID变量是什么吗?我在代码中没有看到任何地方使用它。

// 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");
相关文章：