Working principle of an RPG map

Question

I am currently thinking of building a basic browser-based 2D(that would eventually become 2.5D) RPG. I have planned everything and I think that would be able to accomplish the current goals, but it seems that I can't think of a good way to develop the mapping. I have been able to move(currently teleporting as no animations at the moment) the character onclick, but can't think of a way to make some parts of the grid(tiles) not clickable so the players will not walk on water or over trees or anywhere else that they are not supposed to do so. the movable area will be 3-4 tiles out of the two-tiled roads/paths. each tile will be around 40-50px as well the character.

The game in general will be like Diablo 2 (Leveling, bosses, different areas/maps, different enemies with different levels, some equipment and etc.). And the map is mainly the biggest problem cuz I want to add cities and merchants, and the player shoould not be able to get on a questgiver's house(will not be able to get inside as well).

So to put everything together:

1. How should one create a tiled map, so that can mark unmovable and next(those that will trigger entering next part of the map) fields?

   1.1 INFO: I was thinking of JSON to pass the data to jQ/javascript and to do the manipulation on client side but can't think of a way to mark fields

2. How to determinate the shortest path to the new char position for the purpose of animating

EDIT:

I am not asking anyone to do it for me, I would like to be explained how to manage everything in theory, any possible tools, technologies and etc.

Answer 1

Most 2D tile-based games use arrays (of some sort) to describe the map. If you assign each type of tile (grass, path, tree, house, water etc.) a numeric index, you can describe your map like so:

[2][1][1][1][1]
[2][2][1][1][1]
[1][1][1][1][1]
[1][1][1][3][1]
[1][1][1][1][1]

(1 = grass; 2 = tree; 3 = house) = a 5x5 map with three trees clustered top-left and a house near the bottom-right.

You can assign each tile properties, such as movement cost: how 'difficult' it is for a player to traverse that tile. This is normally used in conjunction with Pathfinder algorithms); assign regular tiles (grass, path etc.) a low cost. If you don't want a player to be able to move onto a tile, you would assign that type of tile a high movement cost. Your pathfinder should then be able to calculate the quickest (i.e. lowest cost) route to the destination, which will exclude high-cost tiles.

You could also set an upper bound to the values that the algorithm will accept, meaning it won't even try to traverse high-cost tiles. This would effectively make them immovable obstacles.

Here's a really good Javascript implementation of the A* Pathfinding Algorithm.

In theory, you could create a JSON object of several different map arrays to hold a whole game world's worth of screens... I suspect the filesize might balloon rather quickly, though.