restraints on user moving a layer

[ob1wan]

i am tring to make an rpg. the movement system is a layer that you move by pressing keys while a button is selected. now i have a back ground image of trees and other stuff and i wanted to know if there is some easy way to set up restraints on movement without having to set up each one by it self

[jscheuer1]

Have a look at this thread.

Also, this sounds like something that might benefit from:

Walter Zorn's Drag & Drop for Images and Layers

as he has a nifty way of limiting movement of movable elements.

DD's DOM Drag & Drop script also has this feature.

[ob1wan]

that would work but i would hafta do alot of coding.
i was woundering if there was a way i could mayput another layer over the area i dont want them moving onto and check for a run in error. (going to have a map with trees and objects and i dont want them to beable to walk throught trees or off the map.)
since they wont be using the mouse but pushing keys to move the layer, not sure how to go at this.

[jscheuer1]

Keeping them off trees would be another story but, it just stuck me that if the map itself is relatively positioned and the moving element is absolutely positioned and located inside the element that is the map, you could just do a simple (considering the alternatives):

movingel.style.top=Math.min(Math.max(parseInt(movingel.style.top)+incrementTop, 0),map.offsetHeight)+'px'
movingel.style.left=Math.min(Math.max(parseInt(movingel.style.left)+incrementLeft, 0),map.offsetWidth)+'px'

The increments could be either positive or negative but the position would never be less than 0 (the top and left edges of the container) nor greater than the offsetHeight and offsetWidth of the container, respectively (its bottom and right edges).

[ob1wan]

im sorrie i dont think i have been wording it right
site
the map wont move its the bgimage of the site
press the button then use q w e (upleft, up, upright) a s d (left, none, right) z x c (downleft, down, downright)
dont mind the fact that the person changes my girlfriend is helping with graphics and that is a placement
some major problems im having is you hafta have a good res. to see site and its best seen in fullscreen
i was messing around and i got a bottom layer set up but i found it easier to just set that with a number
i think if i could find a way to write a function that checks when it moves to see if it runs into another layer
document.getElementById('layer').style.left; document.getElementById('layer').style.top;
document.getElementById('layer').style.offsetHeight;
document.getElementById('layer').style.offsetWidth;
but im not sure how it would all work

[jscheuer1]

Well, in my above code, the movingel would be your little person. That is the only thing that would move. The map in my code is only the boundary of movement. I had sort of assumed that the map would not take up the entire page, as that way, folks with smaller screens could still play. The main thing that you might be able to take from my code is the concept of locating your little seeker in terms of their coordinates in each dimension being greater than and or less than a number determined by the window coordinates of the boundary element(s), and allowing the moving element's coords to continue to increase or decrease on the basis of those comparisons. I don't think it can get any simpler than that, and the more boundaries you have, the more checks will have to be made each time the figure moves to ensure it is not attempting to go 'out of bounds'.

[jscheuer1]

Another way to accommodate smaller screens would be to have the css style background coordinates change when the figure reaches the edge of the window if there is more map left to traverse. Somewhat like the concept of the Star Trek holodeck, where an infinite space is depicted in a confined area.

Something I may not have stressed enough as well is the idea that if your character is absolutely positioned and the container is either the page or a relatively positioned element, left:0 (for the moving element) will be the left edge and top:0 the top edge of the container, while the containers's width and height will be the right and bottom edges respectively.

[ob1wan]

ok thanx for the help
was tring to find away to do it without all the checks but wheres the fun in that....