使用相位器框架创建内存图块匹配游戏.各种问题

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