PIXI.JS - 逐步刪除老虎機遊戲滾輪

Question

我正在學習代碼老虎機遊戲的過程，我有下面的代碼來處理遊戲的旋轉。我想添加一個邊框到卷軸上，讓它們在被移除並返回到頂部之前逐漸消失在邊框後面。

功能spingame（）{

spin.interactive = false; 

if (reelcount === 2){ 
    if((reel[0].y >= 10) && (reel[5].y >= 400) && (reel[10].y >= renderer.height/790)){ 

     cancelAnimationFrame(spingame); 
     reelcount = 0; 
     console.log(reelarray); 
     checkwinnings(); 
     balanceUpdate(); 
     spin.interactive = true; 
     refresh(); 
    } 
    else{ 
     for (var i = 0; i < 15; i++){ 
      reel[i].y += anispeed; 
     } 

     requestAnimationFrame(spingame); 
     refresh(); 
    } 
} 

else if (reel[0].y >= 790) { 
     cancelAnimationFrame(spingame); 
     rowNo = 5; 
     reelSet(); 
     for (var i = 0; i < 5; i++) { 
      reel[i].y = 10; 
     } 
     refresh(); 
     spingame(); 
     reelcount = reelcount + 1; 
    } 
    else if (reel[5].y >= 790) { 
      cancelAnimationFrame(spingame); 
      rowNo = 10; 
      reelSet(); 
      for (var i = 5; i < 10; i++) { 
       reel[i].y = 10; 
      } 
      refresh(); 
      spingame(); 
     } 
     else if (reel[10].y >= 790) { 
       cancelAnimationFrame(spingame); 
       rowNo = 15; 
       reelSet(); 
       for (var i = 10; i < 15; i++) { 
        reel[i].y = 10; 
       } 
       refresh(); 
       spingame(); 
      } 

    else{ 
      for (var i = 0; i < 15; i++) { 
       reel[i].setTexture(symb[reelarray[i]]); 

       reel[i].y += anispeed; 
      } 
      requestAnimationFrame(spingame); 
      refresh(); 
     } 

我應該怎麼找？

我試過讓精靈成爲邊界的一個孩子，但是當他們移動到邊界之外時他們仍然可見。

Answer 1

原來我在找錯地方。將屏蔽分配給屏幕中央的矩形並且它正在工作

var masksContainer = new PIXI.Container(); 
stage.addChild(masksContainer); 
var mask = new PIXI.Graphics(); 
mask.beginFill(0xffffff); 
mask.drawRect(renderer.width/6 , renderer.height/7, renderer.width/1.6 , renderer.height/1.3); 
mask.endFill(); 
masksContainer.addChild(mask); 

for (var i = 0 ; i < 15; i++){ 
    masksContainer.addChild(reel[i]); 
    reel[i].mask = mask; 
    refresh(); 
}