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
Post a Comment