3 in a Row

Read in: English | Русский | Español

A browser-based Match-3 puzzle game built with pure HTML, CSS, and JavaScript — no frameworks, no dependencies.

Features

• 8×8 game grid with 7 tile colors
• Swap adjacent tiles to match 3 or more in a row (horizontal or vertical)
• Chain reactions — cascading matches after tiles fall
• Score tracking
• Game state persistence via localStorage (resume where you left off)
• Mouse and keyboard navigation (Arrow keys + Enter / Space)
• Smooth CSS animations for tile movement and removal
• Restart at any time

Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (custom properties, keyframes)
Logic	JavaScript ES2022 (ES modules)
Tests	Node.js built-in test runner
Formatting	Prettier
CI/CD	Forgejo Actions

Getting Started

Prerequisites

• A modern browser (Chrome, Firefox, Safari, Edge)
• Node.js v22+ — only required for running tests

Running the Game

No build step required. Open index.html directly in your browser, or serve it with any static file server:

# Example with Python
python -m http.server 8080

# Example with Node.js (npx)
npx serve .

Then navigate to http://localhost:8080.

Running Tests

npm test

Tests use the Node.js built-in test runner — no additional packages needed.

How to Play

1. Click (or navigate with arrow keys) to select a tile — it will be highlighted.
2. Click (or press Enter / Space on) an adjacent tile to swap them.
3. If the swap creates a match of 3 or more tiles of the same color, they are removed and new tiles fall in.
4. Chain reactions score automatically — the higher the combo, the more points.
5. Press Restart to start a new game (clears saved state).

Your progress is saved automatically. Refreshing the page will restore your last session.

Project Structure

├── index.html
├── package.json
├── .pre-commit-config.yaml
├── .prettierrc
├── css/
│   ├── index.css          # CSS entry point (imports)
│   ├── global.css         # Global styles & CSS variables
│   ├── game.css           # Game grid layout
│   ├── tile.css           # Tile element styles
│   ├── tiles-color.css    # Tile color definitions
│   └── menu.css           # Navigation/menu styles
├── js/
│   ├── index.js           # Application entry point
│   ├── matchThree.js      # Game controller (orchestrates Game + Grid)
│   ├── utils.js           # Shared utilities (delay, etc.)
│   └── game/
│       ├── index.js       # Re-exports Game and Grid
│       ├── game.js        # Core game logic & state (matrix, score, matching)
│       ├── grid.js        # UI layer & user interaction
│       └── tile.js        # Tile DOM element class
└── tests/
    ├── utils.test.js
    ├── game.test.js
    ├── tile.test.js
    ├── grid.test.js
    ├── matchThree.test.js
    └── helpers/
        └── dom-mock.js    # DOM mock helpers for tests

CI/CD

Forgejo Actions workflows run on every pull request and push to main:

Workflow	Trigger	What it does
testing.yml	Pull request	Runs npm test on Node.js 22
pre-commit.yml	Pull request	Runs Prettier and file-format checks
deploy.yml	Push to main	Deploys the game to the server

Contributing

1. Fork the repository and create a branch from main.
2. Install pre-commit hooks:

   pip install pre-commit
   pre-commit install
   

3. Make your changes and ensure tests pass (npm test).
4. Open a pull request — CI will run automatically.