在2D矩阵数组中移动精灵-JavaScript

我已经创建了一个包含10 x 10迷宫的二维阵列。我现在的问题是如何移动迷宫jpg上的精灵（当它在桌子上工作时）

如何将精灵移动特定距离，使其看起来好像正在移动到下一个正方形

我有一些键盘功能，我想我需要这些代码。但我对将精灵移动到特定正方形的逻辑感到困惑

PlayerX = 1   
PlayerY = 1             

Up =   MazeArray[PlayerX, PlayerY - 1];

Down = MazeArray[PlayerX, PlayerY + 1];

Left = MazeArray[PlayerX - 1, PlayerY];

Right= MazeArray[PlayerX + 1, PlayerY];

---

你的画布应该包含整个迷宫和你的角色精灵

你的精灵是一个半径为10的圆（所以它是20px乘20px），但迷宫的“正方形”只有6px乘6px（因为你的画布是60px乘60px，你说迷宫是10x10）

要使它看起来像是移动了一个正方形，您需要使它首先适合一个单元格。 使画布更大（如果你想保持10px的半径，则以200px乘以200px）

然后，可以在绘制精灵时指定其位置：

PlayerX=4; // 0 <= PlayerX < 10
PlayerY=5; // 0 <= PlayerY < 10
MyCanvas.arc(10+PlayerX*20, 10+PlayerY*20, 10, 0, 2 * Math.PI, true);

---

PlayerX=4；//0您使用什么来绘制精灵<代码>画布

，

div

，

img

？Canvas=document.getElementById（“Canvas”）；MyCanvas=Canvas.getContext（“2d”）；MyCanvas.beginPath（）；MyCanvas.strokeStyle=“rgb（01262232）”；arc（30,30,10,0,2*Math.PI，true）；MyCanvas.stroke（）；MyCanvas.fillStyle=“rgb（01262232）”；MyCanvas.fill（）；谢谢你，我已经设法让它工作了。我确实需要添加MyCanvas.arc代码再次感谢您的帮助，我非常感谢！