Flip – A ReactJS Game | Hacker News Reader

Flip – A ReactJS Game

henleyedition.com

102 pointsxngzng15 comments

I hate you for posting this. I kept playing it while I should have done something else :)

Great idea, great concept! Keep on! You got your first addict.

Agreed. I originally was looking for the ReactJS implementation, but find the game mechanic intriguing. Reminds me a little of the 3d Fez game.

This is cool!

Around line 327, would it be better to use classSet rather than string concatenation?

http://facebook.github.io/react/docs/class-name-manipulation...

It certainly would. I wish React would improve the syntax by allowing the className prop to directly take an object.

Hehe, believe it or not pre-open source react supported this. We thought it was too magical but it was crazy convenient.

I'm generally a fan of explicitness, but it's just such a ubiquitous pattern that I think the convenience would make it worth it.

Haha, awesome. As I was writing it I was like, well this is stupid. Thanks for the link!

playing this without really thinking it through, so my remarks may be off.

the mechanics are unusual in the sense that they're deceptively simple but cunningly difficult at the same time... challenging.

becoming stuck (in level 3, e.g. when reaching the spaceship without the key) is annoying. could be that you intended this, but for a casual game it would feel better if that couldn't happen.

related : having to grab the mouse to click the 'replay' button is annoying too. maybe just use a key ? same goes for the 'next' / 'prev' button. when the spaceship flies away it triggers an annoying (growing) scrollbar at the bottom of the page. some overflow: hidden missing somewhere ?

overall I like the concept. someone else already suggested making the board larger, which I completely agree with.

Hey thanks for the feedback! I hotfixed the issue with level 3 and added keys for next/prev/restart (period, comma, and 'r', respectively).

The overflow thing I'll have to fiddle with. I am with you on the board size, and I'm going to try to find a better way to do it than the zoom.js plugin. Tile sizes currently are hard coded into the css AND the JavaScript because I'm stupid, so I'll have to figure out a way to make them fluid-width. Hmm....

I like the concept, but the graphics is a bit off. First of all, I would suggest making the board as big as possible and lose the shades of grey.

The game is fun to play, but I recommend using vector .svg graphics for when the board is zoomed in.

Hey, game author here! All the sprites are from an svg icon font and the rest is all just divs. My understanding is that the blurring has to do with how certain browsers handle 3d transforms by converting vector graphics into textures:

http://stackoverflow.com/questions/8024061/webkit-blurry-tex...

CSS transforms are awesome, but when you're doing crazy things with them things can get pretty buggy. Thanks for playing!

Add more levels so I can play it longer :)

Touch on iPad Safari double clicks.

Reminds me of SHIFT2 game.

Reply on news.ycombinator.com