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

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.

Here's a game I developed, which is the source for these advices --> http://bit.ly/rrhoodd

-
-1. Checking if a point is within a rectangle is actually more complicated than if it is within a given radius... and the given answers are not complicated at all. The term "difference" actually came from the OP. He specifies the point where the difference in the image is located using that term.. – bummzack Aug 30 '11 at 8:48
@bummzack: wrong. Your difference already is a rectangle, because it is an image, so using a radius is just wrong, because it doesn't overlap well with the actual difference. – o0'. Aug 30 '11 at 8:51
No, there's one big image which contains several differences. And these are all defined by point coordinates. And since it's very hard to hit that exact point with a touch, the OP wanted to know a way to check if the touch was within a given distance from that point... using radius is the better and more natural choice for that. – bummzack Aug 30 '11 at 8:55
So, he's doing it the wrong way in the first place, and he's looking for a broken system to patch it up. Mh. – o0'. Aug 30 '11 at 12:43
Because the most straightforward way to create a difference game is to have a base image and to have a lot of small images representing the differences. Using instead one big image for all the differences presents all kind of problems and negligible advantages. – o0'. Aug 30 '11 at 14:10

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.
-