Back to the blog
Development / DEVELOPMENT NOTES

Puyo Puyo with HTML5 and JavaScript

A colour-matching puzzle with flood-fill detection and a CPU mode for watching autonomous games.

This project implements a Puyo Puyo-inspired game with HTML5 and JavaScript. Pieces fall onto a board, and the goal is to connect groups of four or more puyos of the same colour.

Connect, clear, and keep playing

A valid group disappears from the board. The player must keep finding combinations as the speed increases. The game ends when the board fills up and cannot accept another piece.

Controls and CPU mode

Use the arrow keys to move pieces and the space bar to rotate them. The demo includes a CPU mode for watching an autonomous game.

What the implementation includes

  • Flood-fill detection of same-colour groups.
  • A CPU-controlled game mode.
  • A configurable column count with row adaptation.
  • Generation of random board states.

The repository shows how group detection, falling pieces, and move evaluation work together.

Source code

Explore the project on GitHub

Written by Sergio Soriano

Development, curiosity, and shared projects.

About Sergio Soriano