I made a Spot-it Clone

tl;dr: I made a Spot it game clone. Go give it a try

Spot-It-Game-by-Blue-OrangeOur family purchased the original Spot it game a while back and after playing it for a while I started trying to figure out how it worked.  I was fascinated by how there could only be one match no matter what two cards you looked at.

From their website: “There is always one, and only one, matching symbol between any two cards!” Wait, out of 55 cards if you grab any two cards there is only one match between them? How is that possible?

Matching example

Finding out how it works

I went to the internet to find out how it worked. I found several discussions about it that were all above my mental capacities for math. Then I bumped into an article called Spot-it – How’d They Do That by RadiganEngineering that had examples of what the cards would be for different item counts. Well, if I didn’t have to figure things out, I could do something with that.

Making my own version

I thought it would be really cool to make my own Spot It game with my own pictures. So I started digging into making a web version that could accept input and generate the game for me to be printed out. After way too many hours of playing with the code and neglecting my family, I was able to create a Spot it game clone. It allows you to provide your own images or words and cards will be “randomly” generated. I used the structure from RadiganEngineering but randomize the card order and randomize the order of the items within each card.

first-print
The first print on 3×5 cards

Naturally I had to keep adding functionality, demo content, saving the data locally, pass content in via the URL, load demos via URL, drag and drop images, etc. The basic card generation and game I had done in a day, all the other stuff took too many weekends.

I hope this is of benefit to others. I found this blog post about creating a Spot It game with family pictures. It looks like it took a LOT of work to make that happen. Hopefully my site allows similar creations in a fraction of the time.

Second print on 3x5 cards, with 6 items per card
Second print on 3×5 cards, with 6 items per card. I have since fixed the cropped text at the bottom.

Technical details

I don’t pretend to think this is perfect. It was hacked together pretty quickly despite it taking so long. I debated between using newer technologies (SASS, ES6, etc) to help myself improve in those areas, but for now I decided to leave it as basic JavaScript so that it is easier for others to understand. Some day I may make it fancier. So for all my techy friends, don’t mock my lack of using the latest and greatest, it was for the greater good 🙂 Some day it will bother me enough to update everything, but for now it is what it is.

It is entirely done client-side via JavaScript. Nothing is sent to the server.  Most of it is custom written, but I did find an amazing drag and drop library called Dropzone that helped out a lot with some cross browser issues.

If you have any feedback, questions, etc you can find me on twitter, post a comment below, or give feedback on the GitHub project.

6 thoughts on “I made a Spot-it Clone”

  1. Hey Aaron! Just came across your Spot It card generator and am enjoying it. My family loves to play it and it is nice to make the cards with whatever we feel is pertinent at the time. Thanks for the work. I know this post is a little bit older and I hope someday you get around to make some more edits. Can I make some feature requests? Any possibility of having random picture orientation and size as well as round cards that are the size of the original game? Maybe card boundary lines so I know where to cut too? If not, no worries. I do appreciate the work you have done already. Thanks again and take care.

    1. Brandon, thanks for the feedback.

      Today I published some updates as a result of this comment and a blog post elsewhere that references this. The short version, is the site does everything mentioned above, except the varying size of things. The simple images they use in the original game are easy to identify at varying sizes. Photos that are usually the same shape and have complex visuals, I don’t think work as well smaller. I try to keep them as large as possible.

      I added options for larger text (which also changes it to comic sans, which I also hate, but makes sense in this case like you said), random colors, an random rotation of the words (or pictures), and an option to layout in a circle that is the same size as the original game.

      Thanks again for the good ideas 🙂

    1. I don’t know that it would work well for that, because it randomly chooses things to go on each card. There is no guarantee that at a term and definition would be on the same card, and matching the term on one card to the definition on another card doesn’t follow the intent of the game of having the same item.

      But the generator is there for you to do what you want with, you can always give it a try 🙂

      1. Hi Aaron. First off, you are amazing and talented and I wish I could do what you do, because the Spot It clone is awesome. A huge THANK YOU is in order for all that work, so THANK YOU!

        My “wish” for it is that I could load terms and definitions both (or, even better, words and pictures — I’m in Deaf ed) so that I could use it in my classroom as a review game, sort of like you can with the Basic English and Basic Spanish versions of Spot It.

  2. Aaron,

    Thank you for making this game! Trying to think of ways that I can use this with my high school math class.

    A couple things. In your directions, you might want to put how you can print the cards. I just went in the panel with the cards and right clicked –> print. However, when I did this, it didn’t show any of the grid lines to print out on any of the formats except for circle (perhaps I am printing it wrong?)

    Also, is there a way to change the font? I thought this would also be great for little ones learning their letters/numbers, but the 5 and S look so much alike with the font.

    Lastly, a suggestion might be to have the option to have color, but to keep the color consistent to each object (for instance, a K on one card is red, and on the other card is red instead of blue)

    Thanks again for making this. It’s fantastic!

Leave a Reply

Your email address will not be published. Required fields are marked *