How to interpolate movement between two points?

I have a map that's stored in a 2D Array with 1s being walls, 0s being roads, and 2s being houses. There is a character that is not stored in the map but its position is always checked against the map for "collision detection". Here is the map as a reference:

[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1],
[1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1],
[1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,1,1,1,1,1,1,0,1,1,1,0,0,1],
[1,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,1],
[1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,2,2,2,0,0,0,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,2,2,2,0,0,0,1,1,1,1,0,1],
[1,0,0,1,1,1,0,1,1,1,1,1,1,0,0,1,1,0,0,1],
[1,0,0,1,1,1,0,1,1,1,1,1,1,0,0,1,1,0,0,1],
[1,0,0,1,1,1,0,0,1,1,1,1,1,0,0,1,1,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]


The problem is I don't know how to make the character go smooth on that surface without overlapping any walls when drawing. The drawing viewport is 500x500, the map array is 20x20, so I divided the viewport size to the size of the array to get a block size to fit in my viewport, which was 25x25.

The blocks are drawn fine and fit in the screen perfectly but when I put the character size to 12.5 by radius, it keeps being drawn incorrectly into the screen. Like the area at the next would be "Road" but in the graphics it will just keep overlapping a wall. Changing the radius of the character didn't change anything. It just keeps jumping farther to be at position (x,y).

How is this generally done in a 2D game where the map is stored in an array? How can I "interpolate" between the two points and also detect collision cleanly?

If it matters, I am writing this game in JavaScript/HTML5 and drawing everything using fillRect and arc.

• How about a screenshot of the problem? – ashes999 May 8 '14 at 9:51

Every time you detect a keypress, you add the velocity and move it.

if (up_key_pressed)
{
// Move it up by a velocity (not a cell)
temp_y -= velocity_y * deltaTime;
}
....


Then after every move, you check the map if the point (temp_x, temp_y) collides with the walls. If it doesn't collide, assign that point to the position of your character.

Hope this helps.