Map - PHP ? Javascript? Ajax?

[BankOfMystic]

Okay so I want to write a map system, I looked over the one halls posted but it's not the same I'm trying to create. I don't really know how to explain so I drew out the map type/style I want to use.




The player would start off at the red dot, and each green box would represent a room they could enter .. dungeon type or item shop, etc.

They can only walk on the gray path though. Obviously when the user left it would save where they're at so they wouldn't have to start over again but that's trivial, the hard part for me is displaying it properly and user movement.

Any ideas?


Edit -

Btw halls nice jobs on the tut so far. I've been tinkering around with php for few years but never really took it seriously, I stumbled upon your tut and was going along with it, but the project sort of took a life of it's own and I couldn't stop lol. You can see it at http://www.Kriminalz.com if you want, it's come so far but it still has light years to go before it's at where I want it.

[Jackolantern]

I may be off on this as I am not a big web coder, but would it not be possible to put the map up as a static image, and then use AP divs set with transparency to keep track of the player dot? You could then use code to alter the AP div player dot image as needed to represent movement.

There is probably a better way of doing it however. Probably something like Hall's grid map system.

[BankOfMystic]

I may be off on this as I am not a big web coder, but would it not be possible to put the map up as a static image, and then use AP divs set with transparency to keep track of the player dot? You could then use code to alter the AP div player dot image as needed to represent movement.

There is probably a better way of doing it however. Probably something like Hall's grid map system.

That's outside the box.

What I'm looking for though, is the dot to remain static, and the image move under it. Since only 200x200px will be shown at any given time. You can go here to see the way I want to display the map: http://kriminalz.com/map.php I removed all the login checks for that page.

[hallsofvallhalla]

use javascript...

Make a div for the map and then use document.divname.top = then the new top value of the div then document.left= the new left value
this is psuedo code of course and right off the top of my head

Code: Select all

<div id = "mapmain">
<div id = "mapimage"> <img.scr="your map image">
</div>
</div>

<Script = "javascript">
var mapmove

function moveleft(){
left=left-10;
map=document.getElementById(mapimage);
map.style.left=left +"px";
}

function moveright(){
left=left+10;
map=document.getElementById(mapimage);
map.style.left=left +"px";
}

function moveup(){
top=top-10;
map=document.getElementById(mapimage);
map.style.top=top +"px";
}

function movedown(){
top=top+10;
map=document.getElementById(mapimage);
map.style.top=top +"px";
}

buttonmash = window.event.keyCode;
  if (buttonmash ==  	37)
{
moveleft();
}
  if (buttonmash ==  	39)
{
moveright();
}
  if (buttonmash ==  	38)
{
moveup();
}
  if (buttonmash ==  	40)
{
movedown();
}





style.css
#mapimage{
position:absolute;
left:200px;
top:200px;
}

hope this gets you started int he right direction...as far as the collision with black let me think a bit on the best way to do that

[Jackolantern]

If the map is moving under the dot, would that not cause some page display problems? If the player moves all the way over to one side of the map, would it not be possible for the map to scroll off the screen, thus causing horizontal scroll bars?

[BankOfMystic]

If the map is moving under the dot, would that not cause some page display problems? If the player moves all the way over to one side of the map, would it not be possible for the map to scroll off the screen, thus causing horizontal scroll bars?

That's the logic of how it should work, not that the dot appears to move, but rather, the background appears to move leaving the dot relatively in the center of the map.

I changed the image to have the walkway / rooms / etc to represent boxes. Now the red box would be where the player is currently at. As they move, the next box would turn red, and the box they were just in would go back to gray. As far as the contents of each box goes, would be defined in the database. So each box should have a unique representation in the database. This drifts more to a grid like display, I'm just not sure how to program it so they can't move in a direction there is no path too. I'm not sure if I'm explaining this in the easiest way :p

[BankOfMystic]

I've got http://www.kriminalz.com/map.php set up with the map correctly, I'm thinking to limit only to the areas defined, I could set up a variable in the database, and if that value isn't matched then it doesn't allow movement in that direction.

[BankOfMystic]

very tedious, and I'm sure there's a better way, but it works.