Tetris Game with JavaScript

Neon arcade Tetris built with vanilla JavaScript and HTML5 Canvas. Play classic solo with a 7-bag randomizer, hold, ghost piece, wall kicks and DAS auto-shift, or take on Doom mode — a three-minute race against a Dellacherie-driven AI at ×10 gravity, with both boards fed exactly the same piece sequence.

Demo · Report issue · Suggest something

Table of Contents

• Table of Contents
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running locally
  • Build
• Project Structure
• Demo
• Authors
• Contributing
• License

Features

• Two modes — Solo classic arcade and Vs AI "Doom"
• Doom mode runs at ×10 gravity with a shortened lock delay and a 3:00 match clock
• AI opponent driven by the Dellacherie evaluation — landing height, rows eliminated, row/column transitions, holes and cumulative wells
• Both boards are fed the same piece sequence, so a doom match is a fair race
• 7-bag randomizer with a 3-piece next queue
• Hold piece, locked out until the next piece locks (off in doom mode)
• Ghost piece landing indicator
• Wall kicks on rotation, plus a lock delay with capped resets
• DAS/ARR auto-shift while a movement key is held
• Scored hard drop and soft drop
• Combo, back-to-back Tetris and level-scaled line scoring
• Level up every 10 lines, with the best score persisted in localStorage
• Keyboard controls — arrows to move and rotate, Space to hard drop, C to hold, Esc to pause
• Neon arcade UI with CRT scanlines, vignette and a drifting tetromino backdrop
• Particle line clears, screen shake, and slow motion on a Tetris
• Board-clear explosion on game over
• Motion effects respect prefers-reduced-motion
• Canvas-based rendering using the HTML5 Canvas API
• Built with Vite for fast development and HMR
• ESLint with Standard style

Tech Stack

• HTML5
• CSS3
• JavaScript
• Vite

Getting Started

Prerequisites

• Node.js 16+
• npm, yarn, pnpm, or bun

Installation

git clone https://github.com/wrujel/tetris-javascript.git
cd tetris-javascript
npm install

Running locally

npm run dev

Open http://localhost:5173 with your browser to see the result.

Build

npm run build

Project Structure

/
├── images/
│   └── screenshot.png
├── utils/
│   ├── ai.js
│   ├── canvas.js
│   ├── constants.js
│   ├── effects.js
│   ├── engine.js
│   └── pieces.js
├── index.html
├── main.js
├── style.css
└── package.json

Demo

You can check out the demo:

Authors

• @wrujel — Creator & maintainer

Contributing

Contributions are welcome! If you have suggestions or find bugs, please open an issue or submit a pull request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is not currently licensed.

---