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];
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);