異なる配列から重複したタイルを追加するPIXI.js

Question

私はスロットゲームを作成しようとしています。 私は、私は彼らが2つの機能（私はこの作業を取得後、それらを結合します）

createReels1とcreateReels2

何を持っている瞬間のために、アレイ

var createSlots = function(){ 
    //setup images as tilingSprites 
var slot1 = new PIXI.extras.TilingSprite(t1, 200, 200); 
var slot2 = new PIXI.extras.TilingSprite(t2, 200, 200); 
var slot3 = new PIXI.extras.TilingSprite(t3, 200, 200); 
var slot4 = new PIXI.extras.TilingSprite(t4, 200, 200); 
var slot5 = new PIXI.extras.TilingSprite(t5, 200, 200); 
var slot6 = new PIXI.extras.TilingSprite(t6, 200, 200); 
var slot7 = new PIXI.extras.TilingSprite(t7, 200, 200); 
var slot8 = new PIXI.extras.TilingSprite(t8, 200, 200); 
var slot9 = new PIXI.extras.TilingSprite(t9, 200, 200);  
var slot10 = new PIXI.extras.TilingSprite(t10, 200, 200); 

//push slots into array; images, sprites etc. 
     mainSlotArr.push(slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, slot10); 

}; 

に入れて、いくつかの画像を持っていますmainSlotArrayをコピーしてシャッフル機能を使用する 次に、2つの列（リール）にそれぞれ割り当てます（現在、createReels2は1つのリールのみを扱います） それは使用する配列から配列要素を削除します

私が抱えている問題は、createReels2で使用されている画像タイルであれば、createReels1関数で使用されている場合は消えます。たとえば、image1.pngがcreateReels2とcreateReels1で使用されていれば、最初の2つのリールには表示されません。

createReels機能（ハードコーディングがたくさん！）以下

var createReels1 = function(){ 
    slotArr1 = mainSlotArr.slice(); 
    shuffle(slotArr1); 
    var counter = 0; 
    var num = 0 
for(var i = 0; i <2; i++){ 
    var slotContainer = new PIXI.Container(); 
    slotContainer.width = 100; 
    slotContainer.height = 400; 
    slotContainer.y = 100; 
    slotContainer.x = i*130; 
    stage.addChild(slotContainer); 
    slotContainerArr.push(slotContainer); 
    for(var j = 0; j < 3; j++){ 
     var slot = slotArr1[j]; 

     var toDel = slotArr1.indexOf(slot); 
      slot.scale.y = slot.scale.x = .5; 
      console.log(slot); 
     var nextY = j*(slot.height/2); 
      slot.y = nextY; 
      slotContainerArr[i].addChild(slot); 
      slotArr1.splice(toDel, 1);//remove from array 

     } 

    } 

} 


var createReels2 = function(){ 
    slotArr2 = mainSlotArr.slice(); 

    shuffle(slotArr2); 
    var counter = 0; 
    var num = 0 
for(var i = 0; i <1; i++){ 
    var slotContainer = new PIXI.Container(); 
    slotContainer.width = 100; 
    slotContainer.height = 400; 
    slotContainer.y = 100; 
    slotContainer.x = 260; 
    stage.addChild(slotContainer); 
    slotContainerArr.push(slotContainer); 
    for(var j = 0; j < 3; j++){ 
     var slot = slotArr2[j]; 
     var toDel = slotArr2.indexOf(slot); 
      slot.scale.y = slot.scale.x = .5; 

     var nextY = j*(slot.height/2); 
      slot.y = nextY; 
     slotContainerArr[2].addChild(slot); 
     slotArr2.splice(toDel, 1);//remove from array 
     } 

    } 

} 

Answer 1

私は簡単なチェックで、コードを正しく理解している場合：

スプライトは一つだけの親を持つことができます。 Spriteオブジェクトをチェックすると、実際には親プロパティがあります。したがって、slotArr1とslotArr2は同じSpriteを持ち、スライスしたIDは変更されません。そして、それらを異なるコンテナに割り当てると、あるコンテナから別のコンテナに移動します。あなたはテクスチャを再利用することができますが、Spriteは親にしか持てません。