使用Phaser框架创建一个内存块匹配游戏。...各种问题

时间:2018-09-19 11:32:21

标签: javascript arrays phaser-framework

首先,我当前的问题是由于我要在相位器中将2张卡以6x4格式排列的事实。通过这些,每个磁贴将具有2张卡,其中一张是带有字母的普通卡,另一张是卡的后端(所有卡都将这些卡覆盖了它们)。当我单击时,这些纸牌将显示下面的内容,而当他们单击另一张纸牌且匹配时,您将得到一个分数。

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

除了导致我的main.jsphaser.min.js(或phaser.js,具体取决于我保存文件的方式)的基本HTML和脚本标记之外,下面还有代码:

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

1 个答案:

答案 0 :(得分:0)

对于每张卡,您都可以洗净字母数组并随机选择一个字母。这不会从数组中删除该元素,这意味着对于下一张卡片,您可以很容易地意外选择相同的项目:

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