Javascript 按元素位置显示大div的小部分

我正在尝试创建一张地图，它的大小是576x576

它是由32 x 32的平铺创建的。所以我想在这张地图里找到我的角色div，给我一个视图。就像无论我的角色位置在哪里，总是只显示150 x 150的视图。就像游戏移动改变视线。我的角色总是站在中间，在他周围150 x 150的位置上观看整个576 x 576分区

.row{
证明内容：中心；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
柔性包装：nowrap；
}
.纹理图像{
宽度：100%；
高度：自动；
显示：块；
}
.质地{
位置：相对位置；
}
.纹理：悬停{
位置：相对位置；
过滤器：灰度（1）；
}
char先生{
位置：绝对位置；
z指数：5；
排名：0；
}

---

只需使用几个div并操纵中间一个div的边距即可

$（“#向上”）。在（“单击”上，函数（e）
{
var offset=parseInt（$（“#map”）.css（“边距顶部”）；
偏移量+=16；
$（“#map”）.css（“页边距顶部”，偏移量+“px”）；
});
$（“#向下”）。在（“单击”）上，函数（e）
{
var offset=parseInt（$（“#map”）.css（“边距顶部”）；
偏移量-=16；
$（“#map”）.css（“页边距顶部”，偏移量+“px”）；
});
$（“#左”）。在（“单击”上，函数（e）
{
var offset=parseInt（$（“#map”）.css（“左边距”）；
偏移量+=16；
$（“#map”）.css（“左边距”，偏移量+“px”）；
});
$（“#右”）。在（“单击”上，函数（e）
{
var offset=parseInt（$（“#map”）.css（“左边距”）；
偏移量-=16；
$（“#map”）.css（“左边距”，偏移量+“px”）；
});
.row{
证明内容：中心；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
柔性包装：nowrap；
}
.纹理图像{
宽度：100%；
高度：自动；
显示：块；
}
.纹理：悬停{
位置：相对位置；
过滤器：灰度（1）；
}
按钮
{
字体大小：20pt；宽度：50px；高度：50px；
}

&uarr

&larr
&rarr

&达尔

问题应该是独立的。请把你的逻辑复制到问题中。谢谢，这正是我想做的。但是我可以再问你一次吗。这有可能在我的html上使用这种代码技术吗？我使用flex和row从32x32小图像生成地图。在你们的例子中，我想要的一切都是完美的，只有一件事是映射就是一个图像。当我用id=map包装我的容器时，整个容器的大小只是调整到300px 300px，而不仅仅是改变视口。每次调整大小。我想这是因为我用flex生成地形。在小提琴上看，如果可以的话你会理解的。你的演示的问题是你所有的纹理都是一样的。你能把你的演示修改成不同的部分吗？现在，如果你在滚动，你就不知道…你是什么意思？你是说32x32瓷砖的不同图像？还是课程名称？我需要换些什么？你看，我的想法是从数组中生成所有这些HTML。每32x32 px div来自阵列。为了得到不同的32x32瓷砖，将要改变什么，只有类名称。大部分可能只是草，而不是石头之类的东西。我几乎创造了这一切。但视口中只剩下这个问题。只是坐了几个小时，找不到路，甚至连谷歌都找不到：）谢谢！我想我会重新做这个，做我想要的：）你刚刚救了我！