|
The available tile designs are:
|
Phase 1
When the app first starts out, a rectangular area of the screen will be laid out with random tiles.
All tiles on the board have the same design, but the orientation of the tiles is random. Here are some screen shots showing the available tile designs. The user can select the tile design by doing a long press. A long press changes to the next design and randomizes the board. For learning how the app works, it is suggested to use the last design shown. That design will be used in the rest of this document.
Here the last design, above, was selected by the user and tiles rotated. A tile is rotated clockwise by tapping it once.
A tile is rotated counterclockwise by double-tapping it.
Tiles surrounded above, below, and on each side by other tiles that touch with the same color are black and white. All other tiles have a red mask added. Any tile with a red mask is considered not to be in a completed state. It's possible that rotating that tile fixes the problem. However, more likely, the surrounding tiles must be rotated.
The board is also technically a torus: the top row connects to the bottom row, and the left column connects to the right column. Consider the second tile from the left on the trop row, for example. Let's name this tile (2,1), for 2 to the right, 1 down from the top. It abuts to (1,1) on the left, and where the two tiles meet, they are both light. It also abuts to (2,2), below, and where they meet, they are both light also. It abuts to (3,1) to the right, joining with dark. But there's one more side. The top of (2,1) abuts the bottom of (2,10) on the bottom row. The top of (2,1) is dark. The bottom of (2,10) is light, so they don't line up. Tile (2,1) consequently has a red mask added to it.
Consider, now, tile (3,2). It abuts (3,1) using the dark color, (4,2) using the light color, (3,3) using the light color, and (2,2) using the dark color, so the red mask is removed. Tile (3,2) is considered to be complete.
The board has been manipulated so that all tiles on the second row are touching all four of each of their neighbors using the same color. So none of them has a red mask.
The user's task is to rotate all other necessary tiles until all tiles touch using the same color. Following shows a progression of how this occurs. Note how the red mask is removed when tiles are completed.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
When all tiles are touching their neighbors using the same color, the app moves into the next phase.
In Phase 2, when a tile is rotated, all tiles touching it, and tiles touching them, are rotated together in order that they stay touching with like colors. More than likely, some of the tiles will have a yellow mask. What is the yellow mask? When the app first starts, it calculates a random solution. The yellow mask is displayed on tiles that don't match the solution. The user must rotate tiles until there are no yellow masks.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Here is a sample sequence of what it might look like as the user rotates a whole row or column at a time. When all the yellow masks are removed by rotating the tiles appropriately, the game is considered complete, and the calculated score is logged in the Game Center. There are separate leaderboards for each tile design.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Just one final note about the tile designs. They're just different faces on the same tiles. The app logic remains the same. Here they are all together with the same orientation.
![]() ![]() |
This is the basic face - black on one side, white on the other with a boundary from one corner to the opposite corner. Adjoining tiles must meet at the same color, i.e., black touches black at an edge and white touches white. |
![]() ![]() |
The first arrow design points along the edge of the basic tile. Left of the arrow corresponds to black on the basic tile. Right of the arrow corresponds to white on the tile. So, to solve the puzzle with this arrow design, keep the left sides of tiles touching each other and the right sides also touching right sides. |
![]() ![]() |
The other arrow design is perpendicular to the first arrow design. It can be distinguished by the quarter circle at the tail end. For this design, the circle end corresponds to the black of the basic tile, and the arrowhead corresponds to the white corner of the basic tile. So tiles that join should either share arrowheads or tails for a match. |
![]() ![]() |
This pattern is just a gradient, with green replacing black on the basic tile and red replacing white. The blue in the center helps to visualize diagonal patterns. |
![]() ![]() |
This pattern is simply the previous pattern with quarter circles added for a visual effect. |
![]() ![]() |
Here pink replaces black, and blue replaces white. These are meant to be the gender symbols. Pink and blue are the stereotype gender colors. Yellow is in the middle as a gender neutral color. Females align with females. Males with males. |
![]() ![]() |
The differences in this design are that the pink and blue portions are shifted away from the corners. The purpose of this is to present a better alignment for a different visual effect. Meanwhile, the quarter circles line up at the center of the edges to form a continuous wavy line. Pink lines up with pink, and blue lines up with blue. |
![]() ![]() |
Finally, this gradient pattern is not aligned diagonally but vertically. A solid green edge can align with a solid green edged of a neighbor tile, or a solid red edge can align with the solid red edge on a neighbor tile. Also, green can align with a gradient from green to red going clockwise. Solid red can align with red to green going clockwise. |
Here is a sampling of tiles where the center tile is touched on all four sides by the appropriate edge of its neighbor tiles.
![]() ![]() |
Color must match on adjoining edges (red mask does not matter) The center tile and top tile meet on black edges. Note the top tile could rotate 90 degrees clockwise and still satisfy this condition. The center tile and right tile meet on white edges. The center tile and bottom tile meet on white edges. The center tile and left tile meet on black edges. |
![]() ![]() |
Tiles must touch on the same SIDE of their respective arrows. The left of the center arrow touches the left of the top arrow. The right of the center arrow touches the right of the right arrow. The right of the center arrow touches the right of the bottom arrow. The left of the center arrow touches the left of the left arrow. |
![]() ![]() |
This is just perpendicular to the previous design. Adjoining tiles must meet on the same END of their respective arrows. The center tile and top tile meet on an edge that intersects the tail of the arrow. The center tile and the right tile meet on an edge that intersects the head of the arrow. The center tile and the bottom tile meet on an edge that intersects the head of the arrow. The center tile and the left tile meet on an edge that intersects the tail of the arrow. |
![]() ![]() |
Color must match on adjoining edges (red mask does not matter)
The center tile and top tile meet on green edges.
The center tile and right tile meet on red edges. The center tile and bottom tile meet on red edges. The center tile and left tile meet on green edges. |
![]() ![]() |
Color must match on adjoining edges (red mask does not matter)
The center tile and top tile meet on green edges.
The center tile and right tile meet on red edges. The center tile and bottom tile meet on red edges. The center tile and left tile meet on green edges. |
![]() ![]() |
Color must match on adjoining edges (red mask does not matter)
The center tile and top tile meet on pink edges.
The center tile and right tile meet on blue edges. The center tile and bottom tile meet on blue edges. The center tile and left tile meet on pink edges. |
![]() ![]() |
Non-yellow color of adjoining edges must match. The center tile and top tile meet with an edge containing pink. The center tile and right tile meet with an edge containing blue. The center tile and bottom tile meet with an edge containing blue. The center tile and left tile meet with an edge containing pink. |
![]() ![]() |
This design is a little different because the edges that can line up are either the same color, where the edge is a constant color along its length or the color if the leading edge (going clockwise around the tile). The top edge of the center tile, looking clockwise starts green and turns to red. So it needs to join the top tile at either the top tile's green edge, or the edge that starts green, again clockwise relative to the top tile. The right edge of the center tile is red, so the edge of the right tile next to it must be red or the starting edge going clockwise must be red. The bottom edge of the center tile starts red, going clockwise on the center square, so it must join the bottom square at a red edge or an edge that starts red, going clockwise around the bottom tile. The left edge of the center tile is green, so the left tile must touch it at an edge that is green or starts green, going clockwise around the left tile. |