I Cloned Tetris using p5.js

Today my country had a day off because we are having general election for local governments leaders. What do you know, it brings me joy and sadness. I was torn being someone who need day off and the urge to be a productive person. My oh my, what a feeling.

I'd love to play games, or read books, or just chill out, but I just can't. Lately my head filled with strange stuffs and easily overthink. My way to beat the hell out of it is by coding. Day off? Urge to code? Perfect timing for making random game.

Processing

A long time ago my friend introduced me to a programming language called Processing. I was surprised and loved it, because it's so concise and easy to prototype stuffs. Do you want to draw a rectangle? Just use rect. Do you want to fill its color? Just use fill. How delightful. There's even a library to use this language on the web. It's called p5.js. You can head to this link to try it on their editor!

Tetris

Lately I've been mesmerized by Tetris. I don't know why, but the game is so simple yet so complex and challenging. This game was invented by Alexey Pajitnov in 1984, and still popular until now. There's a recent game called Tetris Effect Connected, which you can play competitively online! I've been watching it on my lunch breaks, so good!

And you can see him, Mr. Pajitnov, on the trailer!!

And here's my take

I would like to re-create Tetris, but I don't need bloatware or any other stuffs to code, and there's also p5.js. Perfect. I simply opened the online editor and started to type away.

There's several things to create Tetris:

• Drawing the blocks, or officially called as Tetromino
• Move currently falling Tetromino
• Ability to rotate the Tetromino
• Stack the Tetromino into each other
• Check whether there's some filled row that scores

In Processing there's a method called as draw which runs every frame. I put all the game loop in this method. Unfortunately there's no wait method in p5.js, so I use a variable which hold how long since last update and execute the desired method (mainly for pulling down Tetromino).

Tetris needs blocks to represent its Tetromino. Because Processing also has rect method to draw rectangle, I didn't have to draw the graphic assets. Phew, I was so glad I didn't have to draw some crappy "programmer" assets by hand.

I had confusion with how the "I" pattern (the long four blocks) being rotated. Because my implementation was all is two dimensional array, and when it's rotate, all of the array would rotate. It runs well for every Tetrimino because they have their center array as rotating pivot. The "I" pattern, ah, it's unique. As you can see from this image below, the rotation was too obnoxious, if you will. It should have been only rotated on top left corner and flipping between horizontal or vertical rotation every time it's rotated.

But, meh, I'll just ignore it for now.

Several hours later after coding, watching random YouTube videos, and having a lot of snacks (o boy I love coding for leisure), here it is!

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Code PlaygroundJSFiddle

use key A/S/D to move and Q/E to rotate

I'm glad I've been experimenting stuffs and hone my rusty programming skills. I really need to take a day off to really put my life together, though. Those financial budgeting, those scheduling, those other projects, those future goals, those long-long emotional baggage that need to take care of. Phew, there's so many, and here I am distracting it by coding. Lol. Oh well, maybe I'll take care of them on my end-of-year's holiday (It's already end-of-year?? What a year).