[web] [php/javascript] is this possible?
Author
I am trying to make some sort of browserbased text game and an important feature is the game map.
At the moment I have a hardcoded map in a table which picks the links and the pictures from a database and it works great. But when there are more users using the map at the same time the map should be updated every time when a user changes the tiles on the map (you can build something on the map and it should update the pictures) and that doesn't look very well.
Is there a way to only update a single tile and not having to reload the whole map?
thanks in advance.
ID
The best forum for this question is the Web Development one, so I'll move this there.
By "hardcoded map in a table", do you mean an HTML table?
You can't really have the server notify all the clients that the map has changed. However, each client can use javascript to repeatedly ask the server (eg. every 10 seconds) if the map has changed since they last got a copy of the map, and if so, to resend it (or maybe only the changed parts). The javascript can then change the relevant table cell on that browser to the required new contents.<br><br>Typically this sort of functionality is called 'AJAX', Asynchronous javascript and XML, though often it's more useful to ignore the XML part and just have the server send plain text or JSON (a format that is easy for javascript to parse). Basically you write another PHP page that just returns these map changes, a javascript script to periodically query that page, and another script to handle the responses from that page and alter your document accordingly.
By "hardcoded map in a table", do you mean an HTML table?
You can't really have the server notify all the clients that the map has changed. However, each client can use javascript to repeatedly ask the server (eg. every 10 seconds) if the map has changed since they last got a copy of the map, and if so, to resend it (or maybe only the changed parts). The javascript can then change the relevant table cell on that browser to the required new contents.<br><br>Typically this sort of functionality is called 'AJAX', Asynchronous javascript and XML, though often it's more useful to ignore the XML part and just have the server send plain text or JSON (a format that is easy for javascript to parse). Basically you write another PHP page that just returns these map changes, a javascript script to periodically query that page, and another script to handle the responses from that page and alter your document accordingly.
Author
thanks for moving my post.. didn't notice that there was a web development forum :P
I shall check AJAX out and yes with hardcoded I mean a html table.
here is the link http://tijmen.samkline.com/tchaka/yorrick/map.php/
any other suggestions are still welcome btw.
ID
I shall check AJAX out and yes with hardcoded I mean a html table.
here is the link http://tijmen.samkline.com/tchaka/yorrick/map.php/
any other suggestions are still welcome btw.
ID
Author
Ok I have AJAX working now.
it updates the picture of a tile.
the only problem now is that the picture moves a little bit up when my AJAX script is executed.
Any ideas how this could be fixed?
ID
it updates the picture of a tile.
the only problem now is that the picture moves a little bit up when my AJAX script is executed.
Any ideas how this could be fixed?
ID
How are you placing your pictures? Are they embedded in a table, with Div's...?
We will need to see your code and an example of what is happening before we can provide solid feedback.
We will need to see your code and an example of what is happening before we can provide solid feedback.
Author
well, as you can see in the sourcecode the pictures are embedded in a table.
my system actually works fine unless one thing. when my ajax script is executed some pictures are moved a litle bit.
this is my ajax script:
and the source of updateajaxmap.php:
ID
my system actually works fine unless one thing. when my ajax script is executed some pictures are moved a litle bit.
this is my ajax script:
function GetHttpObject(){ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}var http = GetHttpObject();var glob_x;var glob_y;function updateTable(){ try { //http = GetHttpObject(); var y = 1; var x = 1; while(y <= 1) { glob_y = y; while(x <= 3) { glob_x = x; var url = "updateajaxmap.php?x="+x+"&y="+y; http.open("GET",url,true); http.onreadystatechange = updateTableResponse; http.send(null); x += 1; } y += 1; } } catch (e) { alert("error1> " + e.message); } }function updateTableResponse(){ if (http.readyState == 4) { try { document.getElementById(glob_x+","+glob_y).innerHTML = http.responseText; } catch (e) { alert("error2> " + e.message); } }}function OpenPopup($link){window.open($link,'window','width=400 height=500');}and the source of updateajaxmap.php:
<?phpinclude("functions.php");sql_connect();sql_selectDb("foo_bar");$x = (int)htmlspecialchars($_GET['x']);$y = (int)htmlspecialchars($_GET['y']);if ($x <= 0 || $y <=0){ header("location:error.php?noret=1&errcode=Unauthorized+request"); exit();}$pic = mysql_query("SELECT foo FROM foomap WHERE x = $x && y = $y") or die("unable to proccess query - " . mysql_error());$pic = mysql_fetch_row($pic);echo ("<a href=\"javascript:OpenPopup('map.php?x=" . $x . "&y=" . $y . "')\"><Img src=\"$pic[0]\" border=\"0\"></a>");sql_close();?>ID
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
