[🔬 experiment ] A React based version of the memory card game, flip the cards over and match the pairs with the fewer attempts as possible!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
src
style
test
.babelrc
.gitignore
README.md
index.html
package-lock.json
package.json
webpack.config.js

README.md

🃏 React memory card game

This is just an [🔬 experiment].

Description:

A React based version of the memory card game, flip the cards over and match the pairs with the fewer attempts as possible! try it live

You have 10 couples of cards in different colors, you will see all them for a second and then they will be covered. You have to find the matches unveiling the cards with the same colors by recalling your memory.

How are the colors generated? 🎨

The color of each couple is equally spaced in the HUE space (every couple of cards has a maximum difference from the closest color of 360 / numberOfCouples degree in the HUE space).

The more couples you play with (the number of couples is a configurable field), the more the difference between colors became tiny and the more the game become difficult.

//old
generateColor( coupleIndex ){

    let step = 360 / this.props.couples;
    let hue = step * coupleIndex;
    return `hsl(${hue}, 70%, 50%)`;

}

update: to add a more differentiation in the colors generated yet keeping them equally spaced in the HUE space, I have added a colorSalt random number to shift them all and make the colors slightly different in any new game.

//latest
generateColor( coupleIndex  ){

    let step = 360 / this.props.couples;
    let h = (step * coupleIndex + this.state.colorSalt) % 360;
    return `hsl(${h}, 70%, 50%)`;

}

Tech stuff 👾:

  • React ⚛️
  • Lodash
  • Bootstrap
  • SASS
  • CSS
  • Babel
  • Webpack
  • NPM 📦
  • Mocha
  • Chai