Tetris

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

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

Features

• Classic 20×10 playfield with 7 tetromino types (I, J, L, S, Z, O, T)
• Wall kick rotation (offsets 0, ±1, ±2)
• Ghost piece preview showing where the current piece will land
• Next tetromino preview
• Hard drop (Space) and soft drop (Arrow Down)
• Score tracking and line counter
• Dynamic speed — the game gets faster as you progress
• Game state persistence via localStorage (resume where you left off)
• Keyboard and touch controls (swipe, tap, drag)
• Pause / Resume and Restart at any time
• Progressive Web App (PWA) with offline support via Service Worker

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. Use Arrow Left / Right to move the piece sideways.
2. Press Arrow Up to rotate.
3. Press Arrow Down for soft drop.
4. Press Space for hard drop (instant placement).
5. Press Escape to pause / resume.
6. On touch devices: swipe left/right to move, tap to rotate, swipe down to soft drop, swipe up to hard drop.
7. Fill complete horizontal lines to clear them and score points.

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

Project Structure

├── index.html
├── package.json
├── sw.js                          # Service Worker for offline caching
├── .pre-commit-config.yaml
├── .prettierrc
├── css/
│   ├── index.css                  # CSS entry point (imports)
│   ├── global.css                 # Global styles & CSS variables
│   ├── grid.css                   # Playfield grid layout
│   ├── tetrominoes.css            # Tetromino color definitions
│   ├── info.css                   # Info panel & next-piece preview
│   └── menu.css                   # Navigation/menu styles
├── js/
│   ├── index.js                   # Application entry point
│   ├── board.js                   # Game orchestration & state management
│   ├── tetris.js                  # Core Tetris game logic
│   ├── renderer.js                # DOM rendering & animations
│   ├── game-loop.js               # requestAnimationFrame game loop
│   ├── input-handler.js           # Keyboard & touch input handling
│   ├── consts.js                  # Game constants & tetromino shapes
│   └── utils.js                   # Helper functions
└── tests/
    ├── board.test.js
    ├── consts.test.js
    ├── game-loop.test.js
    ├── input-handler.test.js
    ├── renderer.test.js
    ├── utils.test.js
    └── tetris/                    # Integration tests for game logic
        ├── helpers.js
        ├── init.test.js
        ├── generation.test.js
        ├── movement.test.js
        ├── rotation.test.js
        ├── drop-and-scoring.test.js
        ├── edge-cases.test.js
        ├── game-over.test.js
        ├── persistence.test.js
        └── stress.test.js

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.