时间戳

首页 > 解决方案 > 与javascript协调缩放图像

javascript - 与javascript协调缩放图像

问题描述

我正在尝试开发的是一种在线迷你游戏，但我被困在缩放部分。在我的例子中，会有一个带有散落鸡蛋的 html 图像，这将是图像的一部分。玩家必须点击彩蛋，在 javascript 端，我必须在图像上彩蛋的精确位置放置一个事件监听器，然后放大该位置。

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

有什么想法？

这是我的游戏图片

标签： javascripthtmlcssonline-game

解决方案

这是一个关于如何捕捉点单击并放大所需点的工作概念证明：

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>

在“整页”中打开代码段进行测试

编辑：我什至加了鸡蛋！

推荐阅读