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

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） - 你的问题的范围有点太大了所以，关于如何启用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。

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