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

Posted 2023-03-06

技术标签:

【中文标题】在点击位置的地图上移动角色【英文标题】：Move character on map on clicked position 【发布时间】：2019-12-29 06:06:18 【问题描述】：

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

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

$("#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"  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" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
</div>

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

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

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

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

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

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

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

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

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

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

</div>
</div>

【问题讨论】：

【参考方案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"  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" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" ></div>
</div>

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

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

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

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

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

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

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

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

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

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

</div>
</div>

【讨论】：

你太棒了！非常感谢您花时间为我服务！说真的，你帮了我很多！ :) 不用担心。尝试分析代码以了解发生了什么。我会的！大约一两个月前我才开始更多地关注前端，所以我仍然很弱，但我正在努力获取越来越多的信息！ :)

以上是关于在点击位置的地图上移动角色的主要内容，如果未能解决你的问题，请参考以下文章

[UE4]移动小地图

unity怎么把canvas做成小地图

如何用C ++制作迷宫中的可移动角色[关闭]

已解决：在瓷砖地图中移动角色时锚控制按钮？

MMO即时战斗：地图角色同步管理和防作弊实现

摇杆控制角色移动