与 javascript 协调缩放图像

Question

我想开发的是一种在线小游戏，但我卡在了缩放部分。在我的例子中，将有一个 html 图像，其中散落的鸡蛋将成为图像的一部分。玩家必须点击鸡蛋，在 javascript 一侧，我必须将事件侦听器放在图像上鸡蛋的精确位置，然后放大该位置。

我的问题有两个：首先，我必须找到一种方法，将事件侦听器放在图像的一个点（所以我猜是坐标）上，如果 window 调整大小，该点将保持不变;然后我必须找到一种方法来放大 javascript 中的那个点。我找到的所有指南都只解释了如何使用鼠标滚轮进行缩放，而不是通过单击该特定点进行缩放。

有什么想法吗？

here's an image of my game

Answer 1

这是一个有效的概念证明，说明如何捕捉点并在所需点上进行放大：

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>

打开 "Full page" 中的片段进行测试

编辑：我什至加了鸡蛋！

与 javascript 协调缩放图像

Zooming image on coordination with javascript

html

javascript

css

online-game