我试图在屏幕上实现类似扑克牌游戏的滑动效果。为了给出背景，灰色六边形是我的玩家，棕色六边形是我的地板（10x13，总共130个）。经过努力，我实现了以下效果：

https://i.redd.it/4odlzl8zqy4h1.gif

当我将鼠标悬停在棕色六边形上时，会出现黄色六边形，显示鼠标位于哪个六边形上给玩家看，当你点击它时，它会变成蓝色，好像被选中一样。如果你双击棕色六边形，玩家会移动到那里（如果你尝试双击六边形不是你的玩家旁边的六边形，什么也不会发生），如果你点击地板外的六边形，蓝色和黄色六边形都会消失。

问题是，当双击发生时，它会瞬间移动到被点击的六边形（见图2）。我想知道如何将其转换为像第一个GIF一样的动画。

从图3开始的图像显示了我的代码（我是巴西人），//和/*标签只是为了我知道它在做什么，以及为了我复制它或尝试另一种方式，所以忽略它们。

https://preview.redd.it/xa0suq5ary4h1.png?width=1862&format=png&auto=webp&s=90e543cd0445e214c10ed8d72361ca2fbf9ab131

https://preview.redd.it/uadfbb6fry4h1.png?width=1865&format=png&auto=webp&s=e3f0f04b91745179e908f507323de2050c240090

https://preview.redd.it/obovbhw4sy4h1.png?width=1863&format=png&auto=webp&s=13ca86a0dcde3551f77a4cabd3b6327820dc1ba2

https://preview.redd.it/gj0pd6s8sy4h1.png?width=1856&format=png&auto=webp&s=1e6423897e38057b2fe2db148cb270b1a6ef3fc5