PIXI.JS - 逐步删除老虎机游戏卷轴

时间:2017-10-09 11:53:39

标签: javascript pixi.js

我正在学习编写老虎机游戏的代码,我有以下代码来处理游戏的旋转。我想在卷轴上添加一个边框,并让精灵逐渐消失在边框后面,然后将它们移除并返回到顶部。

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

我应该寻找什么?

我曾尝试让Sprites成为边境的孩子,但当他们移出边境时,他们仍然可见。

1 个答案:

答案 0 :(得分: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();
}