For those of you looking for the files directly, they can grab them here. Individual source code can be viewed here: index.htm, javascript.js, ajax.php. Note that jquery.js file is also required (1.4.2), should you copy-paste from the source code instead of downloading the archive.

The code is licensed under LGPL, so you can use it for personal as well as commercial purposes. All files are commented and a working example is provided within. You do not need a firm grasp of jQuery in order to understand this example and you do not need experience with JSON data format. PHP and jQuery handle the conversions for you. I will not explain everything step by step – for that refer to the files and the example provided – but I will give a general overview of what is happening here.

Front-end user-interface has the various actions built through a uiAction() javascript function. This is a general-use function that takes two variables, an ‘action’ that acts as an action identifier, and ‘data’ variable. Data variable can be whatever you want, it can be a string, integer, array or an object, depending on your needs. Since you will control how the ‘data’ variable will be used, it is entirely up to you. In the example files I am calling the uiAction() on a <button> element like this:

uiAction(‘alertLowercaseString’,$(‘#example’).val());

For those of you who know jQuery, know that I am sending the value of an input field with an id of ‘example’ to the function. Action’s name itself is ‘alertLowercaseString’ in that case. Then, within uiAction() function in the ‘action’-switch I am executing the function that sends data to AJAX, like this:

input['string']=data;
executeAjaxAction(action,input);

Action is, by default, the same as action identifier used to call uiAction(). executeAjaxAction() is a function that submits data to PHP backend (but you can customize it, such as have different uiAction() calls execute same function in back-end). ‘input’ is an uiAction() specific javascript object. This is defined at the start of the uiAction() function and is used for convenience in order to send specific data to AJAX. ‘executeAjaxAction()’ expects ‘input’ to be an object or an array, since this is what will be sent to PHP backend. After submitting data to executeAjaxAction() the front-end will connect PHP back-end with AJAX. In this case I am sending an ‘action’ of alertLowercaseString. PHP backend will solve the ‘input’ into a variable named $inputVariables and again – as it was in front-end, within a switch you can define what you want to take place in the back-end and what will be returned. In this example it is:

$return['action']=’alert’;
$return['message']=’Your string lowercased: ‘.strtolower($inputVariables['string']);

‘$return’ is an array that is used to create a JSON object from. ‘action’ for ‘$return’ needs to be always defined, but every other variable can be whatever you want, since – as before – you get to decide what data you need to use later on in front end. Basically everything you want to return to front-end should be placed in ‘$return’ array. PHP then creates a JSON string of the ‘$return’ array and returns it to the browser. executeAjaxAction() function will then call a javascript function parseAjaxReturn(), which will check what action PHP defined for callback (if any) and then – in this example of ‘alert’ as the action – does the following:

alert(json['message']);

And this alerts to the user the lowercased string.

This quick explanation may be difficult to understand at first, but I strongly suggest that you take a look at the fully working examples provided within. Files are fully commented and examples provided within are minimal, so you can take this into production use right away should you want.

Download fully working example files here

If you have any questions, go ahead and contact me directly or comment this article. I will get back to you as soon as possible.

All the best!

This example has a few limits, that is you can easily confuse it by clicking on two tile locations in a row. But in general it works and what I will be using this for will be something a bit different, so this limitation was of no concern to me. However the entire pathfinding calculation takes place on PHP backend. Each map is essentially a square (currently a limitation of pathfinder, but can easily be tweaked) and stored as an associative array, every tile in that array like this:

$map['1x1']['weight']=1.0;

The first key is the coordinate of the single map tile and the weight key is used to store weight of this map tile for calculations. Nothing else is needed (and an example is provided in the files below). For actual game purposes or whatnot you can store additional information on that very map as long as the coordinate and weight are assigned as shown in the example. For example, in my own tech-demo I also store the graphic tile used in the map array.

Finding the actual path is just as simple:

$map=getMap();
require(‘class.pathfinder.php’);
$path=new PathFinder(); //Create new pathfinder object
$path->setOrigin(1,1); //Set the start location
$path->setDestination(20,20); //Set the destination
$path->setMap($map); //Assign the map to use for calculations
$result=$path->returnPath(); //Returns an array of all the walked steps

Working example, as well as commented pathfinder class is available below:

Download the class and example file here

Please note that this is not a definitive pathfinder. It only takes into account one square ahead and on very large maps I am sure there are more ideal solutions. But for your basic browser based game this is a good starting point and I learned a lot by creating it. This is also easy to expand based on your needs.

If you have any other questions, let me know.

The code is shared entirely free for personal or commercial use.

Cheers!