Javascript 图像贴图不调整大小

我正在创造一个与众不同的游戏

我让游戏工作，但我发现它没有反应，图像和地图没有调整大小

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

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

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

HTML:

---

我自己做的，为了使坐标变得动态，请将此代码添加到脚本中，这样每当用户调整窗口大小时，坐标都会重新计算

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

---

我看了一下你的网站，它运行正常。但我不喜欢你用div和图像地图制作游戏的方式，我注意到你的每一个正确猜测都有一个图像！所以我想给你树立一个好榜样会很好

我举了这个例子，试试看。它是完全动态的，没有更多的div，没有更多的地图，而且它是纯JavaScript的，现在你可以添加任何你想要的内容，你可以在上面构建你自己的游戏

如果您有任何问题，请告诉我，happy Codeing:）

让imgElem=document.querySelector（“#m#u map”），
StatisticElem=document.querySelector（“#m#u statistics span”），
canvasElem=document.querySelector（“canvas”），
ctx=canvasElem.getContext（“2d”）；
常数坐标={
默认值：[
[388, 224, 30], [532, 191, 30], [173, 246, 30],
[349, 59, 30], [127, 181, 30], [61, 262, 30]
],
新的：[
[388, 224, 30], [532, 191, 30], [173, 246, 30],
[349, 59, 30], [127, 181, 30], [61, 262, 30]
],
点击：[]
};
函数画圈（x，y，r，c，w）{
ctx.strokeStyle=c；
ctx.lineWidth=w；
ctx.beginPath（）；
弧（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（函数（c，ind）{
coords=coords.default[ind]；
COORDS.new[ind]=[COORDS[0]*imgElem.width/600，COORDS[1]*imgElem.height/400，
坐标[2]*imgElem.height/400]；
});
COORDS.clicked.forEach（函数（索引）{
var coords=coords.new[索引]；
画圈（坐标[0]，坐标[1]，坐标[2]，“红色”，3）；
});
};
canvasElem.onclick=函数（e）{
COORDS.new.forEach（函数（COORDS，ind）{
如果（COORDS.clicked.indexOf（ind）==-1&&e.offsetX>=COORDS[0]-COORDS[2]&e.offsetX=COORDS[1]-COORDS[2]&&e.offsetY当你使用图像映射时，你需要在图像调整大小时更新坐标dhi，我已将js添加到我的脚本中，但它似乎不起作用。映射没有调整大小。@JackCrozz我查看了你的网站，它工作正常！这太神奇了。我确实必须添加下面的代码，因为它直到页面出现时才起作用已调整大小。$（document.ready（函数（）{console.log（“ready！”）；canvasElem.width=imgElem.width；canvasElem.height=imgElem.height；}）；
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}`;
  });
}