Tetris Game with JavaScript

Classic Tetris game built with vanilla JavaScript, HTML5 Canvas, and CSS. Features score tracking, level progression, piece rotation, and keyboard controls.

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

• Classic Tetris gameplay mechanics
• Canvas-based rendering using HTML5 Canvas API
• Keyboard controls (arrow keys for movement and rotation)
• Score tracking system (+10 points per row cleared)
• Level progression with increasing speed
• Piece rotation with collision validation
• Row clearing when a line is completed
• Game over detection
• Start screen overlay
• Responsive controls panel
• 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/
│   ├── canvas.js
│   ├── constants.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.

---