In the previous posts, I analyzed many puzzle projects, such as Gliding Puzzle, Game 2048, Tetris, etc. There is much difference between puzzle game and other popular Scratch games. Puzzle games usually have static background and focus less on sprite’s costume and actions. Therefore, some players might feel that puzzle games are not so shiny. However, puzzle game usually has more complicated data structure or algorithm to calculate the win/fail condition.

Previously, I often analyzed others’ project. Today, I would like to introduce my own puzzle game: melting the line. When a player clicks the yellow line, all those segments touching the yellow line will get melted and disappear. The winning rule is to click yellow line with minimum times to melt all the segments.

The following is the game demo.

The complete project could be accessed at: https://scratch.mit.edu/projects/519937931

As usual, I will analyze each sprite one by one. In this post, I will analyze those sprites related to the user interaction. The list data structure and pass/fail algorithm will be introduced in the next post.

Background Lines

Background lines are gray grids shown on the stage. Its purpose is to guide player to control Cutter sprite along different columns. It also ensures that each segment clone is put in the x and y positions accurately.

All the background lines are drawn using Pen functionality. There are two variables “ROW_GAP” and “COLUMN_GAP”, which control the density of the grids. “COLUMN_GAP” has a constant value of 20, which means vertically, there could be as many as 480 / 20 = 24 columns. The less the values of ROW_GAP and COLUMN_GAP, the more grid lines could be drawn on the stage, but it might make the segments too crowded and the user feel too difficult to identify different segments.

After setting the above variables, the program sets pen properties and then begins drawing horizontal lines and vertical lines.

Segment Sprite

The Segment sprite represents the rectangle blocks which will be melted by the Cutter sprite. when the program receives “start a level” message, it creates Segment sprite clones and each clone is assigned a unique Clone_ID.

In another event receiver procedure “when I receive check line touching”, the program checks if a specific segment clone touches the Cutter sprite (yellow line). If it does, the segment clone could change color and ghost effect for 10 times, and gets deleted. The variable “left_clones” decreases by 1 to indicate how many segment clones still existing on the stage.

Here I would like to emphasize the “magic” of sprite clones. When a sprite creates clones, many properties, such as costume name, x position, y position, touching color, etc. have independent values for each clone. Each clone could also receive the events which usually are designed for the sprite, like this one “check line touching”. Since each clone could sense the touching, change color, ghost effect, and get deleted independently, we do not need to worry that all the clones would change their behavior even they are not touching the cutter.

In “when I start as a clone” code segment, each clone will choose a costume which is corresponding to the clone’s segment length. Please note segment length could be calculated by (end_point – start_point). They are stored in “end_point_list” and “start_point_list”, respectively.

The following picture illustrates the list structure of “start_point_list” and “end_point_list”. Since each clone has a unique value of Clone_ID ( a “local variable” created by choosing “For this Sprite Only” option), it will extract the item at index of Clone_ID from “start_point_list” and “end_point_list”. As to where and how to create those lists, I will leave it to be explained in the next post.

Each clone’s x position is related to the item value in “start_point_list”. However, if we would like to put segment clone on stage properly, we need to convert it to x position by using the formula (-230 + COLUMN_GAP * item Clone_ID of start_point_list). Similar rule applies to the conversion of y position.

Based on the above analysis, we know how the segment clones position themselves on the stage. So how do they show proper costumes? There are 8 costumes with different length. Please note those costumes’ left edge middle-point sits at the center point of the image editor. When the segment clones display on the stage, their left edge middle points go to the specified x and y position to align with the x and y grid lines.

Cutter Sprite

This sprite has not much code. The tricky part is how to convert mouse x position to an intermittent value of “closed_index”. As we know, “mouse x” value is continuous. If the program makes Cutter sprite always go to mouse pointer, Cutter could move at any place, which is not what we want.

If you scroll back to check the code of Background Line sprite, you could see that each vertical grid line is showing at the position: -230 + COLUMN_GAP * column_index. What we need to do here is to reverse that formula by using (mouse x + 230) / COLUMN_GAP. We are getting a value equal or close to “column_index”. Through using “ceiling of” block, we could get an integer value, indicating the column grid line index the Cutter sprite is falling on.

Runner Sprite

This sprite is simple. It is used to enhance visual effect when cutting happens. I will not explain it in detail.

That is all for the introduction of UI related sprites. However, how to set up “start_point_list” and “end_point_list” using random value and how to decide if user wins or loses, are not addressed here. They are hidden behind the curtain, but the key to the whole program. I will introduce them in the next post. Follow my blog and enjoy the coding and have fun!

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.