Share your repls and programming experiences

← Back to all posts
🎮 Tetris [without canvas !]
smrsan761 (71)

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
eankeen (661)

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?

smrsan761 (71)

@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 config.js file.
As you earn more money, the game will be get faster.

idrawhorsechamp (5)

"PAUSE" is spelled "PUASE"

masfrost (45)

Nice. It's so smooth!

Do you plan on adding a hold button? Maybe it costs you $ to hold?

smrsan761 (71)

@masfrost Excuse me, I didn't understand your comment. Could you explain to me what "hold button" means?

( I've explained the keys here. )

masfrost (45)

@smrsan761 In most tetris modes you can save a piece for later https://tetris.fandom.com/wiki/Hold_piece

smrsan761 (71)

@masfrost Thanks for your nice advice. I'll implement that tomorrow. (here it's 3:00am)

smrsan761 (71)

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

masfrost (45)

@smrsan761 YES! It works great! I've been playing it on and off all day :)

By the way, it would also be cool if there's a "Next" piece preview, see https://tetris.fandom.com/wiki/Next

masfrost (45)

@masfrost You should submit this to the challenge board. Do you mind if I move your post there?

Edit: nevermind just saw you submitted it :P

smrsan761 (71)

@masfrost Of course! I'm trying to implement that in the next 24 hours. 😉

smrsan761 (71)

@masfrost I implemented the "Next" piece preview,
and I have also changed the "Hold" piece feature according to this comment.
Is that what you wanted ?