Match-3 JavaScript: Clear the Union, Then Apply Gravity

Two matching lines share one cell. Counting both lines separately awards six when only five cells disappear.

Clear a set of coordinates once, then let survivors fall.

The four-by-four game accepts side-adjacent swaps that create a match. Starting rows AABC, BCAB, CBAC, ABCA contain no match. Swapping (0, 2) with (1, 2) clears three cells and adds three points. The board compacts without refilling, so fewer symbols remain after each clear.

Match-3 JavaScript: Clear the Union, Then Apply Gravity
Match-3 JavaScript: Clear the Union, Then Apply Gravity
Open the full example ↗

Use the worked example

Select row 0, column 2, then row 1, column 2. Inspect the cleared-coordinate list and resulting rows. For the separate Cross example, select Cross fixture and then Resolve fixture matches; loading the preset alone does not clear its five symbols. Reset returns to the full starting board.

Trace the result step by step

Rows and columns are zero-based, with rows increasing downward. A, B, C and D are neutral symbol labels; empty cells use a distinct empty value, never another matchable symbol.

A new round starts at score zero and zero accepted moves. The first selected cell is outlined and marked selected for assistive technology while you choose its destination. Focus stays on the replacement cell button after selection or a move. Invalid selections give feedback without spending a move. Resolution completes before another selection is accepted, so the result describes a stable board rather than a partly cleared one.

The swap, clear, fall, and recheck stages are discussed in Emanuele Feronato's match-three explanation. This page uses a finite version with no refill. Follow the remaining symbols, because a successful clear can leave fewer possible swaps rather than create a fresh full board.

A swap needs two occupied cells sharing a side: one row or one column apart. Diagonal, distant, empty or missing selections are invalid and leave board, moves and score unchanged.

The game tries a swap before accepting it. If the result has no horizontal or vertical contiguous run of at least three equal occupied symbols, the board stays unchanged. A failed candidate does not consume a move or earn a point.

Swap (0, 2), holding B, with (1, 2), holding A. The resulting first row is A A A C, and row 1 becomes B C B B. Exactly (0, 0), (0, 1) and (0, 2) match. Accepting this swap raises the move count to one before resolution.

The game combines row and column matches into one set of coordinates and awards one point per cell removed in that phase. A run of four includes all four cells; it is not two overlapping three-cell rewards.

In the separate Cross preset, row 2 columns 1, 2, 3 and column 2 rows 1, 2, 3 are the only matching A runs. Their shared center (2, 2) belongs to both lists, but the union contains five cells. Score increases by 5, not 6. Record the unique coordinate list before changing any tile.

In each column, surviving tiles keep their top-to-bottom order and settle at the bottom. Empty cells occupy the positions above them. The move explanation shows the resulting rows after the three-cell example.

No further match exists in that result, so score is 3 and confirmed moves remain 1. Compare these worked values with the board and the move explanation after the supplied swap.

After each fall, the game checks for another match. A gravity-created match clears as a new phase with its own unique cells and score increment. It does not count as another player move. Resolution continues until no match remains; empty cells never form a run.

Copy a prompt for this example

Create a single HTML match-three teaching game with a four-by-four board and symbols A, B, C, D. Start with rows AABC, BCAB, CBAC, ABCA, score zero, and zero accepted moves. This finite version has no refill.

Select two occupied cells sharing a side. Test the swap before accepting it; diagonal, distant, empty, or nonmatching swaps leave score, move count, and board unchanged. A legal swap must produce a horizontal or vertical contiguous run of at least three.

Swapping (0,2) with (1,2) makes the top row AAAC. Clear exactly its first three cells, add three points, and count one move. Compact survivors downward in each column while preserving their order. The resulting rows are ___C, BCBB, CBAC, ABCA.

Collect matching coordinates in a set so intersecting runs count their shared cell once. Provide a separate Cross preset with A at row two columns one through three and column two rows one through three. Resolve fixture matches clears five cells for five points.

After each clear and gravity phase, repeat until stable. Empty cells never match. Check every remaining adjacent occupied swap before reporting NoMoves. Finish each resolution before accepting another selection.

Show selected cells, phase, score, move count, and the cleared-coordinate and resulting-row record. Reset restores the original board. Use readable symbol buttons and a responsive grid. Return the complete HTML file.

Keep the initial grid and clear sequence beside the source before adding new tile behavior. NOS can preview this HTML inspector during that review. Check the finite no-refill rule explicitly; a board with pieces remaining still needs an available-swap check before it can be called playable.

Keep reading