Avoiding an obstacle in a JavaScript game using phaser

Question

I am developing a html5/javascript game using the phaser package (http://phaser.io/)

As part of this I need to do some ray-casting to create a vision cone ahead and too the side of the character. In the past I have used unity where this is really strait forward but I cant understand how I would go about this using phaser.

I have sketched out what I would like to do:

I really don't know where to start with this in javascript/phaser. The wall is made up of sprites currently. I cant find any good information on how to do ray-casting for obstacle detection anywhere so if someone could point me in the right direction that would be amazing.

Alternatively, could anyone suggest a better approach to obstacle detection in multiple directions?

Answer 1

Have you seen http://gamemechanicexplorer.com/#raycasting-1 ? Also try with https://github.com/codevinsky/phaser-light-and-magic