Tile Memory Game

Tile Memory game - Win the game by matching equivalent tiles.

Initially, there will be a 2 by 2 matrix having 2 pairs of equivalent images hidden behind. User will be allowed to select 2 tiles in random. If both the images are equivalent, both the tiles will disappear. If not, it goes back to its original form. When all the pairs are matched, the level is completed and the user can proceed to the next level.

We will try to implement this game using pushbutton in the uicontrol and with some images.

Let’s write a main function called tile_memory_game

We will initialize our variables here and then fetch some images details.

Inside this function, we will have the following functions arrange_tile, display_tile, chk_new_tiles and calculate_moves.

The overall flow of our code:

MATLAB CODE:

functiontile_memory_game

clear all;

clc

close all

%GLOBAL VARIABLES

global pname randicon sz flag PId fname items pv ni nj lc Ic Fg nm ;

%FIGURE WINDOW

Fg=figure('Position',[300 200 800 550] ,'Name','TILE MEMORY GAME','NumberTitle','off','MenuBar','None');

%FETCH PNG FORMAT FILES/IMAGES

files = dir('*.png');

fname = {files.name};

%INITIALIZATION

items=2;

ni=2;

nj=2;

sz=100;

lc=1;

nm= uicontrol('Style','Pushbutton','Position',[650 320 150 50]);

arrange_tile;

    function arrange_tile

    end

   

    function display_tile(obj,~) 

        

    end

    function chk_new_tiles

    end

    function calculate_moves

           

           

    end

end

Now let us try to explain in brief what each of the function does.

In tile_memory_game, all the global variables which will be used in other user defined functions will be mentioned.

Then the figure window which will be used to display the tiles (pushbuttons) is defined. By changing the values in  'Position', the window size can be increased or decreased based on our requirement.

The images used in the game are downloaded from web which are freely usable.

The images used in the game are downloaded from the web which are freely usable.These icons can be found in Iconfinder for free usage, but the license has to be read prior to usage. Usually a link has to be provided to the author's webpage if you are using for commercial purpose.

Initialize the number of rows and columns and the size of the pushbutton.

The function arrange_tile is called to arrange the tiles randomly.

Function arrange_tile

Level 1 contains 2x2 tiles. From the available PNG format icons, select two random icons and double it. That is, each icon should occur twice. A random shuffling will arrange the icons at different positions. See picture below:

 The built-in function 'randperm' is used for random shuffling. The syntax randperm(30,2) will randomly select two distinct numbers between 1 and 30. For instance say it selects 28 and 10.

Now we replicate the two numbers selected. Now they become 10,28,10,28.
Again 'randperm' is used for randomly placing these 4 values in the 2x2 matrix.

Pushbuttons are created and the indices are stored as user data for checking in the later part.

MATLAB CODE:

function arrange_tile

Ic=0;

pv=0;

%RANDOMIZE THE TILES

rndno = randperm(numel(fname),items);

row = [rndno rndno];

randicon = row(:,randperm(numel(row)));

inc=1;

flag=0;

%CREATE PUSHBUTTONS

for i = 1 : ni

    for j = 1:nj

  pname(inc)=  uicontrol('Style','Pushbutton','Position',[5+(i*sz) 90*5-(j*sz) sz-2 sz-2],'UserData',inc,'callback',@display_tile);

  inc=inc+1;

    end

end

lstat ='Number of Moves: 0 ';          

set(nm,'String',lstat);

end

Now the figure window will contain 2x2 tiles/pushbuttons. See figure below

Function display_tile

When a pushbutton is clicked/pressed, an icon/image will appear on it. 

 

FIRST CLICK

When another pushbutton is clicked, another icon/image will appear on it. 

SECOND CLICK

If both icons match then the icons will disappear.

ICONS SAME - DISAPPEAR

If both the icons do not match , then it will go back to its original form. The images are displayed for certain duration of time before its hidden back. I use a duration of 0.35 seconds to show the images. See the code below ‘pause(0.35);’

 

ICONS DIFFERENT

Pushbutton Reset

To give it a more sportive look, the number of moves used to complete the game  is calculated. The user has to complete the game within the specified number of moves failing which the game is lost. The time taken can also be calculated and points given as per the time taken to complete the same.

MATLAB CODE:

functiondisplay_tile(obj,~)

   

    %OBTAIN THE USERDATA FROM THE PUSHBUTTON CLICKED

    currvalue=get(obj,'UserData');

    img = imread(cell2mat(fname(randicon(currvalue))));

   

    %DISPLAY THE ICON/IMAGE ON THE PUSHBUTTON

    cimg = imresize(img,[sz-8 sz-8]);

    set(pname(currvalue),'CData',cimg);

       

         if(flag==0)

            PId = currvalue;

            flag=1;

         elseif(currvalue~=PId)

            

             pause(0.35);

%                IF TWO ICONS ARE SAME                        

            if(randicon(currvalue)==randicon(PId))

%                TO SET THE PUSHBUTTONS INVISIBLE               

%                set(pname(currvalue),'visible','off');

%                set(pname(PId),'visible','off');

   

%                TO SET THE PUSHBUTTONS BLACK

                 set(pname(PId),'CData',zeros([sz sz 3]),'callback','default','String','n');

                 set(pname(currvalue),'CData',zeros([sz sz 3]),'callback','default','String','n');

          

            pv=pv+1;

                

            else

%                IF TWO ICONS ARE DIFFERENT                  

                 set(pname(currvalue),'CData','default');

                 set(pname(PId),'CData','default');

                

               

            end

           

            if(Ic>=(items*2))

                

               %Use your own ideas here

             else

            

             flag=0;

             calculate_moves;

             chk_new_tiles;

            end

            

            

         end

        

    end

       

Function calculate_moves

This function is just to display the number of moves during each pair of pushbutton clicks.

Function chk_new_tiles

Check whether all the tiles are matched in the current level. If yes, then increment either row or column or both according to the programmer's wish and proceed to the next level. If all the pairs are matched then increment either the rows or columns or both according to your requirement. When the user succeeds in completing 4x4 ie 16 tiles , a message box with the ‘Winner’ title is displayed and the game is terminated. You can also increase the maximum number of rows and columns based on your requirement.

Winner

GAME LOST

MATLAB CODE:

function chk_new_tiles

       if(pv==items)

           

         if(items==8)

                

                %END OF THE GAME

               

            else

                %INCREASE THE TILE SIZE

               

             lc=lc+1;

            

             %Increment ni or nj or both

             %ni = ni+1;

             %nj = nj+1;

            

             items=(ni*nj)/2;

            

             arrange_tile;

         end

      end

 end

The level of difficulty can be increased either by increasing the number of rows and columns or decreasing the duration of keeping the images open after wrong match or both.

Kindly note that the full MATLAB code for the game is not provided here.