7 ms·

Flip – A ReactJS Game

• colinramsay 12y 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.html http://facebook.github.io/react/docs/class-name-manipulation...
  • baddox 12y ago
    It certainly would. I wish React would improve the syntax by allowing the className prop to directly take an object.
    • peterhunt 12y ago
      Hehe, believe it or not pre-open source react supported this. We thought it was too magical but it was crazy convenient.
      • baddox 12y ago
        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.
  • henleyedition 12y ago
    Haha, awesome. As I was writing it I was like, well this is stupid. Thanks for the link!
• scscsc 12y 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.
• tech-no-logical 12y 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.
  • henleyedition 12y 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....
• djrconcepts 12y ago
  The game is fun to play, but I recommend using vector .svg graphics for when the board is zoomed in.
  • henleyedition 12y 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-text-with-css-scale-translate3d 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!
• matthewrhoden1 12y ago
  Add more levels so I can play it longer :)
• tomw1808 12y 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 12y 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 12y ago
  Reminds me of SHIFT2 game.
• scotty79 12y ago
  Touch on iPad Safari double clicks.