Share your repls and programming experiences

← Back to all posts
Tetris
smrsan761 (70)

https://repl.it/@smrsan761/Tetris

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.

💡 Tips:

  • Play it offline to load the SFX faster.
  • Customize the game by changing the values inside of config.js file.
  • Make the CONFIG.block.fragile property 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 (😭😈).

Commentshotnewtop
katyadee (1161)

I LOVE the sound effects.

argthe1st (83)

This is a really good game!

MatthewChapdela (1)

Fun! I like the sound effects!

JennieLiao (4)

Hey nice job haha! I suck at Tetris but you got it down really well c:

Ov3R10rd (48)

You should make a block holding system, like in the real tetris.

smrsan761 (70)

@Ov3R10rd Thanks for your good advice!
Today, I want to implement that 😉
( https://repl.it/talk/share/Tetris-without-canvas/12433 )

smrsan761 (70)

@Ov3R10rd I've just implemented something like hold-piece.
Is that what you wanted ?

Ov3R10rd (48)

@smrsan761 I will try it out! Thanks!

smrsan761 (70)

@Ov3R10rd I'm waiting for reading your comment... :wink:

Ov3R10rd (48)

@smrsan761 Perfect! There is just one thing... the hold should start blank, otherwise you get a free block!

smrsan761 (70)

@Ov3R10rd I'll implement that in the next 24 hours.
But for now, I'm implementing the "next" feature which shows you the preview of the next block.
After that, if the hold starts blank, and if you hold your block for the first time, what will be swapped with the block in your hand ?
Should I swap the next block with it ?

Ov3R10rd (48)

@smrsan761 I don't think that your current block and the hold block should swap, the blocks should swap, but only if there is a block in the save. When you start, the save block should be blank, then if a user decides to save a block, the current block goes into the save, and another random block will be dropped.

Ov3R10rd (48)

@smrsan761 Also, this game is really good. You know how to use the canvas element right? Because if so, we could make a collab. Just a suggestion!

smrsan761 (70)

@Ov3R10rd I've just implemented both "Next" preview and what you suggested about the hold-piece feature.
Is that what you wanted ?

smrsan761 (70)

@Ov3R10rd Yes, I know a bit, but I learn more if needed.
So... How we can collaborate with each other ?

Ov3R10rd (48)

@smrsan761 I dont know... but we could figure it out :)

Ov3R10rd (48)

@smrsan761 Uhh... idk. Maybe we shouldn't... yeah, I dont see how we could do that. :|

jarules214 (9)

It is a really solid version of Tetris! My only request is that you added an infa-spin.

Ov3R10rd (48)

But overall fun and addicting! Could not stop playing