top of page
Search

Blocks For Fun

  • raedgharzeddine
  • May 12
  • 2 min read

 

For my final-year project at the Lebanese American University, I developed a version of Tetris in Turbo Pascal 7.0. To refresh my TypeScript skills, I chose to recreate Tetris using the same concepts I employed in my FYP.


Blocks For Fun is a simple browser game inspired by the classic falling-block puzzle. I created it as a personal project for fun, aiming to turn a familiar game concept into a working TypeScript app that runs directly in the browser.


The project uses TypeScript, Webpack, and the HTML canvas. The game board is a 20-by-10 grid, with each falling block rendered on the canvas as it moves, rotates, lands, and makes space for the next piece. A second canvas displays the upcoming block, while the interface tracks the score, pause status, new game options, and optional sound effects.


A key enjoyable aspect of this project is its modular design, which divides the logic into small, manageable parts. The `Game` class handles the board, score, block queue, movement, timing, and game state. Meanwhile, the `Gameboard` class links this logic to user interface controls such as 'new game', 'pause', 'sound', and the 'about' dialog. Each block shape is represented by its own TypeScript class, making the movement and rendering code clearer and easier to understand.


This served as a good reminder of how much can be created with basic browser APIs. There's no complex game engine involved—only canvas drawing, DOM events, timers, and TypeScript classes working together. This approach keeps the project accessible while still allowing for features like collision detection, rotation, scoring, state management, and responsive canvas sizing for smaller screens.


Blocks For Fun is not trying to reinvent puzzle games. It is a compact learning project, a bit of nostalgia, and a working example of how TypeScript can bring structure to an interactive browser experience. Most importantly, it was built because small projects are fun to make.

Feel free to check the code at:

To play with the solution:

 

 
 
 

Comments


bottom of page