Did you play a game called 2048? It looked simple but could make you addicted. Now, a player remade it in Scratch! You could use arrow keys to control the gliding direction. Let’s take a look at its effect now.

The original project could be accessed at: https://scratch.mit.edu/projects/382035329

Unlike other Scratch games, 2048 game has static play board. The key is how to move and merge the number correctly based on its rules. In the following posts, I will introduce the main sprites in this game and its implementation method.

The Main Sprite – Backdrop

In this Scratch game, the main sprite is backdrop. It responds to the key pressing of players, move the numbers in the play boards and merge the adjacent equal ones. The main segment of backdrop sprite is shown below.

Main Segment

When the backdrop receives “run game” event, it repeats 16 times to fill in Data list with value 0. After that, it calls “add new number @random pos” block to add two numbers to the random positions at the play board. This is the initialization code. At the end, the segment will use a forever loop to wrap a main segment. So how does main segment work? Please continue.

“Add new number () @random pos” Block

In the above mentioned “add new number @random pos” block, it adds a number to an empty position at the play board. The empty position is represented by the value 0 in the list of Data. The added number could be 2 or 4, which is chosen randomly.

“main” Block

The “main” block is very long. It contains four scenarios – when left arrow key (or “a” key), right arrow key (or “d” key), up arrow key (or “w” key) or down arrow key (or “s” key) is pressed.

For each scenario, the code is very similar, which mainly consists of conducting Replace operation for three rounds, Change operation for one round, and then conducting Replace operation for three rounds again.

Please pay attention that depending on the pressed keys and the movement direction, The input parameters of Replace and Change blocks are different. I will introduce the meaning of those input parameters in the sections below.

Since the “main” block is super long, I will not paste its complete code, but just list the partial section of when key right arrow pressed, which is shown below. You could see that it conducts Replace operation three times, Change operation one time and then Replace operation three times again.

The final effect of one right arrow key pressing is shown below. Please note that since Change operation is done only once for one round, there is at most one pair of adjacent equal number getting merged for each row, which is different from the original 2048 game.

“Replace” Block

Before explaining Replace block, we need to know how the grids are aligned. The Data list has 16 items corresponding to 16 grids. The indexes of those grids are shown in the below right diagram.

There are two input parameters for Replace block. Parameter “a” represents the comparison items’ index gap. Parameter “shop?”represents the movement direction. When moving left or right, stop? value = 0; when moving down, stop? = 1; when moving up, stop? = 2.

The movement direction is important because it influences how the items move. For example, when stop?=2, a= – 1, meaning that the numbers are moving right, variable i will iterate from the biggest number 16. Data (16) will compare with Data (16+a) = Data (15). If Data (15) is empty, value of Data(16) should put into Data (15). The input parameters of Replace block should be a= – 1, stop? = 2.

When stop ? = 0, and input parameter a = 4, it means that the numbers will move right. the variable i will iterate from 1, and the program will check if Data (1 + a) = Data (5) is empty. If it is, value of Data (1) will move to Data (5).

The input parameters of a and stop? are different for moving left and down scenarios. You could refer to the main block of the initial project for detailed information. I will not list all of them here. The Replace effect of moving right operation is shown below for further illustration.

“Change” Block

Similar to Replace block, “Change” block also has four scenarios, corresponding to the movement in the four directions. Stop and input parameters have the same meaning as those in Replace block, but the starting value of i is different. Why? Let me give an example.

Take the example of moving right in the below diagram. When conducting Replace operation, it should start from the left to right. Take the example of last row, Data(4) might move to Data(8), Data(12) or Data(16). However, when merging adjacent equal numbers, it should start from Data(16). Therefore, in the following example, Data (16) and Data (12) merges into a new number 4, and Data (8) and Data (4) values move right by one grid.

If the merging occurs wrongly from left to right, Data (8) and Data (12) will merge into 4 and the final effect at the last row will become (empty, 4, 4, 2), which would be wrong.

That is all for this post. Feel difficult to understand or kind of like a brain twister? OK, download the 2048 game on your phone and play it. Maybe you will understand it faster. Anyway, enjoy the coding and have fun!

In the next post, I will continue the introduction of backdrop sprite and also other main sprites. Keep tuned!

Note: All the analysis articles are copyright products of http://www.thecodingfun.com. Anyone re-posting them should credit author and original source. Anyone using them for commercial purposes or translating them into other languages should notify TheCodingFun and get confirmation first. All Rights Reserved.