2017-10-09 86 views
1

我正在学习代码老虎机游戏的过程,我有下面的代码来处理游戏的旋转。我想添加一个边框到卷轴上,让它们在被移除并返回到顶部之前逐渐消失在边框后面。PIXI.JS - 逐步删除老虎机游戏滚轮

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

我应该怎么找?

我试过让精灵成为边界的一个孩子,但是当他们移动到边界之外时他们仍然可见。

回答

0

原来我在找错地方。将屏蔽分配给屏幕中央的矩形并且它正在工作

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