niedziela, 8 marca 2015

#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:,39370.0.html

Link to video of the game:

Match game algorithm:
Problems while creating match game involves:
  1. Creating a matrix of cards
  2. Applying which card has which picture
  3. Revealing card upon click
  4. 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

Code represents 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.

Stencyl, match, card, game, memory,