See the Pen Game of SET by Jacob Belanger (@jacob_124) on CodePen.
I was bored out of my mind, not knowing what to do, and then it hit me! (not literally) The game of SET is not very known but remains one of my all-time favorite card games. It’s one of visual perception and trains your brain to see things differently! It can be played with any number of players that fit around a table. The game consists of a deck of 81 cards, all unique. Each card had a combination of shapes ( diamond, ellipse, squiggle ), colors ( red, green, purple ), filling ( empty, full, striped ), and number of shapes ( one, two, three ). And that was the challenge. How do I display the cards efficiently? I thought about making them all one by one in Illustrator, but I came here to code, not spend my day drawing shapes. My next and most plausible option was SVG. I could use CSS classes for the colors, SVG paths for the shapes, simple loops for the numbers, and SVG pattern as the filling! I create the basic shape outlines in illustrator and exported them as SVG paths. JQuery is a pain to work with SVG, but I got around it by building some custom functions. A bit of fiddling later and I had some pretty decent playing cards!
The game logic was probably the easiest part of the program. Selected cards were kept in an array and once the array consisted of three cards, they were checked to see if the were a set. Hints were pretty easy as well. All solutions are found at the beginning of the round, with nested loops of course, and then one random set is selected and saved to a variable, ready to be delivered to the player card by card as needed.
The log is a pretty nifty feature as well. All elements are created in javascript and then simply appended to the log after the initial “set match” check. At the end, I had a lot of fun styling everything and adding subtle animations.
Future updates may include: A decent winning scene, better mobile accessibility, etc...
Back to main page