Play in Browser: https://hiddenwaffle.github.io/matching/
The Super Mario Bros 3 card matching game, ported to ReactJS
- Graphics - https://www.spriters-resource.com/nes/supermariobros3/sheet/105023/
- Background color scheme - https://davidmathlogic.com/colorblind/
- Color lightener/darkener - https://pinetools.com/c-colors/
- Card Layouts - https://www.mariowiki.com/N-Mark_Spade_Panel
- Sound Effects - https://themushroomkingdom.net/media/smb3/wav
- Font - https://www.dafont.com/super-mario-bros-3.font by david-fens.d5063, converted to WOFF2 by https://transfonter.org/
- Modifying elements of an array during
setTimeout()can be tricky because user actions could have modified elements of the same array in a differentsetTimeout()call.- Workaround: Move the element accesses to a
useEffect()and have thesetTimeout()modify a (potentially arbitrary) value that theuseEffect()is watching.
- Workaround: Move the element accesses to a
- Mobile CSS is chaotic and unpredictable
rm -rf docs
npm run build
mv dist docs
I needed to refresh my memory after having not used it for several years. It would have been better to use Canvas for an app like this.