使用 Phaser Framework 创建内存拼块匹配游戏....各种问题

Question

首先，我目前的问题是因为我想要在移相器中以 6x4 格式排列 2 张卡片。从这些卡片中，每个卡片将有 2 张卡片，其中一张是带有字母的普通卡片，另一张是卡片的后端（所有卡片都会覆盖它们）。当我点击时，卡片会显示下面的内容，当他们点击另一张卡片并且匹配时，你得分。

我存储字母的数组导致字母显示正常，但不是每个字母显示 2 个，它有时显示 4 个相同的字母，有时只显示一个或根本不显示，因为我只放了数组中要洗牌并显示在卡片上的元素的正确数量。

除了基本的 HTML 和导致我的 main.js 和 phaser.min.js（或 phaser.js 取决于我如何保存文件）的脚本标记之外，下面是代码：

    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 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;

        // createBackTiles();

        // scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#' });
    },

    update: function() {
    }
}

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

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

// }

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

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

game.state.start('mainState');

Answer 1

对于每张卡片，您都将字母数组洗牌并随机选择一个。这不会从数组中删除元素，这意味着对于下一张卡片，您可以轻松地意外选择相同的项目：

for (var y = 0; y < 4; y++) {
  for (var x = 0; x < 6; x++) {
    // ...

    Phaser.ArrayUtils.shuffle(array);
    text = game.add.text(0, 0, Phaser.ArrayUtils.getRandomItem(array), style);
  }
}

相反，在循环之前将数组 洗牌一次 。然后，在循环中，为每张卡片删除一个元素以防止重复：

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

for (var y = 0; y < 4; y++) {
  for (var x = 0; x < 6; x++) {
    // ...

    text = game.add.text(0, 0, shuffledCards.pop(), style);
  }
}

使用 Phaser Framework 创建内存拼块匹配游戏....各种问题

Creating A Memory Tile Match Game with Phaser Framework....Various Problems

javascript

arrays

phaser-framework