4 ms·

HTML5 Tetris - Practice Work

38 points by princemaple 14y ago

keva161 14y ago
It wont auto restart on Chrome :(
- princemaple 14y ago
  since there's a refresh key on every browser, I never thought about setting up a restart function... it would be easy to achieve though.
dindresto 14y ago
That gets on the front page? I guess I should just post everything I program here from now on (like the Tetris I programmed two weeks ago)
- vicks711 14y ago
  Then why don't you?
laurent123456 14y ago
Good demo and nice, readable source code. It's impressive he can make this all work in just under 300 lines of JavaScript.
dzreams 14y ago
"Up" arrow makes the blocks rotate the wrong way. Source: I play a lot of tetris
- princemaple 14y ago
  I believe many tetris games have their own rotation setting. :) if not, I'm just sorry. lol
  - abrowne 14y ago
    Rotation is how I like it, but I'm used to down arrow moving the piece down a little bit, and space dropping the piece.
tydok 14y ago
Nice work. I like to make simple games when I learn a new language. While playing with javascript and canvas, I wrote this http://nick-d.appspot.com/tetris.html http://nick-d.appspot.com/tetris.html
- princemaple 14y ago
  Yours is much better :) I did consider about making my tetris game more beautiful, but my girl friend said it doesn't mean anything. I gave it another thought and indeed, it won't sharpen my skill any further. Anyway, I like yours, its beautiful and enjoyable.
  - tydok 14y ago
    Your girl friend is absolutely correct. Graphics don't mean much. I added colors but I spent most of the time tuning the keyboard controls :)
    - princemaple 14y ago
      :) worth it. For FUN.
- enry_straker 14y ago
  Nice work, dude. The simplicity of both the html and the js is neat - and, oh the colors are so sharp. it's a pleasure to play.
  - tydok 14y ago
    thank you
princemaple 14y ago
I didn't expect so many people really click on my link. In case anyone is interested, there's another game, http://pochen.me/snake http://pochen.me/snake Check out the top level domain to see other few experiment works : snow flakes on christmas tree, floating ball propagating wave.
- princemaple 14y ago
  http://news.ycombinator.com/item?id=5012549 http://news.ycombinator.com/item?id=5012549
capisce 14y ago
Guess I'll share mine too: http://www.abstractfunandgames.com/tetromino.html http://www.abstractfunandgames.com/tetromino.html :)
- _ex_ 14y ago
  mine in TypeScript: http://elrinconde-ex.blogspot.com/2012/11/typescript.html http://elrinconde-ex.blogspot.com/2012/11/typescript.html
- vlaube 14y ago
  Here is mine: http://valentinlaube.de/temp/tetris.html http://valentinlaube.de/temp/tetris.html Writing a simple game is a great way to practice your programming skills.
xiaoma 14y ago
In 2011, I did the "tetris with a shop" that I'd always wanted as a kid-- one where you buy the blocks to use. It's a flash game and I've thought about how easy it would be to port to JavaScript, but the gameplay mechanics need some work and I've been so bogged down generating enough freelance business leads to stay afloat since moving to SF that I gave up on it. http://www.kongregate.com/games/Xiaoma/block-merchant http://www.kongregate.com/games/Xiaoma/block-merchant
- tensaix2j 14y ago
  Good game, but i m stuck at merchant page where i have $0 coin but it insisted me to purchase at least 4 pieces.
  - xiaoma 14y ago
    Terrible pieces are free, good ones cost gold. Did you find a way through buying and selling to actually get less than 4 and not have money? I'm pretty sure I disallowed the player from selling below 4. Edit: Even though it's been a while, I did spend about a month making that (it was before I'd ever had a programming job) and I'm interested in feedback. My thought on it now is that the game concept is broken. It's what I always wanted as a kid, but the problem is this: If you start with the good pieces, why ever buy bad pieces? But if you start with the bad pieces, most players will get crushed and that 5% who can do well enough buy good pieces then do even better and then crush the game. It's inherently unstable, kind of like those old 4X games with stupid AIs that cheat on harder difficulty settings. They'll destroy you if they catch you early, but once you gain parity, you'll steamroll them with little challenge.
princemaple 14y ago
Glad to remind you about all those old memories. I guess the best thing of js is that it runs in browser. :)
tensaix2j 14y ago
Several months ago, i came up with an idea of combining Tetris and Poker. I made an iOS app for this. During the initial review, the app was rejected by review team due to copyright violation of Tetris. They simply do not allow any game on IOS that resembles Tetris. Then i had an idea to bypass that restriction, and got my app approved. lol https://itunes.apple.com/us/app/dropoker/id505733317?mt=8 https://itunes.apple.com/us/app/dropoker/id505733317?mt=8
- PetitPrince 14y ago
  The Tetris Company has an aggressive stance towards protecting their trademark. You don't dare publish anything that remotely sounds like Tetris (anything ending in -tris, in fact [1]). Games that bear the name Tetris must adhere to stringent gameplay guidelines too [2]. [1] http://gaygamer.net/2008/08/tris_tetris_clone_for_iphone_b.html http://gaygamer.net/2008/08/tris_tetris_clone_for_iphone_b.h... [2] http://www.tetrisconcept.net/wiki/Tetris_Guideline http://www.tetrisconcept.net/wiki/Tetris_Guideline
xyproto 14y ago
Opened link in a tab in the background and started reading another article. Suddenly "Game Over!" popped up and disturbed me. Nice work, random HTML5-game I didn't yet try.
- princemaple 14y ago
  sorry for disturbing you :)
toxik 14y ago
I didn't get a single I beam tetromino. This is clearly rigged. Source: I play a lot of Tetris.
conanbatt 14y ago
When i started Kaya.gs and even during it, i always wondered if games will arrive to the html environment at any time. Tetris is the most basic game and yet even in this (perfectly fine) example, its far for complete. It lacks sound and many other things, which lead me to believe that if there is an HTML game era, its far away yet. A standard tetris on classic Java/C# languages take a day to do at most and are an exercise as simple as doing a CRUD for web development.
- princemaple 14y ago
  Well, html5 can do music and better graphics. It's just me being a noob and not intending to do so. BTW, it took me about one hour and I was/am new to js. It is already the HTML era. Just the very start of it.
- PetitPrince 14y ago
  For a more advanced version of Tetris in HTML5, I suggest you take a look at Francesco Cottone's rendition of it at http://www.kesiev.com/akihabara/ http://www.kesiev.com/akihabara/ (it's called T-Spin). It makes a pretty darn good at emulating the game mechanics of the best versions of Tetris (namely the arcade version "Tetris the Grand Master", but also the Gameboy, NES and DS version).
- vlaube 14y ago
  I think you misunderstood the intentions here, the game was not supposed to be a demonstration of what is possible with HTML5. The author probably just wanted to show what he does to practice his programming skills.
dbattaglia 14y ago
Very cool! Only thing I wish is that pressing down just speeds up the blocks fall instead of immediately dumping it to the bottom (which would probably be handy if I wasn't such a spaz).
gmac 14y ago
This is mine, from a long time pre-HTML5: http://tetris.drmiracle.com http://tetris.drmiracle.com
a1k0n 14y ago
here's mine: http://0x10co.de/ua5qu http://0x10co.de/ua5qu
RobotCaleb 14y ago
Here's mine: http://blahg.res0l.net/2009/01/bastet-bastard-tetris/ http://blahg.res0l.net/2009/01/bastet-bastard-tetris/ A Flash port of Bastet from many years ago.
pharrington 14y ago
well here is my Tetris http://www.blocksonblast.com http://www.blocksonblast.com The mechanics were lifted nearly wholesale from Tetris Grand Master 2 (you may know it from watching invisible Tetris on youtube [1]), since I like how that series plays a ton more than any other Tetris. There's also a really basic AI and additional gameplay modes that may or may not be accessible. To go fast and get a high score, lock your pieces with the soft drop. [1] http://www.youtube.com/watch?v=KfDPUAluwpo http://www.youtube.com/watch?v=KfDPUAluwpo e: source is at https://github.com/pharrington/Bodies/tree/master/demos/74 https://github.com/pharrington/Bodies/tree/master/demos/74 for the curious
- diminish 14y ago
  seeing all those impressive html5 tetrises, i hope soon valve will release steam for html5 :)

38 points by princemaple 14y ago

keva161 14y ago

It wont auto restart on Chrome :(

princemaple 14y ago
since there's a refresh key on every browser, I never thought about setting up a restart function... it would be easy to achieve though.

dindresto 14y ago

That gets on the front page? I guess I should just post everything I program here from now on (like the Tetris I programmed two weeks ago)

vicks711 14y ago
Then why don't you?

laurent123456 14y ago

Good demo and nice, readable source code. It's impressive he can make this all work in just under 300 lines of JavaScript.

dzreams 14y ago

"Up" arrow makes the blocks rotate the wrong way. Source: I play a lot of tetris

princemaple 14y ago
I believe many tetris games have their own rotation setting. :) if not, I'm just sorry. lol
- abrowne 14y ago
  Rotation is how I like it, but I'm used to down arrow moving the piece down a little bit, and space dropping the piece.

tydok 14y ago

Nice work. I like to make simple games when I learn a new language. While playing with javascript and canvas, I wrote this http://nick-d.appspot.com/tetris.html http://nick-d.appspot.com/tetris.html

princemaple 14y ago
Yours is much better :) I did consider about making my tetris game more beautiful, but my girl friend said it doesn't mean anything. I gave it another thought and indeed, it won't sharpen my skill any further. Anyway, I like yours, its beautiful and enjoyable.
- tydok 14y ago
  Your girl friend is absolutely correct. Graphics don't mean much. I added colors but I spent most of the time tuning the keyboard controls :)
  - princemaple 14y ago
    :) worth it. For FUN.
enry_straker 14y ago
Nice work, dude. The simplicity of both the html and the js is neat - and, oh the colors are so sharp. it's a pleasure to play.
- tydok 14y ago
  thank you

princemaple 14y ago

I didn't expect so many people really click on my link. In case anyone is interested, there's another game, http://pochen.me/snake http://pochen.me/snake Check out the top level domain to see other few experiment works : snow flakes on christmas tree, floating ball propagating wave.

princemaple 14y ago
http://news.ycombinator.com/item?id=5012549 http://news.ycombinator.com/item?id=5012549

capisce 14y ago

Guess I'll share mine too: http://www.abstractfunandgames.com/tetromino.html http://www.abstractfunandgames.com/tetromino.html :)

_ex_ 14y ago
mine in TypeScript: http://elrinconde-ex.blogspot.com/2012/11/typescript.html http://elrinconde-ex.blogspot.com/2012/11/typescript.html
vlaube 14y ago
Here is mine: http://valentinlaube.de/temp/tetris.html http://valentinlaube.de/temp/tetris.html Writing a simple game is a great way to practice your programming skills.

xiaoma 14y ago

In 2011, I did the "tetris with a shop" that I'd always wanted as a kid-- one where you buy the blocks to use. It's a flash game and I've thought about how easy it would be to port to JavaScript, but the gameplay mechanics need some work and I've been so bogged down generating enough freelance business leads to stay afloat since moving to SF that I gave up on it. http://www.kongregate.com/games/Xiaoma/block-merchant http://www.kongregate.com/games/Xiaoma/block-merchant

tensaix2j 14y ago
Good game, but i m stuck at merchant page where i have $0 coin but it insisted me to purchase at least 4 pieces.
- xiaoma 14y ago
  Terrible pieces are free, good ones cost gold. Did you find a way through buying and selling to actually get less than 4 and not have money? I'm pretty sure I disallowed the player from selling below 4. Edit: Even though it's been a while, I did spend about a month making that (it was before I'd ever had a programming job) and I'm interested in feedback. My thought on it now is that the game concept is broken. It's what I always wanted as a kid, but the problem is this: If you start with the good pieces, why ever buy bad pieces? But if you start with the bad pieces, most players will get crushed and that 5% who can do well enough buy good pieces then do even better and then crush the game. It's inherently unstable, kind of like those old 4X games with stupid AIs that cheat on harder difficulty settings. They'll destroy you if they catch you early, but once you gain parity, you'll steamroll them with little challenge.

princemaple 14y ago

Glad to remind you about all those old memories. I guess the best thing of js is that it runs in browser. :)

tensaix2j 14y ago

Several months ago, i came up with an idea of combining Tetris and Poker. I made an iOS app for this. During the initial review, the app was rejected by review team due to copyright violation of Tetris. They simply do not allow any game on IOS that resembles Tetris. Then i had an idea to bypass that restriction, and got my app approved. lol https://itunes.apple.com/us/app/dropoker/id505733317?mt=8 https://itunes.apple.com/us/app/dropoker/id505733317?mt=8

PetitPrince 14y ago
The Tetris Company has an aggressive stance towards protecting their trademark. You don't dare publish anything that remotely sounds like Tetris (anything ending in -tris, in fact [1]). Games that bear the name Tetris must adhere to stringent gameplay guidelines too [2]. [1] http://gaygamer.net/2008/08/tris_tetris_clone_for_iphone_b.html http://gaygamer.net/2008/08/tris_tetris_clone_for_iphone_b.h... [2] http://www.tetrisconcept.net/wiki/Tetris_Guideline http://www.tetrisconcept.net/wiki/Tetris_Guideline

xyproto 14y ago

Opened link in a tab in the background and started reading another article. Suddenly "Game Over!" popped up and disturbed me. Nice work, random HTML5-game I didn't yet try.

princemaple 14y ago
sorry for disturbing you :)

toxik 14y ago

I didn't get a single I beam tetromino. This is clearly rigged. Source: I play a lot of Tetris.

conanbatt 14y ago

When i started Kaya.gs and even during it, i always wondered if games will arrive to the html environment at any time. Tetris is the most basic game and yet even in this (perfectly fine) example, its far for complete. It lacks sound and many other things, which lead me to believe that if there is an HTML game era, its far away yet. A standard tetris on classic Java/C# languages take a day to do at most and are an exercise as simple as doing a CRUD for web development.

princemaple 14y ago
Well, html5 can do music and better graphics. It's just me being a noob and not intending to do so. BTW, it took me about one hour and I was/am new to js. It is already the HTML era. Just the very start of it.
PetitPrince 14y ago
For a more advanced version of Tetris in HTML5, I suggest you take a look at Francesco Cottone's rendition of it at http://www.kesiev.com/akihabara/ http://www.kesiev.com/akihabara/ (it's called T-Spin). It makes a pretty darn good at emulating the game mechanics of the best versions of Tetris (namely the arcade version "Tetris the Grand Master", but also the Gameboy, NES and DS version).
vlaube 14y ago
I think you misunderstood the intentions here, the game was not supposed to be a demonstration of what is possible with HTML5. The author probably just wanted to show what he does to practice his programming skills.

dbattaglia 14y ago

Very cool! Only thing I wish is that pressing down just speeds up the blocks fall instead of immediately dumping it to the bottom (which would probably be handy if I wasn't such a spaz).

gmac 14y ago

This is mine, from a long time pre-HTML5: http://tetris.drmiracle.com http://tetris.drmiracle.com

a1k0n 14y ago

here's mine: http://0x10co.de/ua5qu http://0x10co.de/ua5qu

RobotCaleb 14y ago

Here's mine: http://blahg.res0l.net/2009/01/bastet-bastard-tetris/ http://blahg.res0l.net/2009/01/bastet-bastard-tetris/ A Flash port of Bastet from many years ago.

pharrington 14y ago

well here is my Tetris http://www.blocksonblast.com http://www.blocksonblast.com The mechanics were lifted nearly wholesale from Tetris Grand Master 2 (you may know it from watching invisible Tetris on youtube [1]), since I like how that series plays a ton more than any other Tetris. There's also a really basic AI and additional gameplay modes that may or may not be accessible. To go fast and get a high score, lock your pieces with the soft drop. [1] http://www.youtube.com/watch?v=KfDPUAluwpo http://www.youtube.com/watch?v=KfDPUAluwpo e: source is at https://github.com/pharrington/Bodies/tree/master/demos/74 https://github.com/pharrington/Bodies/tree/master/demos/74 for the curious

diminish 14y ago
seeing all those impressive html5 tetrises, i hope soon valve will release steam for html5 :)