Tetris Online

A complete browser-based Tetris game with optional Firebase backend for user authentication and an online leaderboard. Supports English and Chinese (ZH) languages.

Play it live →

---

Features

• Classic Tetris with SRS rotation, 7-bag randomizer, ghost piece, and hold
• Online leaderboard (registered users only) via Firebase Firestore
• User registration and login via Firebase Auth
• Anonymous play always allowed — no account required
• EN / ZH language toggle
• Responsive layout with touch controls for mobile
• Zero build step — pure HTML/CSS/JS with CDN imports

---

Quick Start (Local / Offline Mode)

No setup required. Just open index.html in a browser:

# Any static server works, e.g.:
npx serve .
# or
python3 -m http.server 8080

In local mode (FIREBASE_ENABLED = false in js/config.js), the game runs fully offline. Scores are not saved to any leaderboard.

---

Firebase Setup (Online Leaderboard)

1. Create a Firebase Project

1. Go to console.firebase.google.com
2. Click Add project → follow the wizard
3. Enable Google Analytics (optional)

2. Enable Authentication

1. In Firebase Console → Authentication → Get started
2. Enable Email/Password sign-in provider
3. Enable Google sign-in provider → click Edit → set a support email → Save

3. Enable Firestore

1. In Firebase Console → Firestore Database → Create database
2. Start in production mode
3. Choose a region close to your users

4. Deploy Firestore Security Rules

Option A — Firebase CLI:

npm install -g firebase-tools
firebase login
firebase init firestore   # select your project
# Copy firestore.rules content if prompted
firebase deploy --only firestore:rules

Option B — Firebase Console:

1. Go to Firestore → Rules tab
2. Paste the contents of firestore.rules
3. Click Publish

5. Get Your Web App Config

1. In Firebase Console → Project Settings (gear icon) → General
2. Scroll to Your apps → click Add app → Web </>
3. Register the app, then copy the firebaseConfig object

6. Update js/config.js

const FIREBASE_CONFIG = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abcdef"
};

// Change this to true
const FIREBASE_ENABLED = true;

---

GitHub Pages Deployment

1. Push to GitHub

git init
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
git add .
git commit -m "Initial commit"
git push -u origin main

2. Enable GitHub Pages

1. In your GitHub repo → Settings → Pages
2. Under Source, select GitHub Actions

The workflow at .github/workflows/deploy.yml will automatically deploy on every push to main.

Your game will be live at: https://YOUR_USERNAME.github.io/YOUR_REPO_NAME/

---

Controls

Action	Keyboard	Touch
Move Left/Right	← →	◀ ▶ buttons
Soft Drop	↓	▼ button
Hard Drop	Space	▼▼ button
Rotate CW	↑ or X	↻ button
Rotate CCW	Z	↺ button
Hold	C or Shift	HOLD button
Pause	P or Esc	—

---

Scoring

Lines Cleared	Points
1 (Single)	100 × level
2 (Double)	300 × level
3 (Triple)	500 × level
4 (Tetris)	800 × level
Soft Drop	1 per cell
Hard Drop	2 per cell

Level increases every 10 lines. Speed increases with each level.

---

Project Structure

├── index.html                # HTML shell
├── css/style.css             # Dark theme, responsive layout
├── js/
│   ├── config.js             # Firebase config + app constants
│   ├── i18n.js               # EN/ZH translations
│   ├── game.js               # TetrisGame engine class
│   └── app.js                # App controller (auth, UI, input)
├── firestore.rules           # Firestore security rules
├── .github/workflows/
│   └── deploy.yml            # Auto-deploy to GitHub Pages
└── README.md

---

License

MIT