Welcome to 😺 Emoji Swap!

Demo Play the game!

GitHub A link to the project source

Discussion and Algorithm

Emoji Rendering

I thought of using emojis due to their popularity, fun, and wide-spread compatibility. The first trick was to get the emoji to render on a web page based on its code.

Starting with the Full Emoji List, the first emoji listed is 1F600 which is the 😀 or “grinning face”. After some work, I discovered that this is how to render an emoji using Angular:

<div [innerHTML]="&#x1F600"></div>

Game Board

The next bit of fun was to draw the game board or grid of emojis. I initially thought to use CSS Grid, but decided that most breakpoints where going to be similar so good ole Flexbox did the trick!

Basic algorithm:

1. Start with a 2-D array in TypeScript ` grid: GameTile[][];`
2. Loop through each dimension’s limit (row and column)
3. Add a GameTile from a random list of emojis
4. See: src\app\game\services\game.service.ts: CreateGame(

Finding Matches and Potential Matches

For the game to function, I needed a mechanism that would quickly tell me if there existed a match on the board. This mechanism would then be ready for any scenario:

• after the game board was established
  • new game instance
  • level change
  • reshuffle
• after player interaction
• after a previously found match was removed and new tiles added This would equip the game with the ability to react to any of the above events.

Matching Algorithm:

For each tile…

1. for each cardinal direction…
2. is this tile within the grid?
3. does this tile have the same emoji code?
   1. add tile to candidate list
   2. recurse until the next tile doesn’t match
4. is candidate list length within threshold? (note: this allows for any length match!)

If the candidate list happens to be 1 less then the threshold…

1. perform potential match

2. from the previous tile, look in diagonal directions for potential match

3. extended potential match
4. from the previous tile, in the same direction
   1. skip next tile
   2. check next tile

There is another category of potential matches - staggered matches. These are searched during the initial find algorithm as it must be acted upon each tile. For each tile…

1. search in all cardinal directions
2. if tile is within grid, add to list
3. after all directions have been searched
   1. start with the first tile in list
   2. filter remaining tiles that match list
   3. if length of filtered list meets the threshold, potential match found!