1. 技术文章
  2. Move character on map on clicked position

Move character on map on clicked position

由 徘徊边缘 提交于 2019-12-11 04:21:02

问题


I've got a map which is can be moved around by changing margin-top and margin-left logic. When I click on arrows, jQuery changes the left/top margins and the whole map moves, so it looks like my character is moving.

Now I want to be able to move to anywhere I click on specified map position.

$("#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>

回答1:


The first part is to work out which cell you clicked on and then to work out the x and y coordinates. Once that is deduced we work out the differential from the starting point (since we start at 4, 4). We then animate to the desired cell.

From here you could animate your character when he moves. You could also work out the distance to travel and to change the speed of movement. At present the speed is always 1 second to get to the destination.

$("#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>


来源：https://stackoverflow.com/questions/57634347/move-character-on-map-on-clicked-position

标签
jquery
html
css
dictionary
margin
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!