Follow by Email

IMAGE PROCESSING

Lets Learn together... Happy Reading

" Two roads diverged in a wood, and I,
I took the one less traveled by,
And that has made all the difference "-Robert Frost

Recent Posts

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:
function tile_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:
function display_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.








like button Like "IMAGE PROCESSING" page
Next Post Home
Related Posts Plugin for WordPress, Blogger...
Google ping Hypersmash.com