Show HN: A Tetris clone written in ES6 using React | Hacker News Reader

Show HN: A Tetris clone written in ES6 using React

tetris.joshbassett.info

76 pointsnullobject26 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

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.

https://youtu.be/7AjbWroX4vA?t=18m57s

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

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.

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

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

https://www.reddit.com/r/Tetris/comments/13uqby/whats_das_an...

“[…] 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. […]”

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).

Thanks!

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? :(

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.

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

Reply on news.ycombinator.com