Javascript A* pathfinding demo

A new post in the english side of “The shaman’s lair”, after more than a year. I’ve been caged by real life problems, and the effort of writing in english was too much to me. Now that things seem to come to a more stable way it’s my intention to try again. Short posts, mainly about my works as a programmer but with focus on my side projects.

Today is the time to speak of a short Javascript implementation, coded in my spare time to learn something about the language and to make a first step into roguelikes game system. To be clear, I’m not starting a new roguelike. But there are lot of interesting things to be learned in that world, and learning while playing is a the best way, for everything.

Well, the first step I’ve made has been to write a procedural generation code with the target to build random cavelike structures, and it works fine for me. I’ve called it Caves and Creatures, you could guess why 🙂

Un esempio di generazione procedurale in C&C

Caves procedural generation example

Then I began to think, when you have a maze (or something like), you need to be capable to run through it, from a start point to an end point, to find the best path between the two points.
For that purpose I choosed to study pathfinding, through the widely used A* algorithm and try to implement it in Javascript. The reasons are the same explained above: Javascript was totally new for me, it is a good language to approach web developing and it is very simple to set up a dev environment. Basically I’ve installed Chrome, added the command line parameters needed to work with Web Workers, installed Notepad++ to write the code.
And that’s all.

To keep trace of my progressions I’ve created a GitHub repository and a demo page. At the moment the repository is up-to-date to the last revision and the demo let you navigate through some of the pathfinding options like choosing the heuristic function and movements cost. With the intention to give the user more interaction I’ve added (to the random generated grid) a canvas where you can draw obstacles and choose start and end points.
At last, you could save the picture and use the local storage to save and restore the grid.

Pathfinding demo

Playing with the demo

After reached this point, I’m coding a second version, using web workers to move a cursor in the grid. The web worker choose every turn the best path to the target and the user could draw obstacles and watch the cursor changing its mind and trying new ways.
But this version is under test and not really ready.

Here is the GitHub respository:
and this is the demo page:

As always, suggestions and critics are welcome.

La zona blu è quella visitata, la scia bianca è il best path

The best path (white) has been found


Aggiungi ai preferiti : Permalink.

I commenti sono chiusi.