Spot the difference game design help

Question

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"?

Answer 1

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.

Answer 2

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.

Answer 3

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.