RPG travel map grid with coords, help with x/y cords messing up

[Analyzer]

Hello PHPFreaks,

 

I'm having a bit of a problem, may or may not be a math problem.

My map works fine until a players coordinates are X < 7 or y < 7.

Let me explain how the map works:

 

I have a background map with a grid table 13 by 13 squares.

Each square is 32px by 32px with an empty background.

The players character is displayed in the middle of the map and as you move, I use jquery to change the CSS background position of the image. All that seems to work fine.

 

As of right now my background image is surrounded by a fence in a little town (development) that the user can't cross, which causes the image to be a bit big.

When the user moves I use ajax as XML to dynamically move the character.

That is not what I'm having a problem with, though.

 

If the character's coordinates are below X: 7 OR Y:7 then the character is jumping 2 squares over and is no longer in the "middle" of the map like it's supposed to be.

 

You can preview my problem here:

1. Go to http://foarpg.com

2. Login as test with the username and password

3. You'll see the map, currently set at coords 11,11 just move below those coordinates and you will see what happens.

 

Here is the code with the math:

//the $map_los is 6 to show how far the user can see 
$map_los = $Database->getSingleValue ("SELECT `sight_distance` FROM `map_data` WHERE `map_id` = ".$CharMap->getId());

// these are the coordinates the user sees
$x_smallest = ($CharMap->getX() - $map_los);
$x_largest = ($CharMap->getX() + $map_los);
$y_smallest = $CharMap->getY() - $map_los;
$y_largest = $CharMap->getY() + $map_los;

// This makes sure that the max/min coordinates don't go over the side of the possible map squares...
// so heres shows what the smallest x is?
$map_x_min = $Database->getSingleValue ("SELECT `x_co` FROM `map` WHERE `map_id` = ".$CharMap->getId()." ORDER BY `x_co` ASC LIMIT 1");
$map_y_min = $Database->getSingleValue ("SELECT `y_co` FROM `map` WHERE `map_id` = ".$CharMap->getId()." ORDER BY `y_co` ASC LIMIT 1");
$map_x_max = $Database->getSingleValue ("SELECT `x_co` FROM `map` WHERE `map_id` = ".$CharMap->getId()." ORDER BY `x_co` DESC LIMIT 1");
$map_y_max = $Database->getSingleValue ("SELECT `y_co` FROM `map` WHERE `map_id` = ".$CharMap->getId()." ORDER BY `y_co` DESC LIMIT 1");

// check left boundary
if ($x_smallest  < $map_x_min) {
	$x_smallest = $map_x_min;
	$x_largest = $map_x_min + ($map_los*2);
}

// check right boundary
if ($x_largest > $map_x_max) {
	$x_smallest = $map_x_max - ($map_los*2);
	$x_largest = $map_x_max;
}

// check top boundary
if ($y_smallest < $map_y_min) {
	$y_smallest = $map_y_min;
	$y_largest = $map_y_min + ($map_los*2);
}

// check bottom boundary
if ($y_largest > $map_y_max) {
	$y_smallest = $map_y_max;
	$y_largest = $map_y_max + ($map_los*2);
}

// shows what coordinate the user is on now
$qry_mapgrid = $Database->query ("SELECT * FROM `map` WHERE `x_co` >= ".$x_smallest." AND `x_co` <= ".$x_largest." AND `y_co` >= ".$y_smallest." AND `y_co` <= ".$y_largest." AND `map_id` = ".$CharMap->getId());

If you go to coordinates 1:1 and move you will see it seems to "double jump" towards the trees.

The trees surrounded by the fence in the picture is because I wanted the user to be forbidden to go to coords <7.

 

I'm not sure if I provided enough information for anyone to help me figure this out, if you need more let me know!

All help would be MUCH appreciated, thank you!

 

[requinix]

So there's two elements to this: the map in the background and the position of the player. Those two are out of sync, like the character thinks it has to move towards the trees due to the map boundary yet the map can continue to move.

 

Not knowing what you have now, this is the way I would implement it:

 

The AJAX call to move would return something like "the map should now show the area (x1,y1)-(x2,y2) and the character is at position (cx,cy)" and the Javascript determines where to place the character. The Javascript previously retrieved map information (like boundaries and image URLs) so it can handle the entire process of rendering without the AJAX needing to return CSS values or HTML markup.

 

Say the map is 20x20 and has boundaries (0,0)-(19,19). After movement the AJAX returns an area (0,2)-(12,14) and the character at location (4, . That location is 5 squares from the left and 9 squares from the top - not the middle of the map. The Javascript sets the map to show its background using offset (0px,64px) and positions the character at (128px,256px).

After moving right a few times the AJAX may return (1,2)-(13,14) and the character at (7, ; the map is displayed with offset (32px,64px) and the character at (224px,256px).

 

[edit] PS: I'm not 100% sure I got the numbers exactly right.

Edited February 8, 2016 by requinix

[Analyzer]

So there's two elements to this: the map in the background and the position of the player. Those two are out of sync, like the character thinks it has to move towards the trees due to the map boundary yet the map can continue to move.

 

Not knowing what you have now, this is the way I would implement it:

 

The AJAX call to move would return something like "the map should now show the area (x1,y1)-(x2,y2) and the character is at position (cx,cy)" and the Javascript determines where to place the character. The Javascript previously retrieved map information (like boundaries and image URLs) so it can handle the entire process of rendering without the AJAX needing to return CSS values or HTML markup.

 

Say the map is 20x20 and has boundaries (0,0)-(19,19). After movement the AJAX returns an area (0,2)-(12,14) and the character at location (4, . That location is 5 squares from the left and 9 squares from the top - not the middle of the map. The Javascript sets the map to show its background using offset (0px,64px) and positions the character at (128px,256px).

After moving right a few times the AJAX may return (1,2)-(13,14) and the character at (7, ; the map is displayed with offset (32px,64px) and the character at (224px,256px).

 

[edit] PS: I'm not 100% sure I got the numbers exactly right.

 

 

That sounds similar to what I have now although I'm a bit confused to tell you the truth x)

Everytime a player moves, it has to load "empty.png" images 26 times, instead of reloading an entire 2000 by 2000px image.

So is there a way I could implement "if player x < 7 { css background position changes to *2(-64px;) } with jquery or something?

What I have now displays in XML: (hopefully this doesn't use up most the page here)

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<root>
<map_data>
<table cellspacing='0' cellpadding ='0' style='width:416px; height:416px;'><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 7, grid_id: 128" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 7, grid_id: 129" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 7, grid_id: 130" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 7, grid_id: 131" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 7, grid_id: 132" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 7, grid_id: 133" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 7, grid_id: 134" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 7, grid_id: 135" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 7, grid_id: 136" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 7, grid_id: 137" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 7, grid_id: 138" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 7, grid_id: 139" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 7, grid_id: 140" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 8, grid_id: 148" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 8, grid_id: 149" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 8, grid_id: 150" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 8, grid_id: 151" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 8, grid_id: 152" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 8, grid_id: 153" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 8, grid_id: 154" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 8, grid_id: 155" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 8, grid_id: 156" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 8, grid_id: 157" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 8, grid_id: 158" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 8, grid_id: 159" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 8, grid_id: 160" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 9, grid_id: 168" alt="Map square"/></td><td><img src="/map/images/map_images/knight.png" style='height:32px;width:32px;' title=" test"alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 9, grid_id: 170" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 9, grid_id: 171" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 9, grid_id: 172" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 9, grid_id: 173" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 9, grid_id: 174" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 9, grid_id: 175" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 9, grid_id: 176" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 9, grid_id: 177" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 9, grid_id: 178" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 9, grid_id: 179" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 9, grid_id: 180" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 10, grid_id: 188" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 10, grid_id: 189" alt="Map square"/></td><td><img src="/map/images/map_images/knight.png" style='height:32px;width:32px;' title=" Cool"alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 10, grid_id: 191" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 10, grid_id: 192" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 10, grid_id: 193" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 10, grid_id: 194" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 10, grid_id: 195" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 10, grid_id: 196" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 10, grid_id: 197" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 10, grid_id: 198" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 10, grid_id: 199" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 10, grid_id: 200" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 11, grid_id: 208" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 11, grid_id: 209" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 11, grid_id: 210" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 11, grid_id: 211" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 11, grid_id: 212" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 11, grid_id: 213" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 11, grid_id: 214" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 11, grid_id: 215" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 11, grid_id: 216" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 11, grid_id: 217" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 11, grid_id: 218" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 11, grid_id: 219" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 11, grid_id: 220" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 12, grid_id: 228" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 12, grid_id: 229" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 12, grid_id: 230" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 12, grid_id: 231" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 12, grid_id: 232" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 12, grid_id: 233" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 12, grid_id: 234" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 12, grid_id: 235" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 12, grid_id: 236" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 12, grid_id: 237" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 12, grid_id: 238" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 12, grid_id: 239" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 12, grid_id: 240" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 13, grid_id: 248" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 13, grid_id: 249" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 13, grid_id: 250" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 13, grid_id: 251" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 13, grid_id: 252" alt="Map square"/></td><td><img src="/map/images/map_images/knight.png" style='height:32px;width:32px;' title=" Kris"alt="Map square"/></td><td><img src="/map/images/map_images/Warrior.gif" style='height:32px;width:32px;' title=" Jamie"alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 13, grid_id: 255" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 13, grid_id: 256" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 13, grid_id: 257" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 13, grid_id: 258" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 13, grid_id: 259" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 13, grid_id: 260" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 14, grid_id: 268" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 14, grid_id: 269" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 14, grid_id: 270" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 14, grid_id: 271" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 14, grid_id: 272" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 14, grid_id: 273" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 14, grid_id: 274" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 14, grid_id: 275" alt="Map square"/></td><td><img src="/map/images/map_images/knight.png" style='height:32px;width:32px;' title=" Noob"alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 14, grid_id: 277" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 14, grid_id: 278" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 14, grid_id: 279" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 14, grid_id: 280" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 15, grid_id: 288" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 15, grid_id: 289" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 15, grid_id: 290" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 15, grid_id: 291" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 15, grid_id: 292" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 15, grid_id: 293" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 15, grid_id: 294" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 15, grid_id: 295" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 15, grid_id: 296" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 15, grid_id: 297" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 15, grid_id: 298" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 15, grid_id: 299" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 15, grid_id: 300" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 16, grid_id: 308" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 16, grid_id: 309" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 16, grid_id: 310" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 16, grid_id: 311" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 16, grid_id: 312" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 16, grid_id: 313" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 16, grid_id: 314" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 16, grid_id: 315" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 16, grid_id: 316" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 16, grid_id: 317" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 16, grid_id: 318" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 16, grid_id: 319" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 16, grid_id: 320" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 17, grid_id: 328" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 17, grid_id: 329" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 17, grid_id: 330" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 17, grid_id: 331" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 17, grid_id: 332" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 17, grid_id: 333" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 17, grid_id: 334" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 17, grid_id: 335" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 17, grid_id: 336" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 17, grid_id: 337" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 17, grid_id: 338" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 17, grid_id: 339" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 17, grid_id: 340" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 18, grid_id: 348" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 18, grid_id: 349" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 18, grid_id: 350" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 18, grid_id: 351" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 18, grid_id: 352" alt="Map square"/></td><td><img src="/map/images/map_images/gold.png" style='height:32px;width:32px;' title="x: 13, y: 18, grid_id: 353" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 18, grid_id: 354" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 18, grid_id: 355" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 18, grid_id: 356" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 18, grid_id: 357" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 18, grid_id: 358" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 18, grid_id: 359" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 18, grid_id: 360" alt="Map square"/></td><tr><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 8, y: 19, grid_id: 368" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 9, y: 19, grid_id: 369" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 10, y: 19, grid_id: 370" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 11, y: 19, grid_id: 371" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 12, y: 19, grid_id: 372" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 13, y: 19, grid_id: 373" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 14, y: 19, grid_id: 374" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 15, y: 19, grid_id: 375" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 16, y: 19, grid_id: 376" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 17, y: 19, grid_id: 377" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 18, y: 19, grid_id: 378" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 19, y: 19, grid_id: 379" alt="Map square"/></td><td><img src="/map/images/map_images/empty.png" style='height:32px;width:32px;' title="x: 20, y: 19, grid_id: 380" alt="Map square"/></td><tr></tr></table>
</map_data>
<navigation_data>
<div align='center' style='font-family:custom_font;'>You found nothing. <br><p>X: <span id='getx'>14</span>, Y: <span id='gety'>13</span></p></div>
</navigation_data>
<bg_data>-448px -416px</bg_data>
<mini_data>-448px -416px</mini_data>
</root>

[requinix]

You want to use empty cells? Normally this kind of edge stuff is dealt with by keeping the map at the edges and moving the character's sprite around (as opposed to the normal way of moving the map around and keeping the character in place).

 

Consider moving left twice, from (2,2) to (0,2):

1. Move left: moves the map from (1,1)-(3,3) to (0,1)-(2,3)

2. The map is now at the left edge and cannot move anymore

3. Move left: moves the character over one square

    1   2   3          0   1   2          0   1   2
  +---+---+---+      +---+---+---+      +---+---+---+
1 |           |    1 |           |    1 |           |
  +           +      +           +      +           +
2 |     C     |    2 |     C     |    2 | C         |
  +           +      +           +      +           +
3 |           |    3 |           |    3 |           |
  +---+---+---+      +---+---+---+      +---+---+---+

Movement is always either (a) the map if there is still space to show, or (b) the character if not.

 

What you're saying is

    1   2   3          0   1   2         -1   0   1
  +---+---+---+      +---+---+---+      +---+---+---+
1 |           |    1 |           |    1 |XXX        |
  +           +      +           +      +XXX        +
2 |     C     |    2 |     C     |    2 |XXX  C     |
  +           +      +           +      +XXX        +
3 |           |    3 |           |    3 |XXX        |
  +---+---+---+      +---+---+---+      +---+---+---+

to always move the map, and fill empty spaces with the empty cell icon. It's not necessarily bad, just less common. (Makes it easier to work with non-rectangular maps though.)

 

For that,

1. Do your query like normal

2. Tally each cell in a grid, to keep track of which squares you have cells for

3. Run through the grid, look for empty squares, and add in "empty" cells with calculated data (eg, icon URL, title, alt text)

4. Send the final result to the client

 

Or alternatively, handle the emptiness on the client:

1. AJAX returns each cell and where it gets positioned

2. Javascript positions each returned cell

3. The map, or some parent element, has a background image, which will be visible in the areas where there wasn't a cell positioned

 

The first approach will probably work better for your current system.