Angular Tetris (Drop-in Component)

A lightweight, self-contained Tetris component you can copy/paste into any Angular app.

Files

• src/lib/tetris/tetris.module.ts: NgModule exporting the component
• src/lib/tetris/tetris.component.ts: Core logic and inputs/outputs
• src/lib/tetris/tetris.component.html: Template
• src/lib/tetris/tetris.component.scss: Styles

Angular Version

• Works with Angular 14+ (regular NgModule). No external state.
• Optional: replace buttons with Angular Material if desired.

Copy into your project

1. Create a directory, e.g. app/shared/tetris/, and copy the four files.
2. Ensure your module imports CommonModule (already done in TetrisModule).
3. Import the module where you need it:

import { TetrisModule } from './shared/tetris/tetris.module';

@NgModule({
  imports: [TetrisModule]
})
export class FeatureModule {}

4. Use the component in a template:

<app-tetris></app-tetris>

Controls

• Left/Right: move
• Up or X: rotate clockwise
• Z: rotate counterclockwise
• Down: soft drop (+1 per step)
• Space: hard drop (+2 per row)
• P: pause/resume, R: restart

Notes

• No persistence. No services required. No RxJS required.
• Board: 10x20. 7-bag randomization. Basic wall kicks.
• Scoring: 100/300/500/800 for 1-4 line clears. Extra points for drops.