在画布上更改时，不同的对象会相互影响。 （对象克隆问题？）

Question

基本上，我在javascript中从头创建了自己的spritesheet类。 It works perfectly when I only try to animate one of the same spritesheet at a time.（不是最好的GIF，但你可以看到它在行动）。 However, once I start animating the cloned spritesheet on other characters, weird stuff starts happening.当它正常工作时，每个方向有3个不同的帧（3个独特的帧，每个动画4个），当它被窃听时，它似乎主要被卡在第2帧上，有时会闪烁第1帧。尽管在$ .extend（）中使用了jQuery的深层副本，但实际上听起来像是在某些地方使用ref克隆对象;

现在，我实际上并不确定这会出现什么问题，尽管它在逻辑上看起来很明显。我一直在调试器中，我找不到任何会导致/表明这种情况的破坏逻辑。事实上，当我在调试器中逐帧浏览时，我没有得到（视觉上）问题，所以它几乎看起来像是画布的图形错误。在Chrome和＆amp ;;中获得相同的结果IE浏览器。我会尽可能地为你们隔离问题;如果您想要更多代码，请告诉我。我真的没有看到我的spritesheet / player类中的错误逻辑是什么，因为当只有一个时它可以正常工作。我认为克隆它们的方式有问题，因为它们根本不应该相互影响。我加倍检查我的Player和Spritesheet类很多，以确保我没有弄乱范围（例如创建一个全局变量而不是字段）。我将提供我尝试创建和克隆这些对象的代码...

我对JavaScript中的面向对象相当新，所以我在下面添加了一个小类片段，以防我在尝试创建字段的方式做得不好，并搞砸了范围。但是我对随机虚拟对象做了很多测试，我没有看到任何问题。

//image preload
var playerSpritesheetImg = new Image();
playerSpritesheetImg.src = "content/playerSpritesheet.png";


$(document).ready(function()
{
    // create main game canvas
    $("<canvas/>", {id: "gameCanvas"}).appendTo("body");
    $("#gameCanvas").attr("width", CANVAS_X);
    $("#gameCanvas").attr("height", CANVAS_Y);
    $("#gameCanvas").css("position", "relative");
    $("#gameCanvas").css("border", "1px solid black");

    // get context
    ctx = $("#gameCanvas")[0].getContext("2d");

    // Initialize player's spritesheet
    playerSpritesheet = new Spritesheet(playerSpritesheetImg, 32, 64, 1);    
    // (spritesheet's animations initialization ...)
    
    // duplicate player spritesheet to new objects in order for them to not use the same sprites/animations.
    ps2 = new Object();
    ps3 = new Object();
    $.extend(true, ps2, playerSpritesheet);
    $.extend(true, ps3, playerSpritesheet);

    player = new Player(playerSpritesheet, 128, 128, Elements.Fire);
    player2 = new Player(ps2, 256, 256, Elements.Water);
    player3 = new Player(ps3, 384, 384, Elements.Earth);
    
    //...more onload stuff..
}
    
// Example class fields; potential problem (not actual code)
function Spritesheet(img)
{
    // these properties should be normal class properties?
    this.animations = new Array();
    this.img = img;
  
    // private field used only within class?
    var isThisKindOfFieldBad? = 0;
    var currentFrame = 0;
    var currentAnimationIndex = 0;
    var currentAnimationPosition = 0;
    
    // function which changes both public properties and private fields
    this.Play = function(name)
    {
        // gets animation index from name, then in Update() increment currentAnimationPosition as needed                   
    }
    
    this.Update()
    {
        // (currentAnimationPosition++ or loop back to 0 if > animationFrames.length) then switch currentFrame:
        currentFrame = this.animations[currentAnimationIndex].animationFrames[currentAnimationPosition];
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我尝试以不同的方式使用jQuery.extend（），没有深拷贝和直接赋值。我也试过复制玩家而不是spritesheets。我想补充一点，spritesheet类的主要功能是基于嵌套数组（如我的类片段中所述）：SpritesheetName.animations[animation].animationFrames[frame];所以如果副本出现问题，可能与此有关。而且，它们都是从同一图像被绘制到画布上，可能会导致问题吗？对于这一切的模糊性我感到很抱歉，希望有人可以看到克隆的明确问题。任何帮助将不胜感激。