Карты изображений не меняются

Question

Я создаю игру, основанную на отличии.

У меня игра работает, но я обнаружил, что она не реагирует, а изображения и карты не меняются.

Нажмите на демонстрационную ссылку и измените размер страницы до размера, меньшего, чем у планшета (768 Вт), и вы увидите, что размер изображений не изменяется.

Это потому, что div оболочки имеет ширину 600 пикселей. Если я уберу это, то размеры изображений изменятся, но кликабельные карты не изменятся, и игра прекратится.

Main HTML ниже, но вы можете просмотреть исходный код из демонстрации.

ДЕМО

HTML:

<div id="wrapper">
<div id="transparentmap">
        <img class="transparentmap img-fluid" src="map.png" usemap="#photohunt" />
        <map name="photohunt">
        <area  id="m1" coords="388,224,30" shape="circle">
        <area  id="m2" coords="532,191,30" shape="circle">
        <area  id="m3" coords="173,246,30" shape="circle">
        <area  id="m4" coords="349,59,30" shape="circle">
        <area  id="m5" coords="127,181,30" shape="circle">
        <area  id="m6" coords="61,262,30" shape="circle">
        </map>
    </div>
    <div id="m1d"></div>
    <div id="m2d"></div>
    <div id="m3d"></div>
    <div id="m4d"></div>
    <div id="m5d"></div>
    <div id="m6d"></div>    
    <img id="different" class="img-fluid" src="2.jpg">
    <img id="original" class="img-fluid"  src="1.jpg">
</div>

Answer 1

Я посмотрел на вашем сайте, и он работает правильно. но мне не понравилось, как вы используете div и карты изображений для создания игры, и я заметил, что у вас есть изображение для каждого правильного предположения! поэтому я подумал, что было бы неплохо создать хороший пример.

Я сделал этот пример, попробуйте. он полностью динамичен c, больше нет div-ов, больше нет карт, и он в чистом JavaScript, теперь вы можете добавлять столько, сколько хотите, вы можете построить поверх него свою собственную игру.

Если у вас есть какие-либо вопросы, просто скажите мне, счастливый код:)

let imgElem = document.querySelector("#m_map"),
  statisticsElem = document.querySelector("#m_statistics span"),
  canvasElem = document.querySelector("canvas"),
  ctx = canvasElem.getContext("2d");

const COORDS = {
  default: [
    [388, 224, 30], [532, 191, 30], [173, 246, 30],
    [349, 59, 30], [127, 181, 30], [61, 262, 30]
  ],
  new: [
    [388, 224, 30], [532, 191, 30], [173, 246, 30],
    [349, 59, 30], [127, 181, 30], [61, 262, 30]
  ],
  clicked: []
};

function drawCircle(x, y, r, c, w) {
  ctx.strokeStyle = c;
  ctx.lineWidth = w;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.stroke();
}

imgElem.onload = window.onresize = function() { 
  canvasElem.width = imgElem.width;
  canvasElem.height = imgElem.height;
  COORDS.new.forEach(function(c, ind) {
    coords = COORDS.default[ind];
    COORDS.new[ind] = [coords[0] * imgElem.width / 600, coords[1] * imgElem.height / 400,
      coords[2] * imgElem.height / 400];
  });
  COORDS.clicked.forEach(function(index) {
    var coords = COORDS.new[index];
    drawCircle(coords[0], coords[1], coords[2], "red", 3);
  });
};

canvasElem.onclick = function(e) {
  COORDS.new.forEach(function(coords, ind) {
    if(COORDS.clicked.indexOf(ind) === -1 && e.offsetX >= coords[0] - coords[2] && e.offsetX <= coords[0] + coords[2] &&
       e.offsetY >= coords[1] - coords[2] && e.offsetY <= coords[1] + coords[2]) {
      drawCircle(coords[0], coords[1], coords[2], "red", 3);
      var correctGuesses = COORDS.clicked.push(ind);
      statisticsElem.innerHTML = correctGuesses;
      if(correctGuesses === COORDS.default.length) {
        alert("You win!");
      }
    }
  });
}

* {
  box-sizing: border-box;
}
#m_container {
  background-color: lightgreen;
  padding: 10px;
  width: 40%;
  position: relative;
  border-radius: 10px;
  box-shadow: 2px 2px 2px #ccc;
}
#m_container img {
  width: 100%;
}
#m_container canvas {
  position: absolute;
  top: 10px;
  left: 10px;
}

<div id="m_statistics">
  <p>Differences Found:<span>0</span></p>
</div>
<div id="m_container">
  <canvas></canvas>
  <img id="m_map" src="https://stefan.admark.co.uk/test/2.jpg"> 
  <img src="https://stefan.admark.co.uk/test/1.jpg">
</div>

Answer 2

Я сделал это для себя, чтобы сделать координаты динамичными c, добавьте этот код в ваш скрипт, чтобы каждый раз, когда пользователь изменял размеры окна, координаты пересчитывались.

var img = document.querySelector(".transparentmap"),
  areas = document.querySelectorAll("area");
var originalCoords = [
  [388,224,30],
  [532,191,30],
  [173,246,30],
  [349,59,30],
  [127,181,30],
  [61,262,30]
];
img.onload = window.onresize = function() { 
  areas.forEach(function(area, ind) {
    var coords = originalCoords[ind];
    area.coords = `${coords[0] * img.width / 600}, ${coords[1] * img.height / 400}, ${coords[2] * img.height / 400}`;
  });
}