Categories
General HTML, CSS and Javascript

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.

32 replies on “I made a Spot-it Clone”

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.

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 🙂

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 🙂

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.

Ok, I get the desire for it now. The word “bird” on one card and a picture of a bird on another. I’m thinking that would be pretty complicated to figure out. Since there are more than 2 matches in a set for a given thing (I think there is anyway) sometimes you would get two words and sometimes two images. Or two terms and two definitions. I guess that isn’t the end of the world. If I ever devote more time to this I’ll have to see what I can do. But that is a big one so not sure how it would work out, but at least I understand the desire better now 🙂

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!

Spot it does sell alphabet and numbers versions, if you want to save yourself the trouble. I got them on sale at our local grocery store for like $5 each.

I love this!
I’m trying to make a game for my school, where I teach, but it doesn’t seem to be completely working. I have 57 images, but not all appear in the game.
Can you help?
Thanks.

Hi I want to make cards with 4 pictures using numbers 1-20, writen words 0ne-twenty, ten frames 1-20 and pic images of fingers 1-20. Is this possible ? 4 pic a card and a total of 80 pic.
Thanks
Ps this sight is great I can’t wait to use the sight word cards

Hey Aaron, we’re Spot-it fans at my house. I was fascinated by there being only 1 match per pair and I’ve wondered what it would take to build in code. So I had to leave a comment. Your choose your own image version is pretty impressive! Cool stuff.

This is amazing! I was hoping someone else had figured out how to make their own Spot it Version because two days before a a wedding, I just decided upon the perfect gift for the bride and groom. And it involved a custom made Spot It! You saved the day. PS I love your sample images.

Jan 2019 – 2nd semester Spanish 1 starts tomorrow. I’ve been playing Spot It with my daughter over Christmas break. I finally decided to try to make my own version of Spot It for my Spanish class to help them learn vocabulary. Two or so hours in – I have 8 cards done and realized that I need to be a mathematician to figure out the rest of the 50+ cards I need. Almost lost hope, then a quick google search brought me here. I want to thank you for ALL your work on this and sharing it with people – particularly teachers!!! This is wonderful. I am not quite finished but I am in the process of trying to make a set for our new unit. I HOPE it will be a bit hit! Thanks, again!

This IS AMAZING!

Can you let me know what size I should have my pictures cropped to, in order that they will fit in the circles? I’m uploading pictures no problem, but they’re getting cropped in weird spots

Squares would work the best for the circles. Not sure why it would appear as random crops though, it should just be cropped to the middle. At least that is what it looks like with my demo images.

Wow, so many comments I didn’t know were here. Sorry for not responding, but the notifications must have been getting marked as spam or something.

Will respond to each above, but wanted to put a general apology so I didn’t have to repeat myself above on each one.

Aaron,
I am SO excited to create a game as a gift using friends pictures etc- is it possible to use both images and words or is it one or the other?
Thanks!!

This is fantastic. Thank you. I had the idea a few years ago to make a spot it game of fractions so my 3rd graders could practice naming fractions but it was so much work that I ended up setting it aside. I came across it on my computer and decided to finish it. This made it so fast. I love that the cards are circles. I am going to make a bunch more of these.

Hey Aaron!
Your website is freaking amazing, so thank you!
We are speech language pathologists and this kind of game is so beneficial for us in the clinic.
We did have a problem with creating the cards in circles, the pictures are getting cropped in weird spots like one of the comments above.
How can we solve this problem?
We will be really glad to hear your solution for it.
Thank you so much!

This is so amazing. Thank you for making this FREE! I’ll be using these cards a lot in my classroom.
Now, I just need to get my hands on some round tins to store the cards in!

Hi Aaron! I love that you made a spot it type generator! I can’t figure out how to make it look like how I want though. I uploaded all of my pictures no problem. But when I make circle cards, each picture gets cut off into a circle. I’m wanting to make a musical game so many of my pictures are square (with three white piano keys and two black keys). Is it not possible to have square pictures? Do I need to only upload circular pictures so nothing gets cut of that I don’t want cut off? I would really appreciate your help!

Hopefully you will get this comment! Fellow Springville-ite here (formerly, anyway) — I’m so thrilled to have found your spot it clone — thank you for doing the work! I’m wondering if it would be possible to have the format for a 3-inch circle instead of 3.5 — I found some round tins at the dollar store that are 3.75″ but it’s too tight a fit for a 3.5 inch circle. I might be able to work out the scaling and reformatting pages, but your coding does it much more quickly than I can, I’m sure! Thanks in advance for any help you can give!

Elder Barker! Sister Miller here… 😉
Wanna hear something funny? I’m trying to build a Salt Lake Spot It! game for my work but we were having trouble finding someone who could crack the game logic for us (I am not at all math-brained)—I google it and there you are with a solution! I was like, hey, I know an Aaron Barker… hey, I know THAT Aaron Barker! Fun to stumble across you like that—thanks for the game logic solution to my game logic problem!

What a great tool you’ve created! Thank you so much. I wish I found this years earlier (just found it today). If I want to print the 3×5 version, there are no borders (for each card) which would help cutting (after printing and laminating them). The circular version does have borders, but my words appear to have to many characters and are cut off. Can I do anything in the options to have a line round each card? Or is there an options to make the font smaller so I can use the long words on the circular version?

Hi Aaron,

Thank you for your work, you are the best. My kid loves Spot it, and I want to try the game with letters and words to help her learn them for kindergarten. But unfortunately something went wrong. If I choose circle print set size all the letters showed at a same spot, it is unreadable. And if I choose other print set size all the side lines gone on the printed version. It is hard to cut them to the same size cards without lines.
Can you fix these bugs?
Thanks.
Best, Hajni

Leave a Reply to Stephanie Cancel reply

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