Подбрасывание карт при клике и увеличение счета в 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.

Похоже, у вас есть набор карт 4х6.При создании этих карт установите .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, Нажмите на изображение и Наведи ребенка наверх Официальные примеры стоило бы посмотреть на обработку событий и создание группы элементов.

console.log(arguments); - мой любимый способ определения того, что передается в различные функции, когда Phaserвызывает их, и вы сможете убедиться, что сможете определить, какая карта была нажата по переданным аргументам.

Конечно, вы можете добавить пользовательские свойства в спрайт после того, как создали его какну или в идеале (но более продвинутый) создать новый тип объекта, который расширяет Phaser.Sprite.Если вы используете что-то вроде TypeScript, вам нужно сделать последнее.

В вашей функции turn вы можете проверить, сколько карт уже перевернуто, если есть, перевернуть карты, определитьесли карты одинаковые, увеличьте счет игрока и установите / запустите / остановите таймер фазера, если необходимо.Учитывая все это, было бы лучше, если бы вы столкнулись с проблемами в коде. Лучше попробовать самим и задать другой вопрос.

См. Официальные Пользовательские таймеры и .Basic Timed Event примеры, а также документация Phaser.Timer .

Если вы столкнетесь с проблемами кода, так как вы реализуете таймер, который был бы хорош как другой вопрос.*