javascript - 图像映射未调整大小

Question

我正在创建一个找茬游戏。

我的游戏可以运行，但我发现它没有响应，并且图像和 map 没有调整大小。

单击演示链接并将页面大小调整为小于平板电脑 (768w) 的任何大小，您将看到图像大小不会调整。

这是因为包装 div 的宽度为 600px。 如果我删除它，则图像会调整大小，但可点击的 map 不会，并且游戏会中断。

主要 HTML 如下，但您可以从演示中查看源代码。

DEMO

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 和图像映射来制作游戏的方式，而且我注意到你每个正确的猜测都有一个图像!所以我认为为您树立一个很好的榜样会很好。

我做了这个例子，你试试吧。它是完全动态的，不再有 div，不再有 map ，而且是纯 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>