hi! Hi, I’m Ant, and this is the second tutorial in the Elimination game series.

In the last, we talked about all the elimination game (strictly speaking is the elimination of all the pure physical game) has a invisible behind the “grid”, this “grid” is the basis of an elimination game, it is the determinant of layout, you can put the specified elements (icon) placed in the designated position, as follows.

With this foundation in place, can we next start implementing various operations for elimination? Wait, there’s one more thing you need to understand before dealing with the various operations of elimination, and that’s all the invisible “numbers” behind the elimination game.

As a game maker, you need to hold yourself to a higher standard, not only to see what the player can see, but also to have eyes that can penetrate the game and see what the player can’t. In addition to seeing the grid, you need to go one step further and see the data on that grid.

This is what a typical match 3 game looks like. A 6 x 6 layout with 4 different elements.

Any two adjacent elements are swapped, and the elements are eliminated if at least three adjacent elements are the same horizontally or vertically. Because the rule is to satisfy three identical elements can be eliminated, so it is also called “three elimination”.

Now scan with your eyes the picture above for match 3. See the grid? (If you don’t see it, your “game Creator’s Eye” isn’t working well, so please review one of the previous posts and keep working on it.)

If your “Game Creator’s Eye” is qualified, you should be able to see the “grid” at the bottom, a grid of six rows and six columns, with the elimination ICONS at the top placed one by one on each grid.

Then, we go one step further on the basis of what we saw with the grid.

Here, instead of being empty, the grid is filled with numbers. What are these figures based on? If you look at the right hand side, we have 1 for the yellow square, 2 for the red triangle, 3 for the green pentagon, and 4 for the blue hexagon. We then filled these numbers into the grid below, referring to the game screen above. For the rest of the day, our attention will be focused on this numerically filled grid as we use it to find, match, and then eliminate and move.

Why, you may ask, not the intuitive graphical interface at the top, but the obscure grid of numbers at the bottom? This is a very good question and deserves a good answer.

If you wanted to communicate with someone who only knew English, what would you do? Translate what you want to say into English first and then convey it to the other person so that the other person can understand you. What happens if you come up here and speak Chinese to each other? Probably just a question mark on their face.

If you wanted to communicate with a computer, what would you do? Translate what you want to do into a language it can understand, and then communicate it so that it can understand your intention and make what you want to do. If you come up to the computer and say, hey, man! I want to make a match 3 game, where three identical ICONS together can be eliminated, how about that? It’s simple! Help me get one. Guess what.

For humans, we’re better at dealing with representational things, yellow squares matching yellow squares, red triangles matching red triangles, it’s intuitive, it’s easy to understand. But computers don’t understand these things. They’re good at “data.” Therefore, in order to communicate with it smoothly, we have to translate the representation into “data” that it can understand. There’s also a fancy term for this stuff called “data abstraction.”

In plain English, if you want your computer to do your job, you have to speak to it in a way it can understand.

With that out of the way, we’re ready to take a look at a table filled with data. For a match 3 game, how do we translate its rules into words that computers can understand?

Two adjacent digits in any exchange grid can be eliminated if at least three adjacent digits in the current row or column are equal after the exchange.

As shown in the figure, we exchange 1 in row 4 and column 4 with 4 in row 4 and column 5. After the exchange, the three numbers 4 in the vertical direction are equal, and the elimination condition is satisfied.

Ok, so this is removing the invisible “numbers” behind the game. For the player, you see game ICONS moving, erasing and falling, but for the game creator, what you’re really doing is swapping, comparing and moving on a table full of numbers. Isn’t it amazing that these are two completely different worlds from two completely different eyes?

How do we construct this grid of data during game production? Take a closer look at the grid. Does it look like a table, a two-dimensional array, an array of arrays…… Depending on the programming language you use and the tools you use to make your game, you can probably find a data type to display a table full of data like this.

When we build the “grid”, we can add a number in the corresponding position.

-> Calculate the position of the starting point x0,y0 -> loop (number of rows) times -> loop (number of columns) times -> Create element -> Set the position of the element xn,yn -> Set the number of the current element in the table at the corresponding position on the grid according to the current row and row (New) -> End of column cycle -> end of row cycleCopy the code

This creates an invisible grid filled with data while drawing visible ICONS.

After your “Game Creator’s eye” has been further improved, let’s take a look at some of the most common elimination games.

  • Three types of diabetes

Swap two numbers to eliminate three equal numbers in horizontal or vertical directions.

  • 1010

For a 1010 elimination game, the data format is much simpler, because you only need zeros and ones (the computer’s favorite thing), and you only need one row or column of numbers to satisfy the elimination criteria.

  • The attachment to eliminate

Match-3, horizontal, vertical, or tilt, as long as the numbers are equal, you can connect them, with three or more numbers can be eliminated.

  • Hit Cancel

Click on any number, horizontal or vertical direction as long as the same number to eliminate.

Take a close look at the giFs above for the four different types of elimination games to raise your game Creator’s Eye level. Isn’t it amazing that there are so many different types of elimination games, but behind them there are just five numbers: “0,1,2,3,4”.

There is always something hidden beneath the surface of the game world, and as a game creator you need a creator’s eye to see it. Behind many seemingly magical things are just some simple principles. Finding them is like poking through a window, making a complex world suddenly clear and simple, and you might be tempted to say: Oh! So it is, but that’s all!


Welcome to pay attention to the public account “little Ant teach you to make games”, learn more about the game development of the original tutorial.

Vx: Xmy-Xiaomayi

If the content of this article is helpful to you, please feel free to like and share. Your encouragement means a lot to me. Thank you!