I made a Tetris
I started thinking about making a Tetris after my friend Uwu suggested there were no HTML5 tetrises (which there are I think, but I still got interested). So I just created a directory and started working, like all good projects start.
At first I thought the way to make it would be using canvas, soon after I ditched the idea to just make all the graphics with good ol’ DOM elements, and I’m glad I did, making it with canvas would have been orders of magnitude harder, especially when adding effects/styling (so my respect to anyone that makes a complex Tetris game with canvas).
So here we start:
And after roughly 10 days of work:
I didn’t implement some common Tetris gimmicks like T-Spins and Hold. But I added a few things of my own:
- Clearing a line makes all pieces touching the line to become independent and loose.
- When a powered up piece is placed, all placed blocks become independent and loose. This power up is called POW. The player starts with 3 and earns 1 every 20 line clears.
- Clearing more than 4 lines activates a piece picker that allows you to pick the type of the next 4 pieces.
- Clearing all lines spawns a big piece. Big pieces look like regular pieces but they have double the block amount.
Options
- Show/Hide Ghost
- Enable/Disable Music
- Enable/Disable Sound Effects
- Enable/Disable Background
- Number of Rows
- Number of Columns
- Number of Previews
- Block Size (Pixels)
- Math Random Seed
- Goal (Score, Level, Minutes, or None)
What Did I Learn
I learned again that making video games is fun, because it’s challenging and satisfying to make something in your vision that is a complete experience. It’s nice to receive feedback after players go through most of the design.
Making a Tetris is not easy. Maybe it was the way I decided to go with to control pieces and the grid, but making all pieces behave the way they should took days. Sometimes I would sleep with a big bug pending, which would be fixed the next day, this is rare for me as I like to feel everything is complete before I go to bed. Even if everything seems complete, some minutes of laying down spawn more possible ideas and problems which I try to make a mental note to fix the next day.
But yeah making a Tetris, at least a fairly complex one, is not easy, which makes it a good challenge for everyone, so I encourage people to make their own. I mean, it’s not incredibly hard since I was able to complete this in 10 days, but it took a lot of thinking and iterations. Again, making it in canvas would have been much more difficult.
Asynchronous operations (Promises, Await) might seem like a good idea and easy to deal with, but they make development harder, as state has to be considered to do or not do things. Removing a big Promise based function which I realized it didn’t need to be really async, fixed a lot of the problems I was having. Still there are some Timeouts I had to deal with, those are mostly unavoidable. But I think Promises are great, and it’s often the tool for the job, I’m just saying if it’s avoidable, it’s better to avoid it.
Tetris is a fun game and simple/flexible enough to allow the implementation of original ideas.
While I was developing this I watched the Tetris story by Gaming Historian, which I found incredibly interesting, and made me appreciate the efforts of Henk Rogers and Alexey Pajitnov. So I respect them a lot, and hope my game would not cause them trouble, it’s just meant to be a simple experiment.
Link to the game: http://tetris.merkoba.com
Link to the repo: https://github.com/madprops/Archon-Tetris
