How can I make the Blue pointer knows that there is a circle on the right when I want to move to the right or knows when there is no circle downwards on the current circle where the Blue pointer is currently pointing?
If you don’t want to manage it yourself then consider adding all “circle” UI images to a single List and then just iterate through whole list and check ~like that:
Image nextImage = null;
Vector3 currImgPos = currImg.transform.position;
//for going right:
foreach (Image img in mylist)
{
Vector3 iteratedImgPos = img.transform.position;
if (iteratedImgPos.y == currImgPos.y) //or allow some variation +/-
{
if (iteratedImgPos.x > currImgPos.x) //check if there is any circle on the right
{
if (nextImage == null || iteratedImgPos.x < nextImage.transform.position.x) // check if any circle was already found to the right, if was check if that circle is closer
nextImage = img; //if not closer then next circle should be this one
}
}
}
if (nextImage != null) //if there is next circle to the right
{
//do whatever you like
}
else //if not
{
//do something else
}
//where currImg is your "current circle" and mylist is a collection of all available "circles"
Do pretty much the same for left, but instead you should check if next X position is lower.
Same will do for Up/Down but instead you should check for equal X and higher/lower Y.
Though it will be better for performance to manage it yourself, for example it can be X:Y Map like multidimensional Array:
bool[,] moveArray = new bool[10, 10];
Where True value represent a circle and false nothing, then if you want to move right you just check like this:
if (moveArray[currXvalue + 1, currYvalue])
{
//i can move
}
else
{
//i can't move
}
Else it can be managed with Tags which you can manually add to images, and so on.