Is there a way to load data from a text file on the same server as the web page?

Question

Recently I have started working on a simple top down tile based program where you can move a player character around the map and zoom in and out of the map.

It's been going well, I have a background drawn and now I want to start drawing some tiles.

Currently I have something that looks kind of like this:

var tileset1 = new Image();
tileset1.src = "Images/Tileset1.gif";
var tx = [];
var ty = [];
var txo = [];
var tyo = []; //Background tile x and y on the map and the x and y offset in the image for drawing
var tilesize = 32; //constant for each tiles width and height in pixels.

function map1data() {
    "use strict";
    tx[0] = 0;
    ty[0] = 0;
    txo[0] = 0;
    tyo[0] = 0;
    tx[1] = 32;
    ty[1] = 0;
    txo[1] = 32;
    tyo[1] = 0;
}
map1data();
ctx.drawImage(tileset1, txo[i], tyo[i], tilesize, tilesize, tx[i], ty[i], tilesize, tilesize);

This works fine, but my main issue is with using arrays to draw the tiles and having to give the properties of each tile by hard coding it into the script.

If my map had 100 tiles in it, i would have to manually write 400 lines of code, not ideal.

So what I'm wondering is there a way to source a plain text file on the actual server the web page is hosted on (As in, in the same root file system as the index page?) and set a variable to the contents of that, like I did with the images? Rather than having to use DOM to request it from a specific servers url?

Answer 1

You can use the XMLHttpRequest API. What this does is tell the browser to request the specified file from the server without loading a new page and presenting it to the user. You can then assign the returned data to a variable in your code and work with it from there.

If you don't mind using jQuery, you could use the .get() method , which has simpler syntax:

$.get( "tiles.txt", function( data ) {
  // assign 'data' to an existing variable or pass into a function
});

You might want to look into storing the data as JSON or another similar format rather than plaintext (it'll be easier to manipulate).

Answer 2

Is there a reason you are not wanting to use ajax? You can use PHP as follows (assume the following file is called myscript.php):

//place any opening javascript code here if necessary.
<?php
     // open a file using the fopen function
     // read each line of the file using the fgets function
     // convert each line into your appropriate javascript code such as an array etc.
     // echo the javascript code
//place any closing javascript code here if necessary.

Then you can include it just like including any other javascript file:

<script src="myscript.php"></script>

Also, since it is in a PHP script, you can reference files whether they are in the web root or outside of the web root.