Simple Pathfinding in Javascript Canvas - Think Adventure game -


i trying replicate function in point , click adventure game character needs walk within path without going outside boundaries of path.

just example: have js fiddle: http://jsfiddle.net/1ztzz6an/1/ draws polygon. want characters feet(bottom part of imported image) stay within polygon. here code:

var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d");  var triangle = [{     x: 71,     y: 247 }, {     x: 299,     y: 313 }, {     x: 520,     y: 215 }, {     x: 587,     y: 49 }, {     x: 468,     y: 154 }, {     x: 420,     y: 36 }];    // define polygon function define(polygon) {     ctx.beginpath();     ctx.moveto(polygon[0].x, polygon[0].y);     (var = 1; < polygon.length; i++) {         ctx.lineto(polygon[i].x, polygon[i].y);     }     ctx.closepath(); } define(triangle); ctx.fill(); 

i have seen examples using tiles , such. want within polygon itself. alternatively, if easier, willing @ solution way walk outside polygons, long players feet not touch polygons. not sure better , easier.

any , example me going? thank you!

there couple of algorithms can use check given point (the player) inside polygon or not: raycasting , winding number, both described in wikipedia article.

update: looks canvas api has implemented you, see marke's comment above


Comments

Popular posts from this blog

mysql - FireDac error 314 - but DLLs are in program directory -

git - How to list all releases of public repository with GitHub API V3 -

c++ - Getting C2512 "no default constructor" for `ClassA` error on the first parentheses of constructor for `ClassB`? -