Magic Blocks (game tutorial)

I’ve recently seen a board game on the TV, called the “Magic Block Game” and it looked very interesting. So I decided to write a tutorial how to write such a game in vb.net. Of course it will be one of those lessons where I’ll show you how to do it and how it works. Will you make a game on time or competing on a single computer, or maybe on a network I already leave you behind. Rules are simple move the squares so that in the middle of the main board create the generated pattern, but only move those elements adjacent to the empty field, the game will Looks like this:

The added advantage is that we will be able to edit the size without data loss. We will start by preparing the form. Here there will be not much work, because all elements will be generated automatically:

Element type Element name Settings
Form Form1 Name: Form1

Text: Magic blocks

Size: 675; 669

Splitter1 Splitter1  Size: 659; 188
Panel pattern  Size: 282; 152

BackColor: Black

Location: (any on Splitterze)

Panel MainBoard  Size: 282; 152

BackColor: Black

Location: (any)

In addition, we must have six tiles. Our main board will have 25 fields, ie 6 * 4 = 24 + empty field. Tiles to download: tiles.zip

You need to unzip them into a folder and mount them like on the gif:

Okay, it’s all set. We’ll start by adding variables, then we’ll add methods that we’ll discuss.

We need to import the System.Drawing.Drawing2D library whose element we use to adjust the size of the image to the size of the field. We will begin by preparing our tiles, add them to the “Color List” list, we will create a method that will do this before generating the pattern and fields. Add to project:

The “ColorSet()” method will populate our tiled list. You need to adjust the number of items in the list so that it can be multiplied by the number of possible choices. 24. Now you can choose one tile as 4, because 4 * 6 = 24, if we want to increase or decrease the number of tiles we would do it as follows 6 * 4 = 24 or 8 * 3 = 24, 3 * 8 = 24, 2 * 12 = 24, 1 * 24 = 24 etc. When we load a tile list, we go to the pattern and main game board settings. You need to adjust their size, the size of the pattern board will depend on the size of Splitter1 and the game board size of the mold, add the method to the project:

It’s look like this:

For the changes in real time will be responsible the following method:

When changing the size of the main form, the size of the boards will be updated. Now let’s take a look at the design of the pattern and the game fields so that the game makes sense, the fields must be generated randomly. As for the pattern, its fields will not change location, so this element will be more static. The main game board will be more complex, this space will consist of several elements:

(PlanszaGlowna=MainBoard,polaGlowne=mFields,polaGlowneBool=mFieldsBool, kolekcjapol=FieldCollection)

mFieldsBool- specifies the locations of the empty field.

mFields – their size is generated when the size of the board changes, we put our image color in them

This method has two states. The first is run when the game starts, he prepares both play boards. The second is when the board is loaded and we change its size.

Momentarily nothing is happening, because we have only prepared the main fields and we have determined their size. If we add two lines of code, we’ll see what has been done:

We will now take the “GenerateBoards()” method that loads the tiles on the board and prepares the empty field:

The variable “rand” is responsible for drawing the tile, “drawList” makes sure that one tile is no more than four. If you want to increase or decrease the number of tiles, you must change these options according to the number of tiles you have. Depending on the size of the fields, we have to prepare such images of our tiles so that it is the size of a predefined field. So the function “cheSize()” is responsible for reduce or enlarge its size, which uses library System.Drawing.Drawing2D .

How does it work:

As we can see, the fields are already added, but our fields do not conform to the size of the form, since the “Form1_Resize” method already has a “GameStart” variable set to true, meaning that if we change the form size, CompleteFields()”, if during the resize the” GenerateBoards()”method would be called, then during each change, the program would generate a new random pattern and new random fields. So let’s add the “CompleteFields()” method:

The first step of the method actually does nothing because the pattern board is stationary, the second step sets the tiles based on the “collectipipol” in which field coordinates, size and pictures are written. The last item that controls whether the game has ended:

It creates a comparative list in which the image indexes are stored in the “ColorsList” list. Then compare them and if they are identical (pattern – center of the game board) ends the game.

Of course this is not the end of the project, because somehow we have to move the tiles. We will start with the function keys. I will use arrows, but you can choose other keys. You have to think about what will be most convenient for you if you press the up arrow which tile will you move? You can move the tile under the empty field up or above the empty field down.

My settings relative to the empty field are:

 Down arrow

 Up arrow

 Left arrow

 Right arrow

The code retrieves the location of the empty field from the “mFieldsBool” table and locates the field by the pressed key. Then it clones the structure and changes its x or y field and occupies the (rect) field.

It will be a little harder with the mouse cursor. We add the “MouseMove” event to the “MainBoard” panel when the cursor is over the panel, the cursor coordinates e.x and e.y will be downloaded. Then, by specifying the location of the empty field, we search the collection “FieldCollection” and check that the cursor is not above the field (rect) to the left, right, above, or below. If it is, then the cursor will turn into a handle, if not the arrow.

Effect like on gif below:

As you can see, the cursor changes its state to a handle. As for the click method, it is the same as when using the keys. The method checks to see if the cursor is over a field that is adjacent to an empty field (the code copied from MouseMove), if it specifies which square and clones its structure, substitutes data with an empty field and writes to the collection.

Ok game is ready:

Now your turn, create and add as you like. Create the game you want it to be.

Permanent link to this article: https://visualmonsters.cba.pl/en/magic-blocks-game-tutorial/

Leave a Reply

Your email address will not be published.