Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

[πŸ”¬ experiment ] A React based version of the memory card game, flip the cards over and match the pairs with the fewer attempts as possible!

Resources

Releases

No releases published

Packages

No packages published