ackvonhuelio I have made something like this before, but this one seems to be a little more complicated than it.
What worked for me was converting the player and the enemy/point of interest into a binary matrix, or x and y coordinates represented as an array of ones and zeroes. The top left-most value would represent the player, and the bottom right where it needs to go. Zeroes mean spaces that are empty, and ones mean spaces that are occupied, and you can't pass through them. For example:
//Top left and bottom right represent the enemy and the player's positions.
//The rest of the data represent the environment in between them
var matrix = [
[1, 0, 0, 0, 0, 0, 0, 0, 1],
[0, 0, 1, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 0, 1, 0, 0, 0, 1, 0, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 1]
]
/*
result:
x x
x x
x
x x
x x
*/
The more data you're able to include into this matrix will mean slower filtering times, however the pathfinding will be more exact. For the algorithm, I suggest looking at this StackOverflow answer. You can set the start and end points (probably 0,0 and the very end of the array) and get the exact path and moves to follow to get to it.
So, in steps:
1) Get the player's x and y coordinates and the AI's coordinates
2) Using their coordinates, make a box of the environment and convert that into a binary array. 0 means pixels the AI can move to, and 1 would mean occupied pixels, such as the collision borders of objects or obstacles
3) Set the start and end points and throw that into the algorithm
4) wow you have the pathfinded path route
