So when i add the array i would like it to be placed within the XML file within the:
Code:
<Level><map> ARRAY HERE </map></Level>
How would i be able to add the map variable from the Javascript into a <map></map> node within the XML file? I would need to be able to return the <map> number aswel. For example if i already had 4 <level><map>[[0,0],[0,0]]</map></level> then i would need to add it to the end of those and return the number 5 to show thats what the level number is.
Not 100% true; MSIE can write to files ON THE USER'S COMPUTER (only), but only if the user marks your site as being a "safe" site and only if he/she agrees to let your page run an "unsafe for scripting" ActiveX control.
But even here, the JS code is only writing to the USER's computer. No matter what, JavaScript has no ability to write to files ON THE SERVER, which is surely what you would want to do for your map game.
You will need server-side code (PHP/ASP/JSP) to do this. And then the JavaScript code *can* send the data to the server and let the server do the file writing.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Go with whatever server side you're using, if at all possible. It will have no problem writing to the file. You have to open the file for writing, you can make a template file for the heading, copy it to the folder you want it in, with rename, write what you want to it, and append the closing tags. Done.
Actually, if the server side system you are using understands XML well, you can load the XML file into an XML document, *append* the new <Level> with its subnodes, and then write the XML document back out as XML text. Trivial to do in ASP.NET or JSP. Not very hard to do in classic ASP. You then don't have to parse the XML in the file by hand to try and find the closing tag.
(I don't use PHP, so I don't know where this is easy or hard there. If it's not easy--assuming you have the right libraries--I would be surprised.)
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
But since this is such a fun exercise, let us assume a few things here:
- The OP is another victim of the ambiguous JavaScript != JScript
- The OP has control over the server and is able to flag server directories as writable
- The deployment server supports classic ASP (and thus JScript (which is *remarkably* similar to JavaScript))
- Only 1 user at a time can access the "savemapdata" page (it is not a data base, although i leave that as and exercise for the better qualified)
inc/json.asp
Code:
<%
// thanks of course to Old Pedant
var Clone = function (a) {if(null==a||"object"!=typeof a)return [];var c=a.constructor(),b;for(b in a)a.hasOwnProperty(b)&&(c[b]=a[b]);return c};
/*
here is where you would include JSON i believe the version i use can be found here
https://github.com/douglascrockford/JSON-js/blob/master/json2.js
See http://www.JSON.org/js.html
This code should be minified before deployment.
See http://javascript.crockford.com/jsmin.html
*/
%>
<%@LANGUAGE="JavaScript"%><!--Dont let the name fool ya...-->
<!--#include file="inc/json.asp"-->
<!--#include file="inc/maps.asp"-->
<%
//retrieve array in object notation
mapFromURL = new String(Request("map")).replace(/[^\[\]\,0-9]/g,'');
levelFromURL = new String(Request("level")).replace(/[^0-9]/g,'');
var FSO = new ActiveXObject("Scripting.FileSystemObject")
var ForReading = 1, ForWriting = 2, ForAppending = 3;
maps.push(
{
map:JSON.parse(mapFromURL) ,
level:levelFromURL
}
);
var MapsFileObj = FSO.OpenTextFile('inc/maps.asp' , ForWriting);
MapsFileObj.WriteLine('<' + '%')
MapsFileObj.WriteLine('maps = ' + JSON.stringify(maps));
MapsFileObj.WriteLine('%' + '>');
MapsFileObj.Close();
%>
maps.asp (outputs xml data...)
Code:
<%@LANGUAGE="JavaScript"%>
<!--#include file="inc/maps.asp"-->
<!--#include file="inc/json.asp"-->
<%
var FilteredMaps = [];
var Levels = '' , write = function (d){Levels+=d+'\n'};
for (var i=0 , ii = maps.length ; i<ii ; ++i) {
FilteredMaps[maps[i].level] = Clone(maps[i]); // read only the most recent version of the map, conversly one might only save one version of each level... but let's say that we intentionally allowed the level versions to co-exist for historical reasons
}
for (var i=0 , ii = FilteredMaps.length ; i<ii ; ++i) {
if (FilteredMaps[i].terrain===undefined) // or some other hiddeous malformation...
continue;
write(' <Level> <!-- Level ' + i + ' -->'); // Automation is no excuse for sloppy formatting ;)
write(' <map level="' + i + '">');
write(' ' + JSON.stringify(FilteredMaps[i].terrain));
write(' </map>');
write(' </Level>');
}
%>
<TileMaps>
<%=Levels%>
</TileMaps>
now all you need is a form to populate the URL variables (or you could link to the page "savemapdata.asp?level="+JSON.stringify(levelNum)+"map="+JSON.stringify(mapData)" from your javascript)
At a second glance I suppose the savemapdata.asp and maps.asp could be combined to produce an actual .xml as requested...
savemapdata.asp
Code:
<%@LANGUAGE="JavaScript"%>
<!--#include file="inc/json.asp"-->
<!--#include file="inc/maps.asp"-->
<%
//retrieve array in object notation
mapFromURL = new String(Request("map")).replace(/[^\[\]\,0-9]/g,'');
levelFromURL = new String(Request("level")).replace(/[^0-9]/g,'');
var FSO = new ActiveXObject("Scripting.FileSystemObject")
var ForReading = 1, ForWriting = 2, ForAppending = 3;
maps.push(
{
map:JSON.parse(mapFromURL) ,
level:levelFromURL
}
);
var MapsDataFileObj = FSO.OpenTextFile('inc/maps.asp' , ForWriting);
MapsDataFileObj.WriteLine('<' + '%')
MapsDataFileObj.WriteLine('maps = ' + JSON.stringify(maps));
MapsDataFileObj.WriteLine('%' + '>');
MapsDataFileObj.Close();
var FilteredMaps = [];
var Levels = '' , write = function (d){Levels+=d+'\n'};
for (var i=0 , ii = maps.length ; i<ii ; ++i) {
FilteredMaps[maps[i].level] = Clone(maps[i]); // read only the most recent version of the map, conversly one might only save one version of each level... but let's say that we intentionally allowed the level versions to co-exist for historical reasons
}
for (var i=0 , ii = FilteredMaps.length ; i<ii ; ++i) {
if (FilteredMaps[i].terrain===undefined) // or some other hiddeous malformation...
continue;
write(' <Level> <!-- Level ' + i + ' -->'); // Automation is no excuse for sloppy formatting ;)
write(' <map level="' + i + '">');
write(' ' + JSON.stringify(FilteredMaps[i].terrain));
write(' </map>');
write(' </Level>');
}
var MapsXMLFileObj = FSO.OpenTextFile('inc/maps.xml' , ForWriting);
MapsXMLFileObj.WriteLine(' <TileMaps>');
MapsXMLFileObj.WriteLine(Levels);
MapsXMLFileObj.WriteLine(' <\/TileMaps>');
MapsXMLFileObj.Close();
%>
Gee, that was fun
anyway, my batteries are dying, I hope I didn't miss anything. I tested all those pages individually (except the last) so they should work in concert.
__________________
Allwisend bin ich nicht, doch viel ist mir bewursst
-Goethe
Here's my solution, it uses PHP in the backend, and JSON, so you'll want to modify your server side code as appropriate (if you wrap the JSON in XML, you'll also need to adjust the syntax in the AJAX pieces)...oh, depending on your target user, you'll want to add some validation to the inputs (both client and server side):
PHP Code:
<?php if($_REQUEST['level']&&$_REQUEST['map']){ $file=file_get_contents('levels.txt'); //get the existing content $json=json_decode($file); //convert it from string to object $tilemaps=$json->tilemaps; $tilemaps->$_REQUEST['level']=json_decode($_REQUEST['map']); $o['tilemaps']=$tilemaps; $str=json_encode($o); $pos=fopen('levels.txt','w'); fwrite($pos,$str); fclose($pos); } else{ header('content-type:application/json'); echo file_get_contents('levels.txt'); } ?>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Maker</title> <style> #can{width:300px; height:90px; display:block; background-color:#666;} </style> </head> <body> Which level do you want:<input type="text" id="level_request" value="level1"/><button onclick="init()">Go</button> </body> <script> function saveLevel(){ ajax=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")); name=document.getElementById('level_name').value; //this grabs the content in the Level Name field if(name.length>0){ ajax.onreadystatechange=function() { if (ajax.readyState==4&&ajax.status==200){ alert('Level saved'); } } params='level='+name+'&map='+JSON.stringify(map); //this constructs the message to send, consisting of the name and map ajax.open("POST","levels.php",true); //this is the file you will be POSTing a message to ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajax.setRequestHeader("Content-length", params.length); ajax.setRequestHeader("Connection", "close"); ajax.send(params); } } var blocksize=30; var map=[[1,1,1,1,1,1,1,1,1,1],[1,3,0,0,0,0,2,4,0,1],[1,1,1,1,1,1,1,1,1,1]]; var can; var ctx;
function init(){ ajax=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")); ajax.onreadystatechange=function() { if (ajax.readyState==4){ //this test whether the request is complete l=document.getElementById('level_request').value; document.body.innerHTML='Level Name:<input type="text" id="level_name" /><br/><canvas id="can" width="300" height="90"></canvas><br/><button onclick="saveLevel()">Save</button>'; //this replaces the initial form can=document.getElementById('can') if(can){ctx=can.getContext('2d');}
if(ajax.status==200){ //this test whether it was successful m=JSON.parse(ajax.responseText);//this overwrites the existing map with the received data console.log(m); map=m.tilemaps[l]; for(y=0;y<map.length;y++){ for(x=0;x<map[y].length;x++){ draw(y,x); } } can.addEventListener('click',builder); } else{ //this is what we do if the request is done and it was a failure for(y=0;y<map.length;y++){ for(x=0;x<map[y].length;x++){ draw(y,x); } } can.addEventListener('click',builder); alert('Something went wrong, loading default level'); }
} function builder(e){ if (e == null) {e = window.event;} x = e.clientX; //where the click was y = e.clientY; offsetX = ExtractNumber(can.offsetLeft);//where the canvas is offsetY = ExtractNumber(can.offsetTop); x_grid=Math.floor((x-offsetX)/blocksize); //which block in the canvas was clicked y_grid=Math.floor((y-offsetY)/blocksize); map[y_grid][x_grid]++; if(map[y_grid][x_grid]>4){map[y_grid][x_grid]=0;} draw(y_grid,x_grid); }
function draw(y,x){ kind=map[y][x]; switch(kind){ case 0: ctx.drawImage(floorimg,x*blocksize,y*blocksize); break; case 1: ctx.drawImage(wallimg,x*blocksize,y*blocksize); break; case 2: ctx.drawImage(blockimg,x*blocksize,y*blocksize); break; case 3: ctx.drawImage(playerimg,x*blocksize,y*blocksize); break; case 4: ctx.drawImage(goalimg,x*blocksize,y*blocksize); break; } }
function ExtractNumber(value){ var n = parseInt(value); return n == null || isNaN(n) ? 0 : n; } var floorimg=new Image(); floorimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNpiNDU1ZaANYAHiadOmEaM0KysLSOaCSYJg8rRpTAw0A6NGjxo9avQIMJqRdiUfDV3NQlI5SVIJPJpCRo0eNXrU6EFaqAIEGABIow4bXRyDLQAAAABJRU5ErkJggg=='; var wallimg=new Image(); wallimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEFJREFUeNpirK+vZ8AGGhsbcUkRqYaJgWZg1Gj6AUZIFFOeHjDVjEbjcEoho2XIaAoZLUNGU8hoGTKaQmgAAAIMAJeMK58/yjg2AAAAAElFTkSuQmCC'; var blockimg=new Image(); blockimg.src='data:image/png;base64,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'; var playerimg=new Image(); playerimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATdJREFUeNpiNDU1ZaANYAHiadOm4ZLGZfGi+fPxmzt52jQWPNJAc/8rKSGLMN679//+ThBD0Z2g6UwMNAM0NJqFVA3AoCAmrAkbDQxcUiOQgNGQhGHc+QpTKi5RjMgEw4LVXKyGQgBE6my5GFwNkF1VW9vc0MDMzIwvGvGbi2wB0EQ4+8mTJ4kpKTRJIRDXFJWU4DSaSCdjOhzCffP2bVxiIk3SNZqzaJxlsrKyqGjiZFhhR2NX58JcjRwJZANIEQ0MiSFS8iGnRXSjgUUBmjR+g5BTG0Tj6dOnqexqiLknTpzAFyBEOhyteAKSJ0+eRCueWLCWkJCSE2umh1uM7ALkcCBQXkPKX6xFM1ZTyKllMGt0SC1BjAUk142wxoIpQdOHX2MBGJmMGKUKpLFATFgz0q45CRBgAHQ6gQd/qFgwAAAAAElFTkSuQmCC'; var goalimg=new Image(); goalimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFtJREFUeNpilJSUZKANYAFiGRkZqpv75MkTJgaagWFv9BMwGA2QUaNHttEsmPmCYMbBJYVWzNHR1XgKWIh7iS+BR1PIqNEjIaPjAaQ2V0bDGktYk9S6IB4ABBgADi4U6URvDncAAAAASUVORK5CYII='; </script> </html>
Best Regards,
Navin Patel
Last edited by VIPStephan; 08-09-2012 at 02:04 PM..
Reason: added code BB tags and removed fake signature
Before you post, read our: 
