Checking position of a circle wih Java Script

Question

I'm trying to make a game in which you have to guess the place where a picture is taken. By dragging a red circle, as can be seen in the picture I added, in the correct position onto the map. The yellow dot is the respective position. The yellow dot is not visible until you check if you've placed the red circle in the correct position.

The idea is pretty nice, however making the code seems a bit hard for me. I'm trying to make everything work with Java Script. The problem I'm facing with, is that I don't know how to write a Java Script code, that checks if the red circle is over the yellow dot or touches it.

So my question is: Is there somebody out there who knows a code that helps me to solve this problem?

Quiz page

Does this answer your question? [How to measure distance between two circles, and then check for collision?](https://stackoverflow.com/questions/15702196/how-to-measure-distance-between-two-circles-and-then-check-for-collision) — Reyno, Feb 09 '21 at 08:31
I think it answer your question https://stackoverflow.com/questions/57665335/fill-in-overlapping-circle-area, you need to determine overlapping of two circle. — Navand, Feb 09 '21 at 08:34

score 0 · Answer 1 · answered Feb 09 '21 at 08:32

Well the idea is to have co-ordinates of HTML elements in your target area. Then you can apply little math that to find overlapped elements checking each each element position.

Here is the thing could help you.

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Ismail Durmaz · Answer 2 · 2021-02-09T13:23:24.143

I have a demo for your question. It might be to help you. I have used D3 library for operations. This is the working demo

<!-- D3 -->
<script src="https://d3js.org/d3.v3.js"></script>

<svg width="887" height="708">
  <image href="https://i.stack.imgur.com/Z1YVS.png" />
  <circle id="pointer" cx="27" cy="126" r="26" stroke="black" fill="red" />
  <circle id="target" cx="500" cy="573" r="5" stroke="black" fill="blue" style="visibility:hidden" />
</svg>

function getPosition(el) {
  return {
    x: parseInt(el.attr("cx")),
    y: parseInt(el.attr("cy")),
    r: parseInt(el.attr("r"))
  };
}

function dragmove(d) {
  d3.select(this)
    .attr("cx", d3.event.x)
    .attr("cy", d3.event.y);
}
var drag = d3.behavior.drag()
  .on("drag", dragmove)
  .on("dragend", function() {
    let p1 = getPosition(d3.select(this));
    let p2 = getPosition(d3.select('#target'));

    // euclidean distance
    let xDiff = p1.x - p2.x;
    let yDiff = p1.y - p2.y;
    let dist = Math.sqrt(xDiff * xDiff + yDiff * yDiff);

    if (dist <= p1.r + p2.r) {
      alert("found it");
      d3.select('#target').style('visibility', 'visible');
    } else {
      d3.select('#target').style('visibility', 'hidden');
    }
  });

d3.select('#pointer').call(drag);

Checking position of a circle wih Java Script

2 Answers2