Skip to content
← Back to Community
🎮 Tetris [without canvas !]
Profile icon
smrsan761

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 element!
The most useful HTML element for making this game's UI is

Voters
Profile icon
AshertheSmasher
Profile icon
CeeZee22
Profile icon
Milo-5
Profile icon
FriendlyGooseMan
Profile icon
some-antics
Profile icon
talismamanuel
Profile icon
sj42
Profile icon
CollinKunsman
Profile icon
ash15khng
Profile icon
HampeCS
Comments
hotnewtop
Profile icon
hyperupcall

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?

Profile icon
smrsan761

@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.

Profile icon
some-antics

This is really impressive! Well written code as well.

Profile icon
idrawhorsechamp

"PAUSE" is spelled "PUASE"

Profile icon
smrsan761

@idrawhorsechamp Thank you! (lol)

Profile icon
UzayAnil

Noice. Check out my tetris! https://repl.it/@UzayAnil/Tetris

Profile icon
smrsan761

@UzayAnil Hey..!
I've just played with it...
And unfortunately I just found 2 bugs.

  1. 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.

  2. 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.
Profile icon
UzayAnil

Thank you for these @smrsan761
1.you are right, I fixed it, it now gives you the same block if you cannot place it (you will still lose a point though.)

Sorry, I don't understand 2.

This isn't included as 3., but I added game instructions too (for no reason.)

Profile icon
masfrost

Nice. It's so smooth!

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

Profile icon
smrsan761

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

( I've explained the keys here. )

Profile icon
masfrost

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

Profile icon
smrsan761

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

Profile icon
smrsan761

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

Profile icon
masfrost

@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

Profile icon
masfrost

@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

Profile icon
smrsan761

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

Profile icon
smrsan761

@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 ?