图像贴图未调整大小

Question

我正在创建一个点差游戏。

我让游戏正常工作，但我发现它没有响应，图像和地图也没有调整大小。

点击演示链接，将页面调整为比平板电脑(768w(小的任何尺寸，你会看到图像不会调整大小。

这是因为包装器div的宽度为600px。如果我删除了这个，那么图像会调整大小，但可点击的地图不会，游戏就会中断。

主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和图像地图制作游戏的方式，我注意到你每个正确的猜测都有一个图像！所以我觉得给你树立一个好榜样会很好。

我做了这个例子，试试看。它是完全动态的，没有更多的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

我已经自己做到了，为了使coords动态，将此代码添加到脚本中，因此每次用户调整窗口大小时，coords都会重新计算。

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}`;
});
}