First, just in case you didn't know, there's a video tutorial that talks a bit about a simple collision solution.
https://sites.google.com/ed.act.edu.au/games-programming/game-elements/level-maps
The topic of collision starts at around 3:50 timestamp.
As for your question about location on the map - you basically need to switch from your normal coords system into "map coords" system. It's a bit tricky, because 1 unit on your map is multiple normal units.
I'll start from map -> normal translation, as I feel it's a little easier.
// function that returns an 2-element array.
// Number under index 0 is x component of game coord
// Number under index 1 is y component of game coord
getGameCoordsFromMap = function(mapX, mapY)
// let's say your map is build out of tiles with 16x16 size
tile_width = 16
tile_height = 16
gameCoord = []
// first, multiply your map coord times the number of units in each tile.
// then (and this depends on your game) add additional half of the tile size
// - multiplication alone will give you coords of upper-right corner of the tile. If that's what you need, you can leave it as is.
// If you want coords of the middle of the tile, add this extra half of tile size.
gameX = mapX * tile_width + (tile_width/2)
gameY = mapY * tile_height + (tile_height/2)
// second, by default maps and game world use different coords systems - game world starts in the very middle and then positive value go up and right
// while negative values go left and down
// maps on the other hand have their (0,0) point in the down-left corner.
// This strongly depends on your game again, but there's a good chance you'll have offset your normal coords by that difference.
// I'll asume you draw your map on the (0,0) point of your normal game coords, which means the offset will be
// exactly half of your screen size in both directions.
gameX -= screen.width / 2
gameY -= screen.height / 2
// with all that done, store game coords in output table and return result
gameCoord.push(gameX)
gameCoord.push(gameY)
return gameCoord
end
Not a trivial thing, I admit.
To translate your normal game coords into map coords, you need to do exactly the same things, but in reverse.
// function that returns an 2-element array.
// Number under index 0 is x component of map coord
// Number under index 1 is y component of map coord
getMapCoordsFromGame = function(gameX, gameY)
// let's say your map is build out of tiles with 16x16 size
tile_width = 16
tile_height = 16
mapCoord = []
// first, apply the offset
gameX += screen.width / 2
gameY += screen.height / 2
// second, divide your coords by size of the tile
mapX = gameX / tile_width
mapY = gameY / tile_height
// a little catch - this division almost for sure will give you a fraction as a result, which is a problem, because maap coords are always
// natural numbeers. The result is a fraction because in most cases game coords will fall into some of the 16x16 square that
// creates one tile of the map. This fraction is the fraction of thee tile away from the uppeer-left corner of the map tile.
// You need to get rid of the fraction part, as you cna do it easily using floor() function build into microScript
mapX = floor(mapX)
mapY = floor(mapY)
// with all that done, store map coords in output table and return result
mapCoord.push(mapX)
mapCoord.push(mapY)
return mapCoord
end
Hope I was able to explain it clearly enough...