與 javascript 協調縮放圖像

Question

我正在嘗試開發的是一種在線迷你游戲，但我被困在縮放部分。 在我的情況下，將有一個 html 圖像，其中散落的雞蛋將成為圖像的一部分。 玩家必須點擊雞蛋，在 javascript 一側，我必須在圖像上雞蛋的精確 position 上放置一個事件偵聽器，然后放大該 position。

我的問題有兩個：首先，我必須找到一種方法將事件偵聽器放在圖像的一個點（所以我猜是坐標）上，如果調整 window 的大小，該點將保持不變； 然后我必須找到一種方法來放大 javascript 中的那個點。 我找到的所有指南僅解釋了如何使用鼠標滾輪進行縮放，而不是通過單擊該特定點來進行縮放。

有什么想法？

這是我的游戲的圖像

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>

在“整頁”中打開代碼段進行測試

編輯：我什至加了雞蛋！