React Tetris

https://github.com/chvin/react-tetris

by alifaziz • 9 years ago

210 41 9 years ago

github.com

daliwali2• 9 years ago

Cool, we have the technology and know-how to replicate a 1984 video game using the hottest JS framework.

Does no one care what is the result as long as the developer put the "right" abstractions in making it?

markdown• 9 years ago

Did you feel better after posting that?

I think it's a very cool project.

omegote2• 9 years ago

I honestly think he has a point. There are hundreds of implementations of Tetris for any kind of platform and technology. This is only noteworthy (for some, at least, not for me) because it's build with React.

By the way, it's pretty dumb and shortsighted to depict flash as a neanderthal, because both its capabilities and its ease of use are (were) way beyond what current JS frameworks offer today (and in the upcoming years, at least).

codegeek• 9 years ago

Sometimes it is not only about results. It is about the journey (Takes off my philosophical hat). The fact that Tetris was built is not that important. Show HN is about showing and doing something creative even if that means building a 1984 game.

Plenty of take aways from this Show HN for me. I can look at the code and understand how React was used to achieve this. Sure, this could be done with 100s of other frameworks or even plain C++ but thats not the point. But again, you missed the point.

sk1ppy• 9 years ago

Clever, but I swear the pieces rotate the wrong way compared to Tetris on the gameboy.

Arnavion• 9 years ago

I'm sure they rotate the wrong way compared to the MS Entertainment Pack version atleast.

glomph• 9 years ago

Very frustrating!

Matthias247• 9 years ago

Just thought the same while playing. I was always sure that if I press once more then the tile is exactly rotated like I want it, but instead it was the other way around. It's interesting that we keep such a feeling how Tetris should work after all these years.

abrowne• 9 years ago

It's the right way for me, conditioned by Tetris for Mac ('90s black and white game) and whatever version I had on my TI-83 calculator.

Edit: Just as importantly, at least on a touchscreen, the arrows are on the right and drop is on the left, which is opposite of Gameboy but the same as a computer or TI calculator ;-)

panic• 9 years ago

This is a nice Tetris implementation even ignoring the technology used. The shake effect when you drop a piece is particularly satisfying!

lukaszjb• 9 years ago

I must say it looks really good.

elpocko• 9 years ago

The screen is scrolling around when pressing the cursor keys in a small window.

danjc• 9 years ago

That is just superb. The care taken to reproduce the original is just exceptional.

Side note: that dinosaur looks a lot like the one in Chrome. Coincidence?

laumars• 9 years ago

Not wanting to take anything away from your sentiment, which I do agree with, but the Gameboy version of Tetris wasn't the original. Far from it in fact as several NES ports of Tetris existed even before Nintendo won the licencing to it. The story of Tetris is quite fascinating if you're interested video game history: http://www.denofgeek.com/games/tetris/30840/10-remarkable-th...

arc_of_descent• 9 years ago

Really nice!

wimagguc• 9 years ago

I know it's too much to ask really, but I'd love to see the history of the individual commits. I'd be curious to see where it all started (is it all greenfield or is it built on top of a previous game concept perhaps?), and would love to learn what decisions and challenges a developer faces while working on a game like this.

That sad, this is just fantastic, thanks a lot for posting!

afarrell• 9 years ago

I agree, that would be a great read. Also, I think there is value in having standard exercises that people do just as a way of learning and then talking about their learning.

I've recently discovered https://book.mixu.net/css/ and want to test if it actually makes it easier to think about css layout in the context of an app. Maybe I'll find the time to work through this and do a writeup.

stephengillie• 9 years ago

It takes a lot of courage for a person to reveal how they learned. Learning is about making mistakes, doing things the wrong way, and then having to recover. It's too easy for others to imply superiority by asserting/proving they would/did not make the same mistakes.

Providing a blog post is completely different, as this is a narrative composed after the fact, not a historical record of lessons. Here, the author is explicitly choosing to reveal specific lessons learned, but has the dignity of concealing the learning mistakes by which they're particularly embarrassed. They can humblebrag about the hardships of writing something cool, like a JSON deserializer - nobody need know their embarrassing hardships, such as the 3 days they spent debugging, only to find they had a hardcode hiding in the variable init section.

efdee• 9 years ago

I really enjoyed playing this clone. Well done!

That being said, I took a look at the code and the way Redux is being used feels kind of weird to me - pretty much a separate reducer for every kind of action.

thomasfl• 9 years ago

Agree. Besides that most reducers only merges in variables from an action to the global state. I guess this could be done much simpler.

Example: https://github.com/chvin/react-tetris/blob/master/src/reduce...

kolme• 9 years ago

The game looks great, but the code is overly over engineered. I've written a bunch of tetris clones in my time and it never felt this complex.

elldoubleyew• 9 years ago

I think primary focus of this project was to showcase proper Redux implementation. There certainly are much easier ways to accomplish Tetris but that is not what they were shooting for.

daxfohl• 9 years ago

Would be fun to see the QR code contain game state too, so you could port it directly to your phone mid-game.

haylem• 9 years ago

Very nice clone.

stiGGG• 9 years ago

I also implemented Tetris not long ago in Swift3. Maybe someone is interested. It has 3 frontends, iOS, macOS and CLI using the same game logic. https://github.com/Stitch7/Tetromino

user59944612• 9 years ago

Good game.

Tip: Fork the repository and use that as your official side project when you look for a job.

always_good2• 9 years ago

How would a fork help you? Are you saying build off of it?

user59944612• 9 years ago

No need. It's good enough.

I'm saying fork to put all of that under a github.com/yourname account with all contributions edited to be from yourname@gmail.com

rplnt• 9 years ago

How long before github takes it down? Not trying to make fun of Github's record of "censorship", just that the Tetris Company is known to be active in protecting the game. Even mechanics, which is weird, but they are pretty successful.

0xcde4c3db• 9 years ago

Even mechanics, which is weird, but they are pretty successful.

I haven't been able to find a free source for the actual ruling, but apparently a district court ruled in 2012 that the particular playfield dimensions, set of tetromino shapes, set of movement actions, and scoring rules are copyright-protected expressions of more general/abstract rules, and only the latter are ineligible for copyright [1]. To my untrained eye, this seems to parallel Oracle's "structure, sequence, and organization" argument for API copyright.

[1] http://www.wired.co.uk/article/tetris-clone-ruling

zerocrates• 9 years ago

I haven't been able to find a free source for the actual ruling

The case is Tetris Holding v. Xio Interactive, 863 F.Supp.2d 394 (D.N.J. 2012).

The text of the ruling is available a few places, for example on Google Scholar:

https://scholar.google.com/scholar_case?case=180648822600252...

Keep in mind though that it's a district court ruling and has pretty limited value in predicting other outcomes.

watwut3• 9 years ago

Well done! I expected another boring clone, but this thing was really fun to play. Good work.

React Tetris

Related Stories