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:
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
- 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.