Add Scramble

03-orange/06-scramble.js

@@ -0,0 +1,89 @@
+/** 
+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);
+    }
+}