[WIP] Tetris

Tetris game in vanilla TS & HTML5 canvas ✨

🚨 🚧 This project is currently a work-in-progress 🚧 🚨

Overview

Demo

Checkout the live demo

TODO

• Setup basic grid & add randomly colour cells
• Structure
  • Rewrite Grid.map as an iterator
  • Encapsulate game logic into class
• Functionality
  • Falling tetrominoes
    • One
      • Randomly generate
      • Collide with field boundary
    • Multiple
      • Randomly generate
      • Collide with pieces/field boundary
    • Lateral movement
      • Basic functionality (with simple button)
      • Redraw after moving
      • Must stay within field
      • Must not move over another piece
      • Bind to keyboard
    • Rotation
      • Basic functionality
      • Can't rotate out of field
      • Must not rotate into another piece
      • Kicks off wall/other pieces
    • Always spawn in middle (deviating left if exact middle not possible)
    • Drop (acceleration)
      • Soft drop
      • Hard drop
  • Clear completed lines
    • Triggered when gravity is applied and tetromino can't move down
    • Clear completed lines
    • Drop stack down
  • Game state
    • Game over alert
    • New game
    • Pause game
  • Ghost piece
    • Same as tetromino (when landed)
    • Different graphic
  • Preview next tetromino
    • Static preview box
    • Working preview box
  • Random generator
    • 7 bag (see https://tetris.fandom.com/wiki/Random_Generator)
  • Hold piece
    • Static hold box
    • Saves current tetromino
    • Spawns new piece (if nothing was held)
    • Resets previously held piece to top (as if newly spawned)
    • Can't use hold again until piece locks
  • Scoring based upon number of lines clear & acceleration
  • Load/save
  • Levels of increasing speed
  • Stats
• Readme
• Github pages demo
  • Deploy script
  • Favicon
  • Github banner/corner
  • Make it look nice
• Formatting (prettier/eslint?)
• Graphics
  • Basic bevel
  • Layout