在点击位置移动地图上的角色

Question

我有一张地图，可以通过更改 margin-top 和 margin-left 逻辑来移动它。当我点击箭头时，jQuery 改变了 left/top 边距并且整个地图移动了，所以看起来我的角色在移动。

现在我希望能够移动到我点击指定地图位置的任何地方。

$("#up").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset+=16;
  $("#map").css("margin-top", offset + "px");
});

$("#down").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset-=16;
  $("#map").css("margin-top", offset + "px");
});

$("#left").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset+=16;
  $("#map").css("margin-left", offset + "px");
});

$("#right").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset-=16;
  $("#map").css("margin-left", offset + "px");
});

.row {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.texture img {
    width: 100%;
    height: auto;
    display: block;
}

.texture:hover {
    position: relative;
    filter: grayscale(1);
}

button
{
  font-size: 20pt;width: 50px;height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:right">
<table>
    <tr><td></td><td><button id="up">&uarr;</button><br /></td><td></td></tr>
    <tr><td><button id="left">&larr;</button><br /></td><td></td><td><button id="right">&rarr;</button><br /></td></tr>
    <tr><td></td><td><button id="down">&darr;</button><br /></td><td></td></tr>
</table>
</div>

<div id="viewport" style="width:300px;height:300px;overflow:hidden;position:relative;">
<img src="https://i.ibb.co/8PZ6Dp9/hero-down.png" alt="hero" style="position:absolute;left:140px;top:140px;">
<div id="map" style="width:590px; height:433px;">

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

</div>
</div>

Answer 1

第一部分是计算出您单击了哪个单元格，然后计算出 x 和 y 坐标。一旦推导出来，我们就可以从起点计算出差异（因为我们从 4, 4 开始）。然后我们为所需的单元格设置动画。

从这里您可以在角色移动时为其设置动画。您还可以算出行进的距离并改变运动速度。目前速度始终是1秒到达目的地

$("#up").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset+=16;
  $("#map").css("margin-top", offset + "px");
});

$("#down").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset-=16;
  $("#map").css("margin-top", offset + "px");
});

$("#left").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset+=16;
  $("#map").css("margin-left", offset + "px");
});

$("#right").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset-=16;
  $("#map").css("margin-left", offset + "px");
});

$("#map div img").on("click", function(e)
{
  var $div = $(this).closest("div");
  var x = $div.index();
  
  var $row = $div.closest("div.row");
  var y = $row.index();
  
  var dx = (4- x) * 32, dy = (4- y) * 32
  
  $( "#map" ).animate({
    "margin-left" : dx + "px",
    "margin-top": dy + "px"
  }, 1000, function() 
  {

  });
});

.row {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.texture img {
    width: 100%;
    height: auto;
    display: block;
}

.texture:hover {
    position: relative;
    filter: grayscale(1);
}

button
{
  font-size: 20pt;width: 50px;height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:right">
<table>
    <tr><td></td><td><button id="up">&uarr;</button><br /></td><td></td></tr>
    <tr><td><button id="left">&larr;</button><br /></td><td></td><td><button id="right">&rarr;</button><br /></td></tr>
    <tr><td></td><td><button id="down">&darr;</button><br /></td><td></td></tr>
</table>
</div>

<div id="viewport" style="width:300px;height:300px;overflow:hidden;position:relative;">
<img src="https://i.ibb.co/8PZ6Dp9/hero-down.png" alt="hero" style="position:absolute;left:128px;top:128px;">
<div id="map" style="width:590px; height:433px;">

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

</div>
</div>

在点击位置移动地图上的角色

Move character on map on clicked position

html

css

jquery

dictionary

margin