Question

到目前为止，我已经拿到翻盖卡片来显示，翻盖卡片后面的未翻盖卡片显示正确的字母。剩下的就是以一种方式使它发生变化：当我单击一个卡时，它会翻转并显示翻转的卡，然后，当我单击另一个卡时，会发生相同的事情，但请记住；

点击卡片后，开始5秒钟的计时器，如果不执行其他任何操作，卡片将翻转回去，但是如果在此时间内单击第二张卡片且与之匹配，则如果未翻转卡片，则得分会提高回来。

我要去的地方的代码如下；

    var game = new Phaser.Game(1000,750,Phaser.CANVAS,'gameDiv');

var background_pic;

var card_1;
var CardStacks;

var text;

var card_back;
var card_BackStacks;

// var firstClick, secondClick;
var score;
// var myCountdownSeconds;

// var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];
var array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H', 'I', 'I', 'J', 'J', 'K', 'K', 'L', 'L'];

// var flipSpeed = 200;
// var flipZoom = 1.2;


var mainState = {

    preload: function() {

        // game.load.image('backgrounds', "assets/bg.jpg");
        game.load.image('Card_1', "assets/cards/plain.png");
        game.load.image('Back', "assets/cards/back.png");
    },

    create: function() {

        game.add.text(380, 10, 'Sun-Tiles', 
            {fill : 'blue',
            fontSize : '50px'

        });

        score = game.add.text(800, 30, 'Score: 0', 
            {fill : 'white',
            fontSize : '20px'

        });


        card_1 = game.add.sprite(0,0, 'Card_1');
        card_1.anchor.setTo(0);
        card_1.visible = false; //sets original tile invisible by default.

        card_1 = game.add.group();
        card_1.enableBody = true;
        card_1.physicsBodyType = Phaser.Physics.ARCADE;

        createTiles();

        text = game.add.group();
        // text.enableBody = true;
        // text.physicsBodyType = Phaser.Physics.ARCADE;

        // var score = game.add.group();
        // score.add(game.make.text(10,10, "Score: " + 100,  { font: "32px Arial", fill: generateHexColor() }))


        card_back = game.add.sprite(0,0, 'Back');
        card_back.anchor.setTo(0);
        card_back.visible = false;  //sets original tile invisible by default.

        card_back = game.add.group();
        card_back.enableBody = true;
        card_back.physicsBodyType = Phaser.Physics.ARCADE;

        // card_1.event.onInputDown.add(this.finalScore, {'points':0}, this); //
    },

    update: function() {

    if (game.input.isDown)
    {
        turn();
    }

    }
}

// function countScore () {
// counting number of matches

//     //  Add and update the score
//     // score += 15;
//     scoreText.text = 'Score: ' + score;

// }

var shuffledCards =Phaser.ArrayUtils.shuffle(Array.from(array));

function createTiles() {
    for(var y = 0; y < 4; y++) {
        for(var x = 0; x < 6; x++) {
            CardStacks = game.add.sprite(x*160 + 20,y*160 + 90,'Card_1');

            card_1.inputEnabled = true;

            var style = { font: "100px Chiller", fill: "blue", wordWrap: true, wordWrapWidth: 150, align: "center"}; //The style to be applied to the text on cards.

            // Phaser.ArrayUtils.shuffle(array);

            // text = game.add.text(0,0, Phaser.ArrayUtils.getRandomItem(array), style);
            text = game.add.text(0, 0, shuffledCards.pop(), style); // shuffles cards and makes sure maximum of only 2 are produced. shuffles the array once, before your loop. Then, in the loop, remove one element for every card to prevent duplicates:

            text.x = 40; text.y = 20; //setting all the text to the right spot along the X and Y axis on the blank card.
            CardStacks.addChild(text); // making the text variable a child of the tile(blank card) variable. 

            card_BackStacks = game.add.sprite(x*160 + 20,y*160 + 90,'Back'); //to reveal the unflipped cards
        }
    }

    tween.onLoop.add(descend,this);
}

// function finalScore () { // function to increament score upon match
//  score.text  = 'Score: ' + (this.point + 10);
// }

game.state.add('mainState', mainState);

game.state.start('mainState');

任何人都可以帮助我提供代码。

Answer 1

由于我要写这篇文章，所以我最终将重构您的大部分代码-因为您正在重用变量来存储不同的对象（例如，请参见card_1）-并且您的问题在SO的范围，有关如何启用turn函数来触发的建议，以及有关如何在Phaser中实现此功能的一些常规建议。

看来您有4x6的卡片围。创建这些卡时，在添加它们时在每个精灵上设置.inputEnabled = true;。然后，您可以将事件监听器绑定到每张卡上，turn则为.events.onInputDown.add(turn, this);

类似这样的东西：

// Since you're setting your text to the same style, this can be pulled out of your for loop.
var style = { font: "100px Chiller", fill: "blue", wordWrap: true, wordWrapWidth: 150, align: "center"};

for (var y = 0; y < 4; y++) {
    for (var x = 0; x < 6; x++) {
        var individualCard = game.add.sprite(x*160 + 20,y*160 + 90,'Card_1');

        individualCard.inputEnabled = true;
        individualCard.events.onInputDown.add(turn, this);
        // ...
    }
}

这将允许您删除update函数中的内容。由于每种都有精灵，因此无需为输入添加通用处理程序。

由于您似乎正在使用Phaser 2，因此Click On An Image和Bring A Child To Top官方示例值得用于事件处理和创建一组项目。

console.log(arguments);是我最喜欢的方法，用于确定在Phaser调用它们时正在传递给各个函数的内容，并且您将能够确定从传递的参数中单击了哪个卡片。

当然，您也可以在创建精灵后向其添加自定义属性，或者理想情况下（但更高级）创建一种扩展Phaser.Sprite的新型对象。如果您使用类似TypeScript的东西，则需要使用后者。

在您的turn功能中，您可以查看已移转的卡数（如果有），移转卡，确定卡是否相同并增加玩家得分，以及设置/开始/根据需要停止相位器计时器。在这种情况下，最好自己动手做一下，再问另一个问题，如果遇到代码问题。

请参见Custom Timer和Basic Timed Event官方示例，以及Phaser.Timer documentation。

如果在实现计时器时遇到代码问题，那将是另一个问题。

在Phaser中翻转卡片并增加分数

1 个答案: