[SOLVED] Zooming image on coordination with javascript

Zooming image on coordination with javascript

what I'm trying to develop is a kind of online minigame, but I'm stuck on the zoom part. In my case there will be an html image with scattered eggs which will be part of the image. The player will have to click on the eggs and on the javascript side I will have to put an event listener on the precise position of the egg on the image and then zoom in on that position.

My problems are two: first of all I have to find a way to put an event listener on a point (so I guess with coordinates) of the image that will remain unchanged if the window is resized; I then have to find a way to zoom in on that point in javascript. All the guides I found explained only how to zoom with the muose wheel and not by clicking on that specific point.

Some idea?

here's an image of my game

Solution

Here is a working proof of concept of how to catch the point clicking and zooming in on the desired point:

const gameElement = document.getElementById("game");
const eggsUrl = "https://i.imgur.com/saXapYu.png";
const pointsUrl = "https://i.imgur.com/tFStOam.png";
const backgroundImageSize = "1";

let isZoomedIn = false;
let zoomCoordinates = {
  x: 0,
  y: 0
};
let zoomSize = "100% 100%";

const points = [{
    x: 40,
    y: 40
  },
  {
    x: 200,
    y: 200
  },
  {
    x: 360,
    y: 360
  }
];

function onGameClicked(event) {
  if (isZoomedIn) {
    gameElement.style.backgroundSize = "100% 100%";
    gameElement.style.backgroundPosition = "center";
    isZoomedIn = false;
  } else {
    const clickedElement = getClickedElement(event.clientX, event.clientY);
    if (clickedElement) {
      zoomedX = 200 - (clickedElement.x * 2);
      zoomedY = 200 - (clickedElement.y * 2);
      gameElement.style.backgroundSize = "200% 200%";
      gameElement.style.backgroundPosition = `${zoomedX}px ${zoomedY}px`;
      isZoomedIn = true;
    }
  }
}

function getClickedElement(clickedX, clickedY) {
  for (const point of points) {
    if (clickedX > point.x - 25 &&
      clickedX < point.x + 25 &&
      clickedY > point.y - 25 &&
      clickedY < point.y + 25) {
      return point;
    }
  }
}

gameElement.addEventListener("click", onGameClicked);

document.getElementById("eggs").addEventListener("click", () => {
  gameElement.style.backgroundImage = `url("${eggsUrl}")`;
});
document.getElementById("points").addEventListener("click", () => {
  gameElement.style.backgroundImage = `url("${pointsUrl}")`
});

#game {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  background-image: url("https://i.imgur.com/tFStOam.png");
  cursor: pointer;
  transition: 1s;
  background-repeat: no-repeat;
}

<div id="game"></div>
<button id="eggs">Show eggs</button>
<button id="points">Show points</button>

Open snippet in "Full page" to test it out

EDIT: I've even added the eggs!