# Spot the difference game design help

I'm thinking of making a spot the difference game. But immediately I stumbled over a problem. I'm thinking of storing a "difference area" in the form of a x,y coordinate. However, because on a smartphone it will be difficult selecting the exact pixel at that location, I need a way of checking if the "area" is within the "touch area". I hope that makes sense. I've attached an image to help you understand In this example the "difference point" is located at -180,-140. A user could touch anything within 5 pixels of that and that will be marked as a correct answer. So touching -177, -147 would also be correct. How can I check if the touch-coordinates are within a 5 pixels radius of the correct "difference point"?

• Do you have a planned technology in mind? A number of frameworks have this kind of thing built in. – Tristan Warner-Smith Aug 30 '11 at 9:36

What you need is to know the geometric distance between the user's touch (T) and your "difference point" (D).

distance = squareroot((T.x - D.x)² + (T.y - D.y)²)


Then as another answer said, just check if the distance is less than the circle's radius, 5 pixels in your example.

• could you expand on this and give examples please. – dotty Aug 30 '11 at 8:06
• @dotty: The example is right there in the answer. Then just check if distance is smaller or equal to your min-distance (5) and you know if the touch was within that area. Btw. You could skip the squareroot operation here, you would have to use min-distance^2 on the other hand though. – bummzack Aug 30 '11 at 8:31
• @dotty for more information on how to calculate the distance between two points, and how OP came up with that formula, you can read Wiki - Pythagorean Theorem – TomTsagk Jan 22 '19 at 15:11

If you have a list of points, you're most likely doing it wrong: I'll try to explain why and how to do it correctly instead.

Once the user finds a difference, you'll have to make the difference disappear from the second image: the most straightforward way of doing that is to have one "base" image, which is the first one, and many small images which are the differences, applied to the second image at given coordinates. When the user finds the difference, you just fade out that image.

Keeping two separate images occupies much more space, and makes removing the difference after they are found a very fragile operation that will likely result in slightly garbled graphics.

To do it you usually start from two images which must have been produced with lossless formats, and use a tool you created yourself to automatically create all the differences and provide you the coordinates — then you will include in your code only the first image and the differences.

This might seem complicated, but it's actually simpler (and much more elegant and efficient) than writing code which have to handle images in a messy format.

If your 'click' event gives you a 2D point on the screen:

• A 2D point is inside a circle if its distance from the center of the circle is less than the circle's radius.

And if it gives you a 'hit circle', then:

• Two circles intersect if the distance between their centers is less than the sum of their radii.