HTML5 Tetris - Practice Work
38 points by princemaple 12 years ago | 38 comments- pharrington 12 years agowell here is my Tetris 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
e: source is at https://github.com/pharrington/Bodies/tree/master/demos/74 for the curious
- diminish 12 years agoseeing all those impressive html5 tetrises, i hope soon valve will release steam for html5 :)
- diminish 12 years ago
- gmac 12 years agoThis is mine, from a long time pre-HTML5: http://tetris.drmiracle.com
- tydok 12 years agoNice 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
- princemaple 12 years agoYours 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 12 years agoYour 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 12 years ago:) worth it. For FUN.
- princemaple 12 years ago
- tydok 12 years ago
- enry_straker 12 years agoNice 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 12 years agothank you
- tydok 12 years ago
- princemaple 12 years ago
- xiaoma 12 years agoIn 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.
- tensaix2j 12 years agoGood game, but i m stuck at merchant page where i have $0 coin but it insisted me to purchase at least 4 pieces.
- xiaoma 12 years agoTerrible 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.
- xiaoma 12 years ago
- tensaix2j 12 years ago
- dbattaglia 12 years agoVery 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).
- tensaix2j 12 years agoSeveral 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
- PetitPrince 12 years agoThe 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.h...
- PetitPrince 12 years ago
- xyproto 12 years agoOpened 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 12 years agosorry for disturbing you :)
- princemaple 12 years ago
- capisce 12 years agoGuess I'll share mine too: http://www.abstractfunandgames.com/tetromino.html :)
- vlaube 12 years agoHere is mine: http://valentinlaube.de/temp/tetris.html
Writing a simple game is a great way to practice your programming skills.
- _ex_ 12 years agomine in TypeScript: http://elrinconde-ex.blogspot.com/2012/11/typescript.html
- vlaube 12 years ago
- princemaple 12 years agoI didn't expect so many people really click on my link. In case anyone is interested, there's another game, 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 12 years ago
- princemaple 12 years ago
- dzreams 12 years ago"Up" arrow makes the blocks rotate the wrong way.
Source: I play a lot of tetris
- princemaple 12 years agoI believe many tetris games have their own rotation setting. :) if not, I'm just sorry. lol
- abrowne 12 years agoRotation is how I like it, but I'm used to down arrow moving the piece down a little bit, and space dropping the piece.
- abrowne 12 years ago
- princemaple 12 years ago
- RobotCaleb 12 years agoHere's mine: http://blahg.res0l.net/2009/01/bastet-bastard-tetris/
A Flash port of Bastet from many years ago.
- conanbatt 12 years agoWhen 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.
- vlaube 12 years agoI 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.
- princemaple 12 years agoWell, 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 12 years agoFor 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/ (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 12 years ago
- laurent123456 12 years agoGood demo and nice, readable source code. It's impressive he can make this all work in just under 300 lines of JavaScript.
- princemaple 12 years agoGlad to remind you about all those old memories. I guess the best thing of js is that it runs in browser. :)
- toxik 12 years agoI didn't get a single I beam tetromino. This is clearly rigged.
Source: I play a lot of Tetris.
- dindresto 12 years agoThat 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 12 years agoThen why don't you?
- vicks711 12 years ago
- keva161 12 years agoIt wont auto restart on Chrome :(
- princemaple 12 years agosince there's a refresh key on every browser, I never thought about setting up a restart function... it would be easy to achieve though.
- princemaple 12 years ago
- a1k0n 12 years agohere's mine: http://0x10co.de/ua5qu