Hacker News new | comments | show | ask | jobs | submit login
Show HN: A Tetris clone written in ES6 using React (joshbassett.info)
76 points by nullobject 10 months ago | hide | past | web | favorite | 26 comments

also... https://shaunlebron.github.io/t3tr0s-slides/#0 using clojurescript in place of ES6

The slides are amazing just by themselves.

Wow, the slides are amazingly beautiful and neat!

Maybe the slides should have been a Show HN.

There's a link to the code from the help and game over screens, but here it is for anyone who missed it: https://github.com/nullobject/tetris

Thanks for posting the code! :)

May i suggest adding settings for DAS and ARR. It's quite hard to play fast without.

simon.lc/tetr.js is currently my favorite web based version and i think a good standsrd

To satisfy my ignorance I had look those up, and:


“[…] but in general, ARR is auto repeat rate (how quickly the pieces move from right to left.) And DAS is delayed auto shift (How long you have to hold down the button to before a piece starts flying to the wall). Changing them can change how "slippery" your pieces feel and can also enable you to play a lot faster. […]”

Ah one small bug(?) I noticed was t-spins arent recognized if they're hard dropped after you spin them in. But I think this is a great showcase for reactive and it's impressive all the spins work correctly!

Thanks, I'll create an issue for it.

Here's a vid of what's possible with proper settings: https://www.youtube.com/watch?v=xUIpb-IFTZE

OMG, that video is nuts. I'm assuming that is being controlled by a human in real-time?

That's correct. With DAS tuning it's much less frustrating to play at the speed at which you can think. Here's one of the top online players of puyo puyo tetris, for reference.


Yep it's a human - there's a good number of people who can reach that speed but it takes years of practice. I believe a lot of the community started young on various platforms so some people have been playing 10+ years

Sure. I'll have to read up on how that stuff works, but I'm keen to make my version as playable as possible.

Good work, however a little feedback...

This works fine at lower rates but once you hit anything greater than 120 or so there's a noticeable lag between hitting the key to rotate and the shape actually rotating - enough that the shape will often have moved a couple of spaces by the time it rotates which makes it very difficult to play.

Not sure if that's inherent to the framework or just how this particular version is programmed.

I have wanted to try creating a game with ES6 and React for a while but been too busy recently. Thanks for this, it's great to see your attempt, I think it plays and looks great. Any unexpected challenges or issues experienced when using React for this? (I am experienced with React, just haven't used it for games, I also have experience creating games, just not with React).


It's nice that react is just a view library, so you are free to choose the rest of your stack to best suit your app (i.e. a game).

The only thing I would point out is that you should use immutable data structures, so that you don't re-render parts of your view unnecessarily. There are ways to handle this without immutable data structures (i.e. componentShouldUpdate), but it's more of a pain IMHO.

Back button doesn't work on the "How to play" page and there's no obvious way to close it (there should at least be a close button in the top right corner). I thought the "Resume" button would open your resumé so I didn't think of clicking on it at first.

I removed that button, you can now click anywhere on the modal to dismiss it.

fyi: http://timothypratley.blogspot.com/2015/07/you-should-be-usi... using clojurescript in place of ES6

No mobile support? :(

You can check out http://www.goodoldtetris.com/

Not yet, sorry. Maybe someone will send me a PR ;)

I think it is a bit complicated to add code so someone's resume showcase. How would you avoid taking credit for what others did?

I have a credits section on the help screen. I'd be happy to add anybody in there who contributes a patch.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact