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

Question

我创建了一个包含10 x 10迷宫的2D数组。 我现在遇到的问题是如何在迷宫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];

Answer 1

您的画布应包含整个迷宫和角色精灵。

您的精灵是一个半径为10的圆（因此它是20px x 20px），但是迷宫的“正方形”只有6px x 6px（因为您的画布是60px x 60px，并且您说迷宫是10x10）。

要使其看起来像移动一个正方形，您需要先使其适合一个单元格。 使您的画布更大（如果您想保留10px的半径，请放大200px x 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);