Mallang Chain is a falling-block puzzle where you pop four squishy "mallangs" of the same color by connecting them. If you've played Puyo Puyo, you don't need to read the rules. You rotate, move, and stack mallangs that fall in pairs, and when four or more connect, they pop. The mallangs above drop into the gap, and if four more line up, that's a chain. Right now it's a versus game where your board and the computer's sit side by side and you compete at the same time. It's at play.ghmun.com/mallang-chain. No libraries, one HTML file, 790 lines.
At first it was a solo score game
The first version, posted on September 28, was a solo game for recording your high score and longest chain. The first bug appeared as soon as it went up. Even after you pressed Start, the instruction panel kept covering the board. The panel was built with display: flex, and starting the game hid it by adding the hidden attribute. But when CSS sets display directly, that value overrides the default hiding from the hidden attribute. The one line [hidden] { display: none !important; } was missing.
A solo chain game got boring fast. There was no reason to build long chains other than score. What makes Puyo Puyo fun is that your chain dumps garbage puyos onto your opponent's board. So the same day, I rebuilt it as a game against the computer. Of the 554 lines, I deleted 288 and wrote 523 new ones. I split the code that handled one board as a global variable into two game objects, and changed every rule function to take which board it's working on.
Scoring and attacks use Puyo Puyo Tsu's formula as is
The score is number popped × 10 × (chain bonus + color bonus + group bonus). The chain bonus is 0 for a 1-chain, 8 for a 2-chain, 16 for 3, 32 for 4, 64 for 5, and goes up by 32 from there. Popping two or more colors at once adds a color bonus, and a group of five or more connected adds a group bonus. The value in parentheses is clamped between 1 and 999. Clearing the board completely gives 2,100 extra points. I didn't come up with these values; I carried over the formula from Puyo Puyo Tsu (1994) as is. There was no reason to rebalance something people have been refining for 30 years.
Attacks work the Tsu way too. When a chain ends, the score from that chain divided by 70 is sent to the opponent as garbage stones. The remaining points aren't thrown away; they carry over to the next attack. So one long chain is much stronger than several short ones. Assuming four pop each time, a 2-chain sends 5 garbage stones, a 3-chain 14, and a 5-chain 69. The board is 6 columns wide, so a single 5-chain dumps more than eleven rows. If garbage is queued to fall on your side when you chain, it cancels that first, and only what's left goes to the opponent. You're countering the attack you received. Up to 30 garbage stones fall at once, and they disappear when a mallang right next to them pops.
To keep it fair, both boards get mallangs in the same order. The piece sequence is built in one shared array, and each side just keeps its own count of how far it has used. Nobody wins because one side got lucky.
The computer is deliberately a little clumsy
When a new piece comes up, the computer considers every place it could go. The board is 6 columns wide and there are 4 rotations, so at most 24 options. For each one, it builds the board with the piece actually dropped and scores it. It adds a lot if a group of four forms and pops, and weighs the tallest column, the height differences between neighboring columns, and how much same colors touch. If any column stacks 9 or higher, it subtracts a lot.
This evaluation only looks at whether placing a piece now pops something right away. It doesn't plan chains ahead. So the computer pops groups of four as soon as they form and almost never builds a big chain. That's the path for a human to win. Build a chain step by step, and you can counter the computer's small attacks and bury its board in one go. On top of that, 12% of the time it picks the 2nd- to 4th-best spot instead of the best. Its hands are deliberately slow too. When a piece appears it thinks for 0.2–0.5 seconds, rotates once every 0.11 seconds, and moves one column every 0.085 seconds. If the computer teleported its pieces into place, it would look obnoxious regardless of how good it was.
Small things that make it feel right
The mallangs are drawn on canvas without images. The body is filled with a radial gradient, with a highlight and two eyes on top. When same-colored mallangs touch on the side or below, a band of the same color is drawn between them so they look like one blob. Garbage stones are cracked gray stones. When popping, they blink for 0.3 seconds, swelling slightly and then shrinking.
The fall speed increases every 12 pieces placed. At first it takes 0.7 seconds per row, and each stage cuts 0.055 seconds, down to 0.09 seconds. For 0.45 seconds after touching down you can still move or rotate, and this grace period can be reset up to 12 times. Rotating against a wall tries pushing one column away, and if that still doesn't work, it flips the pair top to bottom. Sound is made with Web Audio, no files. The longer the chain goes, the higher the pop sound climbs, two semitones at a time.
How to use it
On a keyboard, ←→ moves, ↑ or X rotates right, and Z rotates left. ↓ drops faster, Space drops instantly, and P or Esc pauses. On a phone, six buttons appear at the bottom of the screen, and if the screen is narrow, the computer's board goes below yours. You lose when the X-marked cell at the top fills up. Your win-loss record is saved in this browser. At first you can win by popping fours as soon as you see them, but after a few rounds, once pieces start falling fast, the side that sets up a 3-chain or longer wins.