**#Stencyl: Match game**

Difficulty:
(5.5/10)

**What is a match game?**

In
match games you start with set of covered cards. Upon clicking two
cards they are revealed. If they have the same picture they are
removed from the table. If cards have different pictures they are
covered. The purpose of the game is to remove all cards from the
table.

Example of match game

**Original request:**

**Follow the link to get to the finished game:**

http://community.stencyl.com/index.php/topic,39370.0.html

**Link to video of the game:**

https://www.youtube.com/watch?v=YXbD5IMIkKs&feature=youtu.be

**Match game algorithm:**

Problems while creating match game involves:

- Creating a matrix of cards
- Applying which card has which picture
- Revealing card upon click
- Comparing 2 cards and effects of comparing

**How to play:**

In my Stencyl
game there are 12 cards on the table. You click on two of them. Cards
are revealed. After revealing player waits for some time. If cards
have the same picture they are removed. If not they are covered.

**Creating a matrix of cards:**

What we are
trying to achieve is something like this:

Cards matrix

Let's
deal with creating a single row first. We pick a place(x,y) were we
want to place our first card(red). How do we know where to place next
card(yellow)? In the same row y coordinate will be the same for the
all cards in that row. So all we need to do is update x coordinate of
red card to get x coordinate of yellow card. We don't want cards to
overlap so we add <width of last created> to <x>. We
want some spaces between cards as well. So we add additional <40>
to <x>.

Single row of cards matrix

code
for creating single row

Going
to another row

We have dealt
with single row but how do we move to the next one? We want to have 4
cards in each row. So after 4_th card we want to start form the
beginning of the next row. It means we want to change y coordinate of
the next card in the same fashion as we were changing x coordinate
for single row. The first card in new row must have the same x
coordinate as the first card (<x_start>).

Everything is
fine but we can't limit ourselves to saying that after 4_th we want
to start from new row. Because in the second row we want to do it
after 8_th card. For 3_rd row after 12_th card and so on. We could
count cards in each row and ones it hits 4 move on to new row but
instead we can use <remainder of .../number of cards in row>.

Code
for creating a matrix of cards

**Applying which card has which picture:**

In
my game I have 12 cards. This means there are 6 types of cards
(12/2). What we want is to give each card a number from range 0-5 at
random and there should be always a pair of numbers.

At
first we generate list filled with 0s. This list will tell us how
many cards of given type has already been created.

Then
after generating list for each card we pick index(i) in the list at
random. If value from list[i] is smaller than 2 we give a card number
of index and we increase list[i] by 1. If value in list is equal 2
that means that there is already a pair of cards with the same
picture/number and this number can't be given anymore. If we can't
give number (i) let's try i+1,i+2,i+3, etc. until we find list[i]<2.
If (i) is out of range we move to the beginning of the list using
remainder/(number of elements in list).

List
of card types in different situation: A – list at the beginning, B
– list after giving 2 to the first card , C – list after 6 cards
with given twice values: 2,3,4; 2,3,4 – can't be use anymore

Giving
the number of picture to the card

**Revealing card upon click**

As we
click on the screen we need to figure out if we clicked on actor. As
we created card actors we added them to the list. Upon clicking we
ask if clicking was possible. Further info about disabling clicking
in <comparing 2 cards>. Let's say clicking is available. We ask
each card in the list if at the time of clicking mouse was placed on
them.

Let's
say we clicked at the card. Before we proceed we must ask card some
questions. We ask card if it's alive. I don't kill cards in Stencyl
sense but instead I hide them and say they are dead. This approach
decreases chances of referring to destroyed object (and shutting down
the game). We ask additionally if card isn't already uncovered.

If
all conditions are met we tell card to change its animation based on
its number. If it's the second card revealed we move on to checking
if these two cards have the same picture.

Code represents on click event

**Comparing 2 cards and effects of comparing**

After
uncovering second card I give 1.5 second of time for player to take
look at cards. During this time clicking won't take effect(<click
avaible>=1). After 1.5 seconds game checks if numbers of uncovered
cards are equal or not. If they are that means that cards have same
pictures. Cards are hidden and marked as dead (alive=1). If they are
different they are covered.

Regardless
of result of comparing we want to return to basic state. That means
we make clicking cards available and we set number of revealed cards
to 0.

Tags:

Stencyl, match, card, game, memory,