Parzibyte's blog

In this post I will show you the Tetris game programmed in pure JavaScript, totally free and open source.

This block game is programmed with JavaScript and uses canvas to paint the game. I also use Bootstrap for the layout of the buttons and the page in general, with a bit of SweetAlert for the alerts.

Although it seems simple to do, it is one of the jobs that has cost me the most and of which I am most proud. It was complex (for me) to understand all the logic for collisions, rotations, row deletion, part movement, limits, etc.

Among the features of the game we find:

• Sounds: background music, sound when the piece cannot be rotated, when a complete row is made and when the tetromino touches the ground
• Colors: each piece has a random color chosen at runtime
• Rotations: pieces can be rotated to accommodate them and accumulate points
• Mobile compatible: because it is web, I have added some buttons to be able to play it on mobile phones and tablets, but it can also be played with the keyboard
• Open source: you can modify the game, the board, the length, speed, pieces, rotations, etc.
• Tetris port: behaves like any normal tetris game
• Game pause: the game can be paused or resumed at any time

Let’s see then the details of this game programmed in JS. Throughout the post I will show you how this game is programmed, I will also leave you a demo and the complete code which is FOSS.

Note: figure, piece and tetromino will be used synonymously in this post.

(more…)