Moving a sprite in 2D matrix array - JavaScript

Question

I have created a 2D array which contains a 10 x 10 maze. The problem I am having now is how I will move the sprite on the maze jpg (when it's actually working on the table).

How would I move the sprite a specific distance to make it appear as if it is moving to the next square?

I have about they keyboard functions and think I would need this code. But I am confused about the logic on moving the sprite a specific square.

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

Your canvas should contain the whole maze and your character sprite.

Your sprite is a circle with radius 10 (so it's 20px by 20px) but a "square" of your maze is only 6px by 6px (because your canvas is 60px by 60px and you said the maze is 10x10).

To make it look like it moves a square away you need to make it first fit one cell. Make your canvas bigger (200px by 200px if you want to keep a 10px radius).

Then you can specify it's position when you draw the sprite:

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