Tile Matcher is out!
It’s a tile-matching game where the objective is to clear the board using as little moves as possible.
Prototype
I wanted to try my hand at building a game without relying on a game engine—hence, I hacked my first prototype over a weekend.
Engine
Because the user interface (UI) only updates when it’s clicked, there was no need for an update loop to run in the background.
I was able to build the puzzle UI using basic HTML elements and event listeners—which is why I chose Preact as my library of choice given its speed, size, and syntax (simplicity of use).
Algorithm
The trickiest part was figuring out how to clear matching tiles. I used a multi-dimensional array for the data structure of the board.
// 2x2 board
[
[SPADE, DIAMOND],
[HEART, CLUB],
];
When a tile is clicked, I check the top, right, bottom, and left adjacent tile. If there’s a match, it would do another recursive check from the matched tile. The process will keep going until no more matches are found. Also, when a tile is matched, it’s set to null to signify that it’s cleared from the board.
Then all matched tiles or null values are moved from the top (first in the index) to the bottom (last in the index). This create an illusion that the rest of the tiles are falling down due to gravity. However, it looks too instantaneous as there’s no animation.
UI
Everything else was pretty straightforward. The board is a table with tiles as buttons with HTML entities.
<!-- 2x2 board -->
<table>
<tbody>
<tr>
<td>
<button>♠</button>
</td>
<td>
<button>♦</button>
</td>
</tr>
<tr>
<td>
<button>♥</button>
</td>
<td>
<button>♣</button>
</td>
</tr>
</tbody>
</table>
Game
You can play the game here and check out the source code here. I’d love to hear your feedback and ideas.