cn-sensei-guides/03-orange/06-scramble.js

/** 
This activity uses arays and loops to store and spawn tile objects. The Player must click the tiles and find the matching pairs.
 */

//*************Scene Object - Initialize When Scene Starts Event********************//
//************************FUNCTIONS************************//
// this function takes an array
// shuffles it randomly and returns it
$this.shuffle = function(arr){
    arr.sort(() => random(1, -1));
    return arr;
};

$this.checkMatch = function() {
    // if there is a match
    if ($this.firstCard.picture === $this.secondCard.picture) {
        // remove the cards
        $this.firstCard.remove();
        $this.secondCard.remove();
    } else {
        // if the cards do not match
        // flip them over
        $this.firstCard.frameIndex(0);
        $this.secondCard.frameIndex(0);
    }
    // no matter what, clear out the firstCard and secondCard variables
    $this.firstCard = null;
    $this.secondCard = null;
    $this.isChecking = false;
};

// if the scene is in PLAY state
if ($this.scene.state() == "PLAY") {
    // initialize the array of cards
    $this.orderedCardList = [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8];
    // array stores the data and each number represents a card
    // randomize the array of cards
    $this.randomCardList = [];
    $this.randomCardList = $this.shuffle($this.orderedCardList);
    
    // set up helper variables for the loops
    var cardListIndex = 0;
    var cardSpacing = 100;
    var xOffset = 200;
    var yOffset = 70;
    
    // place the 16 cards
    // 4 cards in the x dirction
    for (var cx = 0; cx < 4; cx++) {
        // 4 cards in the y direction
        for (var cy = 0; cy < 4; cy++) {
            var cardClone = card.clone();
            // place cards in 4x4 grid using spacing
            cardClone.x(cx * cardSpacing + xOffset);
            cardClone.y(cy * cardSpacing + yOffset);
            // give the card a picture based on random array
            cardClone.picture = $this.randomCardList[cardListIndex];
            cardListIndex++;
        }
    }
    // hide the original card
    card.visible(false);
    // store references to the selected cards
    $this.firstCard = null;
    $this.secondCard = null;
    // track if the scene is checking for a match
    $this.isChecking = false;
}

//***********************card Object - Mouse Click Event************************//
// if the scene is not checking for a match
if ($this.scene.isChecking === false) {
    // when the player clicks the card
// show the picture of the card
$this.frameIndex($this.picture);

// if the user has not selected a first card
    if (!$this.scene.firstCard) {
        // save a reference to the card the player clicked
        $this.scene.firstCard = $this;
    } else if ($this != $this.scene.firstCard){
        // save a reference to the second card
        $this.scene.secondCard = $this;
        // set isChecking to true
        $this.scene.isChecking = true;
        // tell the scene to check for a match after a delay
        createTimer(1000,$this.scene.checkMatch, false);
    }
}