Implementing an Array of Buttons: The Shuffle Game

Introduction

This article came out of the result of a forum of discussion on CodeGuru.com. When we tried to implement an array of Windows buttons, we did not find any solution using ClassWizard. In VB, this can be achieved by copying a single button. We could not find any method; hence we discussed in the following forum: "Array of buttons in VC++."

So, we tried to have a common handler and control in the form of this game.

To Start

Select New->Nroject from the File menu. A dialog window will be displayed. Select "MFC AppWizard(exe)" and give the project name as "Shuffle".

When you give the OK, it will ask for the type of application. Select Dialog, based on Step 1.

Treat all other steps as default and click Finish. This will create a dialog-based application.

Now, you see two buttons, namely "Ok", "Cancel", and a text "TODO: Place dialog controls here." Select and remove the Cancel button and the text "TODO..."

Change the caption of the Ok button to &Exit.

Add one more button; right-click on the button to go to Properties. Change the caption to &About and ID to IDC_About.

Now, the dialog window should look like Figure 1:

Compile the project by pressing F7; then, to execute it, press Ctrl+F5. Make sure that there are no errors.

Double-click the About button and click Ok to add your code as follows:

Now, design the window by adding 16 buttons and a Group box. Give the IDs for the buttons as IDC_But1, IDC_But2...... IDC_But16. Then, the window should look as in Figure 2.

On the ClassView tab, right-click the CShuffleDlg class (if your project name is Shuffle), select to add a member variable, and give the variable type as CButton and variable name as m_b. Keep Access as public. Go to the DoDataExchange function and add the following code to it:

This will assign the control variable for each button in the array. Now, we have created an array of 16 buttons. The thing we have to do now is to control these buttons using a program.

To play the game, we have to change the captions of the buttons to random numbers from 1 to 15. To create random numbers, we have to write a function, name it Randomize( ), and call it from OnInitDialog( ).

For that, in the ClassView tab, right-click CShuffleDlg, select add member variable; name the type as int and the variable name as m_x. Similarly, declare another variable, m_y, of the same type. Later, we use these variables to hold the position of the slider. Right-click the CShuffleDlg and select add member function; give the type as int and the function declaration as Randomize( ).

As explained above, to make the numbers randomized, we used a rand( ) function. rand( ) will generate a random integer; we made it range between 0 to 3 to select a random row and column using %4. Initial to this, we set the numbers of all the boxes to zero. Taking the numbers from 1 to 15, go on filling in the randomly selected boxes if they are not filled. Now, hide the remaining button using m_But[m_x][m_y].SetButtonStyle(8). This will set the game.

To avoid repetition of the order every time you run the program, make the seed of the random time(NULL). srand(time(NULL)) makes the random numbers dependent of time so that every time you run the program, the sequence will be different.

Now, add the following code to the OnInitDialog( ) function to randomize the number initially.

Change the caption of the Group box to "Click On the Button to Move:".

If you compile and run, you should get the window in Figure 3:

Now, let us start the game. To move the button each time you click a button, you have to write a common handler for all the buttons. Go to the position where you find "BEGIN_MESSAGE_MAP(CShuffleDlg, CDialog)" (do not confuse between CAboutDlg and CShuffleDlg), and then add following code:

If we press any button, the "MoveButton" handler will be called with a parameter as the ID of the corresponding button. Now, declare the MoveButton(int btn) function of type BOOL by right-clicking the Class CShuffleDlg on the ClassView tab.

To find the row and column of the pressed button, subtract the ID of the first button from the empty button call it btn. Now, btn%4 will give the column and btn/4 will give the row.

Whenever we press a button, if the adjacent button is empty, that button should be placed on that position. For that to happen, we have to check whether the position of the empty button is adjacent. If it is, we have to change the caption of the empty button to the caption of the button pressed, show that button, and hide the button that was pressed. This will give the effect as if the desired button is moved. In m_x and m_y, store the present position of the empty button.

About Us

This is a combined article by me and my friend HarshaPerla. We discussed this topic and put our efforts to bring this article to life. We are studying MSc Electronics in Mangalore University, Karnataka, India.

Top White Papers and Webcasts

The 2014 State of DevOps Report — based on a survey of 9,200+ people in IT operations, software development and technology management roles in 110 countries — reveals:
Companies with high-performing IT organizations are twice as likely to exceed their profitability, market share and productivity goals.
IT performance improves with DevOps maturity, and strongly correlates with well-known DevOps practices.
Job satisfaction is the No. 1 predictor of performance against organizational …

Data integrity and ultra-high performance dictate the success and growth of many companies.
One of these companies is BridgePay Network Solutions, a recently launched and rapidly growing financial services organization that allows merchants around the world to process millions of daily credit card transactions. Due to the nature of their business, their IT team needed to strike the perfect balance between meeting regulatory-mandated data security measures with the lowest possible levels of latency and …