6 ms·

React Tetris

210 points by alifaziz 10y ago

daliwali 10y 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 10y ago
  Did you feel better after posting that? I think it's a very cool project.
  - omegote 10y 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).
    - kristopolous 10y ago
      Not only, but it achieved this 20 years ago, on computers of 20 years ago, and on internet connections of 20 years ago. We've seemed to replace the merits of direct functional efficiency with a novelty of complexity.
      - watwut 10y ago
        Unfortunately, flash became uncool and it seems that tech community lately value "cool" over, well, anything else lately.
    - lewisl9029 10y ago
      > 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). You're taking his depiction of Flash out of context. https://github.com/chvin/react-tetris/blob/master/README-EN.md#3-web-audio-api https://github.com/chvin/react-tetris/blob/master/README-EN.... He was clearly only comparing the different solutions in terms of audio capabilities. I can appreciate how much of a gigantic leap in capabilities Web Audio API offers compared to HTML5 audio alone, so I can vouch for that part of his depiction. I haven't ever worked with Flash audio, nor Flash itself in general though, so you may still be right about him being unfair and shortsighted in making that comparison in the context of audio capabilities, but I think it's still an important distinction to make if that was in fact your critique.
      - omegote 10y ago
        I know he was talking about the audio, but my critique works both about flash in general and about audio support in particular. ELEVEN YEARS ago Flash was already capable of both playing and recording audio from multiple sources, using several different codecs and offering the usual bells and whistles you're expected to find in any multimedia framework (vis.eq., channels, etc). And everything working exactly the same way in every browser equipped with a flash player. And I'm taking eleven years ago because that's when AS3 was released. Flash had considerable audio support before that anyway.
    - watwut 10y ago
      Yup, react part makes it noteworthy, worth bookmarking and learning from. Also that this implementation is actually fun to play, most of them are not. This is how people and communities learn. They do small projects to see what is achievable. There is nothing shameful about it. About the parent poster: he is just an adult equivalent of a kid that came into the room, scrapped other kids drawings and told them they are all suckers. Otherwise said, just someone having emotional meltdown and taking it on the random people around. No reason to take him seriously.
      - daliwali 10y ago
        If this were a student project or an intellectual exercise to implement Tetris in an obscure language, good on them. I can respect that. However it is undeniable that there are overkill levels of abstractions in play here, for the purpose of using what is currently the most commercially viable web framework. This is like taking FizzBuzz Enterprise Edition seriously for being written in Java. >just someone having emotional meltdown and taking it on the random people around I won't stoop down to your level of using personal attacks. You don't know me.
  - daliwali 10y ago
    >I think it's a very cool project. What the fuck is wrong with developers? Nobody cares what programming language, libraries, or architecture a simple Tetris game is made with. All that matters is the experience of the user, not the developer. Show this to any non-delusional person, it would not seem technically impressive at all.
    - joshwcomeau 10y ago
      Hackernews is not ProductHunt. People show off things they've built here to be admired by other craftsmen/craftswomen, not to market to a general audience. Your attitude is toxic, although I'm thankful you phrased it in such a juvenile way. Nobody will take you seriously when you talk like that.
    - fermuch 10y ago
      The audience of hacker news can understand and appreciate the work behind this tetris clone. Yes, it's a clone and there're millions, but this one is very well made and can work very much as an example of the technology being showcased this time (react)
    - kristopolous 10y ago
      Although I agree, this is not the place to have that soundoff. Write an article about how people fetishize complicated solutions to simple problems and how it creates a dysfunctional complexity and egocentric culture without focusing on the merits of appropriate solutions to appropriate problems. It'd be a good read. But not in the comment section here since this was clearly a hobbyist project and not as an attack. The merits of the claim are lost in the hostility of the execution.
    - afarrell 10y ago
      "Nobody cares about what type of stitching, what the source of the fabric, or what artistic inspirations a garment has. All that matters is the comfort and aesthetics of the wearer." Every hobby, craft, and profession has people making things that aren't for the end market user, but are for the education of the maker/practitioner. If you're not interested in it, thats fine. If you want to critique the user experience as a way of constructively learning/teaching about user experience, thats great. If you just want to come here and fart on people for not always being 100% focused on the market... why?
- codegeek 10y 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 10y ago
Clever, but I swear the pieces rotate the wrong way compared to Tetris on the gameboy.
- Arnavion 10y ago
  I'm sure they rotate the wrong way compared to the MS Entertainment Pack version atleast.
- glomph 10y ago
  Very frustrating!
- Matthias247 10y 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.
- deleted 10y ago
  [deleted]
- abrowne 10y 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 10y ago
This is a nice Tetris implementation even ignoring the technology used. The shake effect when you drop a piece is particularly satisfying!
lukaszjb 10y ago
I must say it looks really good.
elpocko 10y ago
The screen is scrolling around when pressing the cursor keys in a small window.
danjc 10y 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 10y 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-things-about-tetris http://www.denofgeek.com/games/tetris/30840/10-remarkable-th...
deleted 10y ago
[deleted]
arc_of_descent 10y ago
Really nice!
wimagguc 10y 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 10y 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/ 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 10y 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 10y 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 10y 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/reducers/pause/index.js https://github.com/chvin/react-tetris/blob/master/src/reduce...
- kolme 10y 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 10y 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.
    - babbeloski 10y ago
      Only connecting the root component, fetching the entire state, and passing down all those props manually isn't proper. You shouldn't pass props that can be grabbed directly from the store IMO.
daxfohl 10y 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 10y ago
Very nice clone.
stiGGG 10y 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 https://github.com/Stitch7/Tetromino
user5994461 10y ago
Good game. Tip: Fork the repository and use that as your official side project when you look for a job.
- always_good 10y ago
  How would a fork help you? Are you saying build off of it?
  - user5994461 10y 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
    - andreashansen 10y ago
      Obvious troll.
    - always_good 10y ago
      Oh, right. Also, lie on your resume. Thanks for the life hacks.
rplnt 10y 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 10y 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 http://www.wired.co.uk/article/tetris-clone-ruling
  - zerocrates 10y 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=18064882260025243346 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.
watwut 10y ago
Well done! I expected another boring clone, but this thing was really fun to play. Good work.

210 points by alifaziz 10y 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 10y ago
Did you feel better after posting that? I think it's a very cool project.
- omegote 10y 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).
  - kristopolous 10y ago
    Not only, but it achieved this 20 years ago, on computers of 20 years ago, and on internet connections of 20 years ago. We've seemed to replace the merits of direct functional efficiency with a novelty of complexity.
    - watwut 10y ago
      Unfortunately, flash became uncool and it seems that tech community lately value "cool" over, well, anything else lately.
  - lewisl9029 10y ago
    > 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). You're taking his depiction of Flash out of context. https://github.com/chvin/react-tetris/blob/master/README-EN.md#3-web-audio-api https://github.com/chvin/react-tetris/blob/master/README-EN.... He was clearly only comparing the different solutions in terms of audio capabilities. I can appreciate how much of a gigantic leap in capabilities Web Audio API offers compared to HTML5 audio alone, so I can vouch for that part of his depiction. I haven't ever worked with Flash audio, nor Flash itself in general though, so you may still be right about him being unfair and shortsighted in making that comparison in the context of audio capabilities, but I think it's still an important distinction to make if that was in fact your critique.
    - omegote 10y ago
      I know he was talking about the audio, but my critique works both about flash in general and about audio support in particular. ELEVEN YEARS ago Flash was already capable of both playing and recording audio from multiple sources, using several different codecs and offering the usual bells and whistles you're expected to find in any multimedia framework (vis.eq., channels, etc). And everything working exactly the same way in every browser equipped with a flash player. And I'm taking eleven years ago because that's when AS3 was released. Flash had considerable audio support before that anyway.
  - watwut 10y ago
    Yup, react part makes it noteworthy, worth bookmarking and learning from. Also that this implementation is actually fun to play, most of them are not. This is how people and communities learn. They do small projects to see what is achievable. There is nothing shameful about it. About the parent poster: he is just an adult equivalent of a kid that came into the room, scrapped other kids drawings and told them they are all suckers. Otherwise said, just someone having emotional meltdown and taking it on the random people around. No reason to take him seriously.
    - daliwali 10y ago
      If this were a student project or an intellectual exercise to implement Tetris in an obscure language, good on them. I can respect that. However it is undeniable that there are overkill levels of abstractions in play here, for the purpose of using what is currently the most commercially viable web framework. This is like taking FizzBuzz Enterprise Edition seriously for being written in Java. >just someone having emotional meltdown and taking it on the random people around I won't stoop down to your level of using personal attacks. You don't know me.
- daliwali 10y ago
  >I think it's a very cool project. What the fuck is wrong with developers? Nobody cares what programming language, libraries, or architecture a simple Tetris game is made with. All that matters is the experience of the user, not the developer. Show this to any non-delusional person, it would not seem technically impressive at all.
  - joshwcomeau 10y ago
    Hackernews is not ProductHunt. People show off things they've built here to be admired by other craftsmen/craftswomen, not to market to a general audience. Your attitude is toxic, although I'm thankful you phrased it in such a juvenile way. Nobody will take you seriously when you talk like that.
  - fermuch 10y ago
    The audience of hacker news can understand and appreciate the work behind this tetris clone. Yes, it's a clone and there're millions, but this one is very well made and can work very much as an example of the technology being showcased this time (react)
  - kristopolous 10y ago
    Although I agree, this is not the place to have that soundoff. Write an article about how people fetishize complicated solutions to simple problems and how it creates a dysfunctional complexity and egocentric culture without focusing on the merits of appropriate solutions to appropriate problems. It'd be a good read. But not in the comment section here since this was clearly a hobbyist project and not as an attack. The merits of the claim are lost in the hostility of the execution.
  - afarrell 10y ago
    "Nobody cares about what type of stitching, what the source of the fabric, or what artistic inspirations a garment has. All that matters is the comfort and aesthetics of the wearer." Every hobby, craft, and profession has people making things that aren't for the end market user, but are for the education of the maker/practitioner. If you're not interested in it, thats fine. If you want to critique the user experience as a way of constructively learning/teaching about user experience, thats great. If you just want to come here and fart on people for not always being 100% focused on the market... why?
codegeek 10y 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 10y ago

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

Arnavion 10y ago
I'm sure they rotate the wrong way compared to the MS Entertainment Pack version atleast.
glomph 10y ago
Very frustrating!
Matthias247 10y 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.
deleted 10y ago
[deleted]
abrowne 10y 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 10y ago

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

lukaszjb 10y ago

I must say it looks really good.

elpocko 10y ago

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

danjc 10y 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 10y 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-things-about-tetris http://www.denofgeek.com/games/tetris/30840/10-remarkable-th...

deleted 10y ago

[deleted]

arc_of_descent 10y ago

Really nice!

wimagguc 10y 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 10y 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/ 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 10y 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 10y 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 10y 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/reducers/pause/index.js https://github.com/chvin/react-tetris/blob/master/src/reduce...
kolme 10y 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 10y 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.
  - babbeloski 10y ago
    Only connecting the root component, fetching the entire state, and passing down all those props manually isn't proper. You shouldn't pass props that can be grabbed directly from the store IMO.

daxfohl 10y 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 10y ago

Very nice clone.

stiGGG 10y 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 https://github.com/Stitch7/Tetromino

user5994461 10y ago

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

always_good 10y ago
How would a fork help you? Are you saying build off of it?
- user5994461 10y 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
  - andreashansen 10y ago
    Obvious troll.
  - always_good 10y ago
    Oh, right. Also, lie on your resume. Thanks for the life hacks.

rplnt 10y 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 10y 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 http://www.wired.co.uk/article/tetris-clone-ruling
- zerocrates 10y 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=18064882260025243346 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.

watwut 10y ago

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