Flip – A ReactJS Game

http://henleyedition.com/flip-a-reactjs-game/

by xngzng • 12 years ago

102 15 12 years ago

henleyedition.com

colinramsay• 12 years ago

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

baddox2• 12 years ago

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

peterhunt• 12 years ago

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

henleyedition3• 12 years ago

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

scscsc• 12 years ago

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.

djrconcepts• 12 years ago

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

henleyedition3• 12 years ago

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!

tech-no-logical• 12 years ago

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.

henleyedition3• 12 years ago

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

matthewrhoden1• 12 years ago

Add more levels so I can play it longer :)

tomw1808• 12 years ago

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.

taude• 12 years ago

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

maouida• 12 years ago

Reminds me of SHIFT2 game.

scotty79• 12 years ago

Touch on iPad Safari double clicks.

Flip – A ReactJS Game

Related Stories