Home‎ > ‎

Match Game

1. Playing a Matching Game
We are going to learn some shortcuts and helpful ideas by creating a Matching Game.

It will look like this:
                               

The object is to turn over the cards, two at a time, and using your memory, match them up. There are 6 different pairs of cards in this game. If the 2 cards you turned over match, they stay turned over and you try 2 more. If they do not match, they get turned back and you guess 2 more.

Here might be your first turn. 

                                 

You turned over 2 cards but they do not match, so they get turned over again and you try 2 different ones. Eventually, you will remember where each one was and get them all right.

2. Creating the Matching Game
I used 24 buttons - 2 for each choice ( each choice had a back and a front side). The backsides are named B1, B2,...B12 for 12 buttons. The frontside (answers) are named A1, A2,...A12. When the game starts, all the backsides are visible and the front sides are hidden. When the player clicks on a card, I will hide the backside and show the front side (e.g. if the user clicks on card #3 I will - hide button "B3", show button "A3")

SHORTCUT: Back sides - First I created and formatted the back side of the first button (named B1), then I held down the "Ctrl"/"Cmd" key and dragged off 11 copies. Then I opened up the property inspector and clicked on each card and changed the names to B2, B3, ...B12

Front sides - I created the first card, then did the same steps that I did for the backside but using the names "A1", "A2"... "A12"  For the Labels, I made them numbers to match (2 of each)

When the player clicks on the card, we will hide that button and show the button underneath
e.g. on button 1 we would have:
        on mouseUp
            hide button "B1"
            show button "A1"
        end mouseUp

We would need to put almost the same code on every button. 

That is a lot of work and repeated code. Instead we can take advantage of the message path and the object orientation of LiveCode

Instead of putting the code on each button, we would put the following code on the card script:

    on mouseUp
                hide the target
                put "A" & the second char of the short name of the target into x
                show button x
    end moueUp

What is happening here?
    When the mouse is released, a "mouseUp" message is sent out. LiveCode looks for a message handler for it. It looks first on the object, then in the card script, then the stack script. (See message path in the documentation to see all of the other places it also looks.)
    So no matter what you click on, if LiveCode does not find the handler on the object, it will look on the card and will find our "mouseUp" handler. The "Target" is what object was clicked on. That is how we tell where the message originated from.
    The first line of our code - "hide the target" - hides what ever was clicked on. So it will work with all the cards

    "target" - tells us what was clicked on      e.g. button "b3", image "rock", etc
    short name of the target - gives us just the name         e.g. b3, rock
    long name of the target - gives us the full name           e.g. button "b3" of card "matching" of stack "match game"

    the second line gets the number of the button and puts it after "A" to make up the answer button we want   e.g. A3
    the third line shows the button.
   
Now for the game logic
    We need to add the following logic:
        make sure that the player can only click on 2 buttons at a time
        if the 2 selected buttons do not match, hide them again and show the backs
        When all the cards are turned over, the game is over

        We also need a reset button to start a new game.

Assign the Variables
        We need to make variables to keep track of cards and we will make them global variables:
            global numClicked - this will be used to keep track of how many buttons were clicked - (only 2 allowed)
            global numLeft - this will track the number of cards left to turn over. When it is zero, then game is over.
            global card1, card2 - these will be the 2 cards turned over, we need to see if these match.
            global currCard

Start of the Logic 
See if you can follow the logic of the game as it is written below. This is a start. It may not work and it will give you some practice debugging. The rest of the code also has to be written...

      adding the code to the card:

                         global card1, card2
                         global numLeft, numClicked

                         on openCard
                            put empty into card1
                            put empty into card2
                            put empty into numClicked
                            put 12 into numLeft
                        end openCard
               
                        on mouseUp
                           if the first char of the short name of the target is "b" then
                                if Card1 is empty then
                                    turnCardOver
                                    put currCard into card1
                                else
                                    if card2 is empty
                                         turnCardOver
                                        put currCard into card2
                                        if card1 is equal to card2 then
                                                subtract 2 from numLeft
                                               if numLeft = 0 then
                                                        answer "Game over"
                                               end if
                                        else
                                               turnCardBack card1
                                               turnCardBack card2
                                       end if                       
                             end if   
                         end if   
                     end mouseUp
      
                  command turnCardOver
                            hide the target
                            put the second char of the short name of the target into currCard
                            put "A" & currCard into x
                            show button x
                  end turnCardOver

                 command turnCardBack cardNum
                          hide button "A" & cardNum
                          show button  "B" & cardNum
                          Add 1 to numLeft
                 end turnCardBack
 
            
Now test the code, debug it and add additional logic to make the game better
 
Comments