🎮 Tetris [without canvas !]
Used no external libraries/frameworks.
(Just used the font-awesome icons.)
100% made by me!
I built this game using pure HTML, CSS, JS and without using the <canvas> element!
The most useful HTML element for making this game's UI is <div> !
❔ How to Play ?
- Use Enter key to pause/resume (or restart the game after game-over).
- Use ASDW keys or arrow keys to move & rotate the shape clockwise.
- Use Q to rotate the shape counterclockwise.
- Use E to rotate the shape clockwise. (alternate key for UP & W)
- Use Ctrl key to hold the block.
- Play it offline to load the SFX faster.
- Customize the game by changing the values inside of
- Make the
CONFIG.block.fragileproperty true/false, and see the difference!
🎮📖 Game Story:
At first you have 5 lives (by default) and $0. Each time you resolve the rows, you'll earn $10
for each row, and the speed of the game will be faster!
You can hold your money until you lose all your lives (😭😈).
This is really neat! Love the sound effects. Maybe make it so you earn more money when you get a tetris or destroy multiple levels at once?
@eankeen It give's you $10 for each levels you destroy. It doesn't matter how many levels you destroyed at once.
You can customize the price of each levels you destroy, by changing the value of
CONFIG.resolve.price inside of
As you earn more money, the game will be get faster.
I've just played with it...
And unfortunately I just found 2 bugs.
When the width of the block is more than the place where it should be placed, it will not be placed there and you can't see it in the next turn.
For example, just try to place the first shape on the pixel number 5.
It's a little hard to explain, but I think that if you try to do these steps, you will face this bug:
- Place the 1st block on the 5th pixel
- Place the 2st block on the 0th pixel
- Place the 3st block on the 0th pixel
- Place the 4st block on the 2th pixel
After that you will see the block has filled a pixel that it should fill.