How to tile and manipulate a card created with the zim flipper

Questions
1

I am having difficulty looping labels across an array of cards created with ZIM's flipper and tile functions. In the code below, the front and back labels are only being added to the first card instead all of the cards being created. Also, how can I tell when flipped cards are matching? I am trying to create a version of the example matching game. Thanks for the help!

let rows = 3;
let cols = 4;

let cards = [
    { front: "?", back: "1" },
    { front: "?", back: "2" },
    { front: "?", back: "3" },
    { front: "?", back: "4" },
    { front: "?", back: "5" },
    { front: "?", back: "6" },
    { front: "?", back: "1" },
    { front: "?", back: "2" },
    { front: "?", back: "3" },
    { front: "?", back: "4" },
    { front: "?", back: "5" },
    { front: "?", back: "6" }
];

let deck = [];

loop(cards, (card, i) => {
    let frontSide = new Rectangle({
        width: 200, height: 200, corner: 20, 
        color: purple, borderColor: black
    });

    let backSide = new Rectangle({
        width: 200, height: 200, corner: 20, 
        color: orange, borderColor: black
    });

    let frontLabel = new Label(card.front, 40).center(frontSide);
    let backLabel = new Label(card.back, 40).center(backSide);

    let flipper = new Flipper({
        front: frontSide,
        back: backSide,
        reverse: true,
        interactive: true
    }).sca(0.7);

    deck.push(flipper);
});

new Tile({
    obj: deck,
    cols: cols,
    rows: rows,
    spacingH: 20,
    spacingV: 20
}).center();

S.update();

}

2

That is a ZIM VEE issue. The tile will randomly pick from an array unless you set the unique parameter to true.

To find out if they are matching you would test the labels to see if they are the same. You could get the flipper.back.getChildAt(0) to access the label. Bit it would be better if you stored the label as a property of the side:

backside.label = new Label(card.back, 40).center(backSide);

Then you can access it with flipper.back.label - when you flip the first one you will store that in a variable. When you flip the second one see if its label is the same as the stored value.

1 Like
3

Thanks!

1 Like